[Windows Phone] 如何通過代碼實現Start Screen開始畫面Tiles漂動效果和Layout變換效果？

[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

  

三、原始碼

下載頁面 http://www.hugwp.com/forum.php?mod=viewthread&tid=3925 （最初發問是在滷麵網，並且因為滷麵網可以上傳附件，所以原始碼放在滷麵網上了）

 

四、核心設計思路

1. FluidMoveBehavior (AppliesTo="Children")

 1 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="17,0,17,0"> 2             <ScrollViewer x:Name="scrollViewer" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Disabled"> 3                 <Canvas x:Name="canvasMain" VerticalAlignment="Top"> 4                     <i:Interaction.Behaviors> 5                         <el:FluidMoveBehavior AppliesTo="Children" Duration="0:0:1.5"> 6                             <el:FluidMoveBehavior.EaseY> 7                                 <CubicEase EasingMode="EaseOut"/> 8                             </el:FluidMoveBehavior.EaseY> 9                             <el:FluidMoveBehavior.EaseX>10                                 <CubicEase EasingMode="EaseOut"/>11                             </el:FluidMoveBehavior.EaseX>12                         </el:FluidMoveBehavior>13                     </i:Interaction.Behaviors>14                     <Border x:Name="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                     </Border>16                     <Border Height="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                     </Border>18                     <Border Height="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                     </Border>20                 </Canvas>21             </ScrollViewer>22         </Grid>

注意點一：需要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）

 

六、相關連結

http://www.hugwp.com/thread-3925-1.html

http://www.hugwp.com/forum.php?mod=viewthread&tid=2012&reltid=3925&pre_pos=1&ext=CB

 

-完。

博文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