WP7中为页面跳转添加动画效果

关键字：页面跳转；动画；Toolkit

WP7应用程序开发中，页面跳转默认无动画效果。可以根据实际应用需要，采用如下两种方法之一为页面跳转添加动画效果。

1. 单独为指定的页面添加动画效果；

2. 为多个页面添加相同的动画效果（将效果保存为页面样式，在需要添加动画的页面xaml文件中用一行代码对其进行调用即可）

必要的引用：Windows Phone Toolkit

事实上我们通过直接调用Toolkit提供的方法实现动画效果，注意：这个Toolkit并不是Coding4Fun中的那个Toolkit，

在进行后续操作之前，我们首先要下载Windows Phone Toolkit：

下载地址：http://silverlight.codeplex.com/

默认安装路径：C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Toolkit

然后在项目解决方案中的"引用"上点右键，选择“添加引用”，通过“浏览”选项卡找到Toolkit将其添加到项目引用中即可完成准备工作。

PS:多说一句，本人因为先前已经下载过Microsoft.Phone.Controls.Toolkit.dll这个动态链接库文件，因为并未采用上述方法，而是直接按照上面的红字部分对该引用进行了添加。如果你也已经有这个dll文件了，同样无需再下载。

1. 为单个页面添加动画效果（简单2步即可完成）

（1）修改App.xaml.cs一行代码

找到：    RootFrame = new PhoneApplicationFrame();

替换为：RootFrame = new TransitionFrame();

（2）在需要添加跳转动画的页面xaml代码文件中增加如下代码：

增加命名空间：xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

紧随<phone:PhoneApplicationPage>元素添加动画代码：

（注意：代码中的"toolkit:RotateTransition Mode"中的RotateTransition部分有多种选择，相对应地，后面的Mode也有不同的取值，这两个地方的组合对应着不同的动画效果，大家可以亲自试一试。本例中的效果是页面快速由3点方向转向12点方向，即翻转了90°）

<toolkit:TransitionService.NavigationInTransition>
    <toolkit:NavigationInTransition>
        <toolkit:NavigationInTransition.Backward>
            <toolkit:RotateTransition Mode="In90Clockwise"/>
        </toolkit:NavigationInTransition.Backward>
        <toolkit:NavigationInTransition.Forward>
            <toolkit:RotateTransition Mode="In90Counterclockwise"/>
        </toolkit:NavigationInTransition.Forward>
    </toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
    <toolkit:NavigationOutTransition>
        <toolkit:NavigationOutTransition.Backward>
            <toolkit:RotateTransition Mode="Out90Clockwise"/>
        </toolkit:NavigationOutTransition.Backward>
        <toolkit:NavigationOutTransition.Forward>
            <toolkit:RotateTransition Mode="Out90Counterclockwise"/>
        </toolkit:NavigationOutTransition.Forward>
    </toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>

至此，便实现了对指定页面进行跳转动画的添加。但如果想对很多页面都采用同样的效果，按照上述方法一个一个进行操作显得很繁琐。可以按照下面的步骤进行，其思想为：将动画效果保存为全局的样式，只需要在需要添加动画的页面xaml中写一行代码即可实现动画效果。

2. 方便地为多个页面添加动画效果（将效果保存为页面样式，在需要添加动画的页面xaml文件中用一行代码对其进行调用即可，也是简单的2个步骤）

（1）在App.xaml中的<Application.Resources>和<Application.Resources/>中间增加如下代码（注意Key值，很重要，后面调用时直接找这个Key值）：

<Application.Resources>
        <Style x:Key="TransitionPageStyle" TargetType="phone:PhoneApplicationPage">
            <Setter Property="toolkit:TransitionService.NavigationInTransition">
                <Setter.Value>
                    <toolkit:NavigationInTransition>
                        <toolkit:NavigationInTransition.Backward>
                            <toolkit:RotateTransition Mode="In90Clockwise"/>
                        </toolkit:NavigationInTransition.Backward>
                        <toolkit:NavigationInTransition.Forward>
                            <toolkit:RotateTransition Mode="In90Counterclockwise"/>
                        </toolkit:NavigationInTransition.Forward>
                    </toolkit:NavigationInTransition>
                </Setter.Value>
            </Setter>
            <Setter Property="toolkit:TransitionService.NavigationOutTransition">
                <Setter.Value>
                    <toolkit:NavigationOutTransition>
                        <toolkit:NavigationOutTransition.Backward>
                            <toolkit:RotateTransition Mode="Out90Clockwise"/>
                        </toolkit:NavigationOutTransition.Backward>
                        <toolkit:NavigationOutTransition.Forward>
                            <toolkit:RotateTransition Mode="Out90Counterclockwise"/>
                        </toolkit:NavigationOutTransition.Forward>
                    </toolkit:NavigationOutTransition>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>

上面的代码同样是在页面跳转时发生90°翻转的动画效果。

（2）在需要动画效果的页面xaml中增加一行代码使用上述效果

在<phone:PhoneApplicationPage>中添加：Style="{StaticResource TransitionPageStyle}"

是的，或许读者也看出来了，如果你需要对不同的页面采用不同的效果，只需在App.xaml中写入多个效果，注意Key值一定要不同。然后对相关页面调用不同的效果即可。

本文参考如下链接亲自实践后进行整理：http://www.cnblogs.com/kiminozo/archive/2012/01/26/2329863.html