Chinaunix首页 | 论坛 | 博客
  • 博客访问: 5142006
  • 博文数量: 1696
  • 博客积分: 10870
  • 博客等级: 上将
  • 技术积分: 18357
  • 用 户 组: 普通用户
  • 注册时间: 2007-03-30 15:16
文章分类
文章存档

2017年(1)

2016年(1)

2015年(1)

2013年(1)

2012年(43)

2011年(17)

2010年(828)

2009年(568)

2008年(185)

2007年(51)

分类: 嵌入式

2012-07-20 12:27:21

[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功能类似。 

原始形态                    长按tile后浮动 

 

二、最终完成的Demo截图

initial.jpg added.jpg moving animation.jpg

三、源代码

下载页面  (最初发问是在卤面网,并且因为卤面网可以上传附件,所以源代码放在卤面网上了)

 

四、核心设计思路

1. FluidMoveBehavior (AppliesTo="Children")

1 "ContentPanel" Grid.Row="1" Margin="17,0,17,0"> 2 "scrollViewer" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Disabled"> 3 "canvasMain" VerticalAlignment="Top"> 4 5 FluidMoveBehavior AppliesTo="Children" Duration="0:0:1.5"> 6 7 "EaseOut"/> 8 9 10 "EaseOut"/> 11 12 13 14 "firstBorder" Height="173" Width="173" Background="Red" Margin="0,0,20,20" Canvas.Top="0" Canvas.Left="0" ManipulationStarted="Border_ManipulationStarted_1" ManipulationDelta="Border_ManipulationDelta_1" ManipulationCompleted="Border_ManipulationCompleted_1" Hold="firstBorder_Hold_1" Tap="firstBorder_Tap_1"> 15 16 "173" Width="173" Background="#FF19A588" Margin="0,0,20,20" Canvas.Top="0" Canvas.Left="193" ManipulationStarted="Border_ManipulationStarted_1" ManipulationDelta="Border_ManipulationDelta_1" ManipulationCompleted="Border_ManipulationCompleted_1" Hold="firstBorder_Hold_1" Tap="firstBorder_Tap_1"> 17 18 "173" Width="173" Background="#FF19C854" Margin="0,0,20,20" Canvas.Top="193" Canvas.Left="0" ManipulationStarted="Border_ManipulationStarted_1" ManipulationDelta="Border_ManipulationDelta_1" ManipulationCompleted="Border_ManipulationCompleted_1" Hold="firstBorder_Hold_1" Tap="firstBorder_Tap_1"> 19 20 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

阅读(2111) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~