[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")

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="17,0,17,0">
            <ScrollViewer x:Name="scrollViewer" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Disabled">
                <Canvas x:Name="canvasMain" VerticalAlignment="Top">
                    <i:Interaction.Behaviors>
                        <el:FluidMoveBehavior AppliesTo="Children" Duration="0:0:1.5">
                            <el:FluidMoveBehavior.EaseY>
                                <CubicEase EasingMode="EaseOut"/>
                            </el:FluidMoveBehavior.EaseY>
                            <el:FluidMoveBehavior.EaseX>
                                <CubicEase EasingMode="EaseOut"/>
                            </el:FluidMoveBehavior.EaseX>
                        </el:FluidMoveBehavior>
                    </i:Interaction.Behaviors>
                    <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">
                    </Border>
                    <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">
                    </Border>
                    <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">
                    </Border>
                </Canvas>
            </ScrollViewer>
        </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进行自动布局

        private void repfreshCanvasChildernPosition()
        {
            foreach (UIElement ue in canvasMain.Children)
            {
                repositionCanvasChild(ue, canvasMain.Children.IndexOf(ue));
            }
        }

        private void repositionCanvasChild(UIElement ue, int newIndex)
        {
            Canvas.SetLeft(ue, (double)(newIndex % 2 * 193));
            Canvas.SetTop(ue, (double)(newIndex / 2 * 193));
            Border border = ue as Border;
            TextBlock txb = new TextBlock() { Text = newIndex.ToString(), VerticalAlignment = VerticalAlignment.Center, HorizontalAlignment = HorizontalAlignment.Center, FontSize = 50 };
            border.Child = txb;
        }

五、动画总结

动画的实现思路可以分为三种，按难度依次增加分别为：

一年级难度：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