Make complex list options in WP7 vivid

In WP7 projects, we often use someComplex list optionsThey are usually used to present a small amount of information and play a navigation role, such as the following figure:

650) this. width = 650; "style =" width: 251px; height: pixel PX "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1P9354206-0.png "width =" 324 "height =" 639 "/>

The two-color ball, 3D and colorful are used for navigation, but the picture on the left has a title and the descriptions below. They constitute a complex list option, which is used for navigation. According to the user experience, if this list is not changed when we click, the user experience will be relatively poor. If a change can be added, the user can experience the successful click. In WP7, the usually added change is the dip change. For example, the complex list is divided into four parts. When a click occurs within 1 range, the area is tilted in 1. 4.

650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1P9355915-1.jpg "/>

In Silverlight, there is a class that represents three-dimensional effects: PlaneProjection. You can change the RotationY and RotationX attributes to change the plane angle. You can place images, titles, and descriptions in a container control to change the Projection attribute of the container control to achieve the changed effect. The Code is as follows:

 
 

  
  
PlaneProjection pp = new PlaneProjection();  
  
  
pp.RotationY = 10;  
  
  
pp.RotationX=10;  
  
  
StackPanel sp = new StackPanel();  
  
  
sp.Projection = pp; 
 
 

There is another question: when to trigger tilting. The container control has three events: ManipulationStarted, ManipulationDelta, and ManipulationCompleted. They are changed when the gesture is input, triggered at the end, that is, when we click, click not to move, click the trigger after leaving. These three events are used to change the skew of the Container Control. The complete code is as follows:

 
 

  
  
Private void StackPanel_ManipulationStarted (object sender, ManipulationStartedEventArgs e)
  
  
{
  
  
// Tilt display Animation
  
  
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)
  
  
{
  
  
// Tilt display Animation
  
  
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)
  
  
{
  
  
// Restore tilt display Animation
  
  
PlaneProjection pp = new PlaneProjection ();
  
  
StackPanel sp = (sender as StackPanel );
  
  
Pp. RotationY = 0;
  
  
Pp. RotationX = 0;
  
  
Sp. Projection = pp;
  
  
}
 
 

When you click the complex list option again, the system will not respond.

This article is from "Gui Su Wei" blog, please be sure to keep this source http://axzxs.blog.51cto.com/730810/786848