[Windows Phone] 如何通过代码实现Start Screen开始屏幕Tiles漂动效果和Layout变换效果?
作者:sinodragon21/Nathan
转载请注明出处 http://www.cnblogs.com/sinodragon21/archive/2012/07/20/2600948.html
一、需求说明
“搜狐新闻”的“频道”ParanormaItem页面:
长按其中的某个方块,它会浮动起来,拖动它到新的位置,整个Canvas会重新布局,还伴有Layout变换动画,和WindowsPhone自身的Start Screen功能类似。
二、最终完成的Demo截图
三、源代码
下载页面 (最初发问是在卤面网,并且因为卤面网可以上传附件,所以源代码放在卤面网上了)
四、核心设计思路
1. FluidMoveBehavior (AppliesTo="Children")
1 "ContentPanel" Grid.Row="1" Margin="17,0,17,0">
2 "scrollViewer" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Disabled">
3
21
22
注意点一:需要Reference:Microsoft.Expression.Interactions 和 System.Windows.Interactivity。
注意点二:加入命名空间
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:el="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions"
2. Canvas根据Children的index进行自动布局
1 private void repfreshCanvasChildernPosition()
2 {
3 foreach (UIElement ue in canvasMain.Children)
4 {
5 repositionCanvasChild(ue, canvasMain.Children.IndexOf(ue));
6 }
7 }
1 private void repositionCanvasChild(UIElement ue, int newIndex)
2 {
3 Canvas.SetLeft(ue, (double)(newIndex % 2 * 193));
4 Canvas.SetTop(ue, (double)(newIndex / 2 * 193));
5 Border border = ue as Border;
6 TextBlock txb = new TextBlock() { Text = newIndex.ToString(), VerticalAlignment = VerticalAlignment.Center, HorizontalAlignment = HorizontalAlignment.Center, FontSize = 50 };
7 border.Child = txb;
8 }
五、动画总结
动画的实现思路可以分为三种,按难度依次增加分别为:
一年级难度:Storyboard + Animation
二年级难度:VisualStateManager + VisualState
三年级难度:Built-in Windows Phone behaviors (例如:上面的FluidMoveBehavior)
六、相关链接
-完。
博文title英文:[Windows Phone] How to simulate floating tiles and LayoutTransform of Windows Phone Start Screen?
转载请注明出处 http://www.cnblogs.com/sinodragon21/archive/2012/07/20/2600948.html
阅读(2116) | 评论(0) | 转发(0) |