让WP7下复杂列表选项生动起来

       在WP7项目中，我们经常用到一些复杂的列表选项，它们通常是用来呈现少量信息，并具有导航作用，比如下面的图形：

双色球，3D和七乐彩都是用来导航的，但左边的图片，上面有标题，下面有描述，它们共同构成了一个复杂的列表选项，这个选项是用来导航的。要据用户体验来说，如果这个列表在我们选择点击时，没有一点变化，用户体验相对来说就差一些，如果能加上一个变化，用户就能体验到点击成功。

在WP7中，通常加的变化是倾角变化，如下图，把复杂列表分成四份，当点击发生1范围内，1区域内倾。4区域就会外倾。

在Silverlight中，有一个表示三维效果的类：PlaneProjection，可以通过改变它的RotationY

和RotationX两个属性，来变化在平面的角度。

可以把图片，标题，描述放到一个容器控件中，统 一来改变容器控件的Projection属性，来达到变化的效果。代码如下：

 

1. PlaneProjection pp = new PlaneProjection();  
2. pp.RotationY = 10;  
3. pp.RotationX=10;  
4. StackPanel sp = new StackPanel();  
5. sp.Projection = pp; 

现在还有一个问题，就是什么时候触发倾。容器控件都有三个事件，ManipulationStarted，                              ManipulationDelta，ManipulationCompleted，分别是手势输入时，变化，结束时触发，也就是我们点击时，点击未离开移动，点击离开后触发，正好用这三个事件来改变容器控件的倾斜。

完整代码如下：

1. private void StackPanel_ManipulationStarted(object sender, ManipulationStartedEventArgs e)  
2.         {  
3.             //倾角显示动画  
4.             PlaneProjection pp = new PlaneProjection();         
5.              
6.             StackPanel sp = (sender as StackPanel);     
7.             if (e.ManipulationOrigin.X > 100)  
8.             {  
9.                 pp.RotationY = -20;  
10.             }  
11.             else 
12.             {  
13.                 pp.RotationY = 20;  
14.             }  
15.             if (e.ManipulationOrigin.Y > 28)  
16.             {  
17.                 pp.RotationX = 20;  
18.             }  
19.             else 
20.             {  
21.                 pp.RotationX = -20;  
22.             }  
23.             sp.Projection = pp;  
24.         }  
25.         int value = 16;  
26.         private void StackPanel_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)  
27.         {  
28.             //倾角显示动画  
29.             PlaneProjection pp = new PlaneProjection();  
30.             StackPanel sp = (sender as StackPanel);  
31.             if (e.ManipulationOrigin.X > 100)  
32.             {  
33.                 pp.RotationY = -20;  
34.             }  
35.             else 
36.             {  
37.                 pp.RotationY = 20;  
38.             }  
39.             if (e.ManipulationOrigin.Y > 28)  
40.             {  
41.                 pp.RotationX = 20;  
42.             }  
43.             else 
44.             {  
45.                 pp.RotationX = -20;  
46.             }  
47.             sp.Projection = pp;  
48.    
49.         }  
50.         private void StackPanel_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)  
51.         {  
52.             //恢复倾角显示动画  
53.             PlaneProjection pp = new PlaneProjection();  
54.             StackPanel sp = (sender as StackPanel);  
55.             pp.RotationY = 0;  
56.             pp.RotationX = 0;  
57.             sp.Projection = pp;  
58.         }  

 

这时，再次点击复杂列表选项时，就会有不会的反应了。