在WP7项目中,我们经常用到一些复杂的列表选项,它们通常是用来呈现少量信息,并具有导航作用,比如下面的图形:
双色球,3D和七乐彩都是用来导航的,但左边的图片,上面有标题,下面有描述,它们共同构成了一个复杂的列表选项,这个选项是用来导航的。要据用户体验来说,如果这个列表在我们选择点击时,没有一点变化,用户体验相对来说就差一些,如果能加上一个变化,用户就能体验到点击成功。
在WP7中,通常加的变化是倾角变化,如下图,把复杂列表分成四份,当点击发生1范围内,1区域内倾。4区域就会外倾。
在Silverlight中,有一个表示三维效果的类:PlaneProjection,可以通过改变它的RotationY
和RotationX两个属性,来变化在平面的角度。
可以把图片,标题,描述放到一个容器控件中,统 一来改变容器控件的Projection属性,来达到变化的效果。代码如下:
- PlaneProjection pp = new PlaneProjection();
- pp.RotationY = 10;
- pp.RotationX=10;
- StackPanel sp = new StackPanel();
- sp.Projection = pp;
现在还有一个问题,就是什么时候触发倾。容器控件都有三个事件,ManipulationStarted,
ManipulationDelta,ManipulationCompleted,分别是手势输入时,变化,结束时触发,也就是我们点击时,点击未离开移动,点击离开后触发,正好用这三个事件来改变容器控件的倾斜。
完整代码如下:
- private void StackPanel_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
- {
- //倾角显示动画
- PlaneProjection pp = new PlaneProjection();
- StackPanel sp = (sender as StackPanel);
- if (e.ManipulationOrigin.X > 100)
- {
- pp.RotationY = -20;
- }
- else
- {
- pp.RotationY = 20;
- }
- if (e.ManipulationOrigin.Y > 28)
- {
- pp.RotationX = 20;
- }
- else
- {
- pp.RotationX = -20;
- }
- sp.Projection = pp;
- }
- int value = 16;
- private void StackPanel_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
- {
- //倾角显示动画
- PlaneProjection pp = new PlaneProjection();
- StackPanel sp = (sender as StackPanel);
- if (e.ManipulationOrigin.X > 100)
- {
- pp.RotationY = -20;
- }
- else
- {
- pp.RotationY = 20;
- }
- if (e.ManipulationOrigin.Y > 28)
- {
- pp.RotationX = 20;
- }
- else
- {
- pp.RotationX = -20;
- }
- sp.Projection = pp;
- }
- private void StackPanel_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
- {
- //恢复倾角显示动画
- PlaneProjection pp = new PlaneProjection();
- StackPanel sp = (sender as StackPanel);
- pp.RotationY = 0;
- pp.RotationX = 0;
- sp.Projection = pp;
- }
这时,再次点击复杂列表选项时,就会有不会的反应了。
本文转自桂素伟51CTO博客,原文链接: http://blog.51cto.com/axzxs/786848
,如需转载请自行联系原作者