图片Silverlight 模拟Nano5 界面效果

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

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

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

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

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

C# 内容请看注释详解：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" } ;

//当前位置private double CURRENT = 0;

//目标位置private double TARGET = 0;

//存储图片private List<Image> IMAGE = new List<Image>() ;

//计时器private DispatcherTimer TIMER = new DispatcherTimer() ;public MainPage()

{

InitializeComponent() ;

//加载图片addImages() ;

//对于不同浏览器加载滚轮事件

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++)

{

//逐一加载图片string url = ALBUMS[i] ;

Image cover = new Image() ;cover.Source = new BitmapImage(new Uri(url, UriKind.Relative) ) ;

LayoutRoot.Children.Add(cover) ;

//调整图片显示方式setImage(cover, i) ;

//将图片加入IMAGE，用于实现动态效果

IMAGE.Add(cover) ;

}

}private void setImage(Image image, int index)

{

//遍历图片与当前（C U R R E NT）位置关系double offset = index - CURRENT;

//对图片进行三维旋转

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;

}

//对CURRENT图片进行缩放

ScaleTransform scaleTransform = new ScaleTransform() ;scaleTransform.ScaleX = scale;scaleTransform.ScaleY = scale;image.RenderTransform = scaleTransform;

//调整遍历图片位置image.SetValue(Canvas.LeftProperty, left) ;image.SetValue(Canvas.TopProperty, top) ;image.SetValue(Canvas.ZIndexProperty, (int) (-Math.Abs(offset) ) * 100) ;}

//点击鼠标左键正向移动图片private void LayoutRoot_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{moveIndex(1) ;

}

/*

*如果将下面事件加入Canvas的MouseWheel="LayoutRoot_MouseWheel" （XAML）中，

*页面加载后初始不能获取滚轮事件。

*/

//private void LayoutRoot_MouseWheel (object sender, MouseWheelEventArgs e)//{

// double mouseDelta = 0;

// mouseDelta = Math.Sign(e.Delta) ;

// moveIndex((mouseDelta > 0) ? 1 : -1) ;

//}

//通过HtmlPage加载鼠标滚动事件，详情可参考资料<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)

{

//获取目标图片位置，并确保其在图片数量范围内

TARGET += value;

TARGET = Math.Max(0, TARGET) ;

TARGET = Math.Min(IMAGE.Count - 1, TARGET) ;

}

//计时器Tick，移动到目标图片private void timerTick(object sender, EventArgs e)

{for (int i = 0; i < IMAGE.Count; i++)

{

Image image = IMAGE[i] ;setImage(image, i) ;

}

CURRENT = TARGET;

}

//启动计时器public void startShow()

{

TIMER = new DispatcherTimer() ;

TIMER. Interval = new TimeSpan(0, 0, 0, 0, 10) ;

TIMER.Tick += new EventHandler(timerTick) ;

TIMER.Start() ;

}

}

至此， Nano5的界面效果已完成，借此作品献给已世的*MJ * 。

相关参考资料：

1. LinearGradientBrush类http://msdn.microsoft.com/zh-cn/l ibrary/system.windows.media. l ineargradientbrush.aspx

2.三维效果（透视转换）http://msdn.microsoft.com/zh-cn/l ibrary/dd470131(VS.95).aspx

3.DispatcherTimer类http://msdn.microsoft.com/zh-cn/l ibrary/system.windows.threading.dispatchertimer(VS.95).aspx

4. How to Capture the Mouse Wheel Event http://blogs.si lverl ight.net/blogs/msnow/archive/2008/07/29/tip-of-the-day-23-how-to-capture-the -mouse-wheel-event.aspx

源代码下载：http://cid-c75f4e27adfe5bbc.skydrive. l ive.com/self.aspx/GnieTech/Nano5.zip