前一阵无意中发现将iPod Nano5 横置后会出现一个动态的选歌界面（如下图示），感觉不错于是想用Silverlight来实现一下这个效果，欢迎大家拍砖。【示例代码下载】

本来是放Demo演示，可是这个程序怎么也显示不出来，只好用图片了（感兴趣的话可以下载源代码）：

       在制作过程中比较繁琐的部分是倒影效果，最开始的做法是将同一张专辑图片使用两次：一个作为专辑封面；一个作为倒影效果。对倒影效果图片进行RenderTransform->ScaleY 反转和OpacityMask->LinearGradientBrush 渐变处理，这样操作后出现一个问题：未选中专辑的封面和倒影之间有间隙（如下图示）。这是由于分别对封面和倒影进行PlaneProjection->RotationY 三维旋转时会使它们按各自的坐标轴进行旋转，不是以一个整体进行旋转而差生了偏差。如果将两个图片组合为一个StackPanel 或Canvas 然后再进行旋转感觉应该可以（但需要不少代码实现，效率可能会降低，感兴趣的朋友可以测试一下），最后偷懒用PS 给图片做了倒影～

 下面先来看看XAML，这部分就是为Canvas 增加一些事件：

1. <Canvas x:Name="LayoutRoot" MouseLeftButtonDown="LayoutRoot_MouseLeftButtonDown"> 
2. </Canvas> 

C# 内容请看注释详解：

1. public partial class MainPage : UserControl 
2. { 
3.     private String[] ALBUMS = { "images/ep1.png", "images/ep2.png", "images/ep3.png",  
4.                                 "images/ep4.png", "images/ep5.png", "images/ep6.png",  
5.                                 "images/ep7.png", "images/ep8.png", "images/ep9.png" }; 
6.     //当前位置 
7.     private double CURRENT = 0; 
8.     //目标位置 
9.     private double TARGET = 0; 
10.     //存储图片 
11.     private List<Image> IMAGE = new List<Image>(); 
12.     //计时器 
13.     private DispatcherTimer TIMER = new DispatcherTimer(); 
14.  
15.     public MainPage() 
16.     { 
17.        InitializeComponent(); 
18.        //加载图片 
19.        addImages(); 
20.        //对于不同浏览器加载滚轮事件 
21.        HtmlPage.Window.AttachEvent("DOMMouseScroll", LayoutRoot_MouseWheel); 
22.        HtmlPage.Window.AttachEvent("onmousewheel", LayoutRoot_MouseWheel); 
23.        HtmlPage.Document.AttachEvent("onmousewheel", LayoutRoot_MouseWheel); 
24.     } 
25.  
26.     private void addImages() 
27.     { 
28.         for (int i = 0; i < ALBUMS.Length; i++) 
29.         { 
30.            //逐一加载图片 
31.            string url = ALBUMS[i]; 
32.            Image cover = new Image(); 
33.            cover.Source = new BitmapImage(new Uri(url, UriKind.Relative)); 
34.            LayoutRoot.Children.Add(cover); 
35.            //调整图片显示方式 
36.            setImage(cover, i); 
37.            //将图片加入IMAGE，用于实现动态效果 
38.            IMAGE.Add(cover); 
39.         } 
40.     } 
41.  
42.     private void setImage(Image image, int index) 
43.     { 
44.         //遍历图片与当前（CURRENT）位置关系 
45.         double offset = index - CURRENT; 
46.         //对图片进行三维旋转 
47.         PlaneProjection planeProjection = new PlaneProjection(); 
48.         planeProjection.RotationY = Math.Abs(offset) * 65 / (offset != 0 ? offset : 1); 
49.         image.Projection = planeProjection; 
50.          
51.         double left; 
52.         double top = 50; 
53.         double center = Width / 2 - 100; 
54.         double scale = 1; 
55.  
56.         if (index == CURRENT) 
57.         { 
58.             left = center; 
59.             top = 40; 
60.             scale = 1.15; 
61.         } 
62.         else if (index > CURRENT) 
63.         { 
64.             left = center + offset * 50 + 60; 
65.         } 
66.         else 
67.         { 
68.             left = center + offset * 50 - 40; 
69.         } 
70.         //对CURRENT图片进行缩放 
71.         ScaleTransform scaleTransform = new ScaleTransform(); 
72.         scaleTransform.ScaleX = scale; 
73.         scaleTransform.ScaleY = scale; 
74.         image.RenderTransform = scaleTransform; 
75.         //调整遍历图片位置 
76.         image.SetValue(Canvas.LeftProperty, left); 
77.         image.SetValue(Canvas.TopProperty, top); 
78.         image.SetValue(Canvas.ZIndexProperty, (int)(-Math.Abs(offset)) * 100); 
79.     } 
80.  
81.      //点击鼠标左键正向移动图片 
82.      private void LayoutRoot_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 
83.      { 
84.         moveIndex(1); 
85.      } 
86.  
87.     /* 
88.     * 如果将下面事件加入Canvas的MouseWheel="LayoutRoot_MouseWheel"（XAML）中， 
89.     * 页面加载后初始不能获取滚轮事件。 
90.     */ 
91.     //private void LayoutRoot_MouseWheel(object sender, MouseWheelEventArgs e) 
92.     //{ 
93.     //    double mouseDelta = 0; 
94.     //    mouseDelta = Math.Sign(e.Delta); 
95.     //    moveIndex((mouseDelta > 0) ? 1 : -1); 
96.     //} 
97.  
98.     //通过HtmlPage加载鼠标滚动事件，详情可参考资料<4> 
99.     private void LayoutRoot_MouseWheel(object sender, HtmlEventArgs args) 
100.     { 
101.         double mouseDelta = 0; 
102.         ScriptObject e = args.EventObject; 
103.         // Mozilla and Safari     
104.         if (e.GetProperty("detail") != null) 
105.         { 
106.             mouseDelta = ((double)e.GetProperty("detail")); 
107.         } 
108.  
109.         // IE and Opera    
110.         else if (e.GetProperty("wheelDelta") != null) 
111.             mouseDelta = ((double)e.GetProperty("wheelDelta")); 
112.  
113.         mouseDelta = Math.Sign(mouseDelta); 
114.  
115.         moveIndex((mouseDelta > 0) ? 1 : -1); 
116.     } 
117.  
118.     private void moveIndex(int value) 
119.     { 
120.         //获取目标图片位置，并确保其在图片数量范围内 
121.         TARGET += value; 
122.         TARGET = Math.Max(0, TARGET); 
123.         TARGET = Math.Min(IMAGE.Count - 1, TARGET); 
124.     } 
125.  
126.     //计时器Tick，移动到目标图片 
127.     private void timerTick(object sender, EventArgs e) 
128.     { 
129.         for (int i = 0; i < IMAGE.Count; i++) 
130.         { 
131.             Image image = IMAGE[i]; 
132.             setImage(image, i); 
133.         } 
134.         CURRENT = TARGET; 
135.     } 
136.  
137.     //启动计时器 
138.     public void startShow() 
139.     { 
140.         TIMER = new DispatcherTimer(); 
141.         TIMER.Interval = new TimeSpan(0, 0, 0, 0, 10); 
142.         TIMER.Tick += new EventHandler(timerTick); 
143.         TIMER.Start(); 
144.     } 
145. }