Simulate the nano5 interface using Silverlight

A while ago, I accidentally found that a dynamic song selection interface (as shown in) would appear after the iPod nano5 was sideways. So I wanted to use Silverlight to achieve this effect. You are welcome to make a brick.

 

This is a demo, but thisProgramWhy can't it be displayed? I have to use an image (you can download it if you are interested ).Source code):

 

In the production process, the tedious part is the reflection effect. The first practice is to use the same album image twice: one as the album cover; the other as the reflection effect. Perform rendertransform-> scaley inversion and opacitymask-> lineargradientbrush gradient processing on the reverse video. A problem occurs after this operation: there is a gap (as shown in) between the album cover and the reflection ). This is because the planeprojection-> rotationy three-dimensional rotation of the cover and the reflection respectively will make them rotate according to their respective coordinate axes, instead of rotating as a whole without generating a deviation. If you combine two images into a stackpanel or canvas and then rotate them, you can (but you need a lotCodeImplementation, efficiency may be reduced, interested friends can test), finally lazy use PS to reflect the image ~

 

 

Let's take a look at the XAML. This part adds some events to the canvas:

<CanvasX:Name= "Layoutroot"Mouseleftbuttondown= "Layoutroot_mouseleftbuttondown"> </Canvas>
 

 

C # For details, refer to the notes:

 Public partial class  Mainpage : Usercontrol { Private  String [] Albums = { "Images/ep1.png" ,"Images/ep2.png" , "Images/ep3.png" , "Images/ep4.png" , "Images/ep5.png" , "Images/ep6.png" , "Images/ep7.png" , "Images/ep8.png" , "Images/ep9.png" }; // Current location  Private double Current = 0; // Target location Private double Target = 0; // Store images  Private  List < Image > Image = New  List < Image > (); // Timer  Private  Dispatchertimer Timer = New  Dispatchertimer (); Public Mainpage () {initializecomponent (); // Load the image Addimages (); // Load scroll events for different browsers         Htmlpage . Window. attachevent ( "Dommousescroll" , Layoutroot_mousewheel ); Htmlpage . Window. attachevent ( "Onmousewheel" , Layoutroot_mousewheel ); Htmlpage . Document. attachevent ( "Onmousewheel" , Layoutroot_mousewheel );} Private void Addimages (){ For ( Int I = 0; I <albums. length; I ++ ){ // Load images one by one             String Url = albums [I]; Image Cover = New  Image (); Cover. Source = New  Bitmapimage ( New  Uri (URL, Urikind . Relative); layoutroot. Children. Add (cover ); // Adjust the Image Display Mode Setimage (cover, I ); // Add the image to the image for Dynamic Effect Image. Add (cover );}} Private void Setimage ( Image Image, Int Index ){ // Traverse the relationship between the image and the current position          Double Offset = index-current; // Rotate the image in three dimensions          Planeprojection Planeprojection = New  Planeprojection (); Planeprojection. rotationy = Math . Abs (offset) * 65/(offset! = 0? Offset: 1); image. Projection = planeprojection; Double Left; Double Top = 50; Double Center = width/2-100; Double Scale = 1; If (Index = Current) {left = center; Top = 40; scale = 1.15 ;} Else if (Index> current) {left = center + offset * 50 + 60 ;} Else {Left = center + offset * 50-40 ;}// Scale the current image          Scaletransform Scaletransform = New  Scaletransform (); Scaletransform. scalex = scale; scaletransform. scaley = scale; image. rendertransform = scaletransform; // Adjust the position of the traversal Image Image. setvalue ( Canvas . Leftproperty, left); image. setvalue ( Canvas . Topproperty, top); image. setvalue ( Canvas . Zindexproperty ,( Int )(- Math . Abs (offset) * 100 );} // Move the image forward by clicking the left mouse button       Private void Layoutroot_mouseleftbuttondown ( Object Sender, Mousebuttoneventargs E) {moveindex (1 );} /** If you add the following event to the canvas's mousewheel = "layoutroot_mousewheel" (XAML), * the scroll wheel event cannot be obtained initially after the page is loaded. * // Private void layoutroot_mousewheel (Object sender, mousewheeleventargs e) // {// double mousedelta = 0; // mousedelta = math. sign (E. delta); // moveindex (mousedelta> 0 )? 1:-1); // load the mouse scroll event through htmlpage. For more information, see <4>      Private void Layoutroot_mousewheel ( Object Sender,Htmleventargs ARGs ){ Double Mousedelta = 0; Scriptobject E = args. eventobject; // Mozilla and Safari  If (E. getproperty ( "Detail" )! = Null ) {Mousedelta = (( Double ) E. getproperty ( "Detail" ));} // IE and opera  Else if (E. getproperty ("Wheeldelta" )! = Null ) Mousedelta = (( Double ) E. getproperty ( "Wheeldelta" ); Mousedelta = Math . Sign (mousedelta); moveindex (mousedelta> 0 )? 1:-1 );} Private void Moveindex ( Int Value ){ // Obtain the location of the target image and make sure it is within the image quantity range. Target + = value; target = Math . Max (0, target); target = Math . Min (image. Count-1, target );} // Timer tick, move to the Target Image      Private void Timertick ( Object Sender, Eventargs E ){ For ( Int I = 0; I <image. Count; I ++ ){ Image Image = image [I]; setimage (image, I);} current = target ;} // Start the timer      Public void Startshow () {timer = New  Dispatchertimer (); Timer. interval = New  Timespan (0, 0, 0, 0, 10); timer. Tick + = New  Eventhandler (Timertick); timer. Start ();}}

 

So far, the nano5 interface has been completed, and this work is dedicated to the existing * MJ *.

 

References:

1. Lineargradientbrush class

Http://msdn.microsoft.com/zh-cn/library/system.windows.media.lineargradientbrush.aspx

2. 3D effect (perspective conversion)

The http://msdn.microsoft.com/zh-cn/library/dd470131 (vs.95). aspx

3. Dispatchertimer class

The http://msdn.microsoft.com/zh-cn/library/system.windows.threading.dispatchertimer (vs.95). aspx

4. How to capture the mouse wheel event

Http://blogs.silverlight.net/blogs/msnow/archive/2008/07/29/tip-of-the-day-23-how-to-capture-the-mouse-wheel-event.aspx

 

Source code download: