WP7应用开发笔记(12) 添加页面动画

 

 

页面动画就是页面的切换的动画过度效果。

平时使用Wp手机的系统程序都是像翻页一样的过度效果，我下面就准备完成简单的添加这样的效果。

使用Windows Phone Toolkit

其实这个动画效果不需要自己实现，Windows Phone Toolkit 已经封装好了现成库，我们只需要调用就可以了。

这里可以下载:

http://silverlight.codeplex.com/

安装后可以在C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Toolkit 找到[32位系统去掉(x86)]，

引用到项目中就可以了，里面还有不少增强控件也非常实用，相信大家都用过了。

不过这里主要使用的是TransitionService.NavigationInTransition

为页面添加过度效果

第一步，必须要有一个不可缺少的准备工作，就是找到app.xaml.cs里面

找到    RootFrame = new PhoneApplicationFrame();

替换成 RootFrame = new TransitionFrame();

第二步,在页面上添加效果代码

先添加名称空间xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

然后再<phone:PhoneApplicationPage>元素下添加

<toolkit:TransitionService.NavigationInTransition>
    <toolkit:NavigationInTransition>
        <toolkit:NavigationInTransition.Backward>
            <toolkit:TurnstileTransition Mode="BackwardIn"/>
        </toolkit:NavigationInTransition.Backward>
        <toolkit:NavigationInTransition.Forward>
            <toolkit:TurnstileTransition Mode="ForwardIn"/>
        </toolkit:NavigationInTransition.Forward>
    </toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
    <toolkit:NavigationOutTransition>
        <toolkit:NavigationOutTransition.Backward>
            <toolkit:TurnstileTransition Mode="BackwardOut"/>
        </toolkit:NavigationOutTransition.Backward>
        <toolkit:NavigationOutTransition.Forward>
            <toolkit:TurnstileTransition Mode="ForwardOut"/>
        </toolkit:NavigationOutTransition.Forward>
    </toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>

OK简单2步就完成了一个页面的翻页动画效果。

Toolkit 提供了很多动画效果都在Microsoft.Phone.Controls.Toolkit\Transitions\Transitions 里面,

还可以继承TransitionElement实现自己的动画。

不过我觉得默认的TurnstileTransition最满意，太炫了影响使用。

将过度效果作为页面样式

如果页面比较多每个页面都想要效果，那么可以将效果作为样式添加到系统资源文件里或者直接写在App.xaml里。

方法也很简单

<Application.Resources>
            <Style x:Key="TransitionPageStyle" TargetType="phone:PhoneApplicationPage">
                <Setter Property="toolkit:TransitionService.NavigationInTransition">
                    <Setter.Value>
                        <toolkit:NavigationInTransition>
                        <toolkit:NavigationInTransition.Backward>
                            <toolkit:TurnstileTransition Mode="BackwardIn"/>
                        </toolkit:NavigationInTransition.Backward>
                        <toolkit:NavigationInTransition.Forward>
                            <toolkit:TurnstileTransition Mode="ForwardIn"/>
                        </toolkit:NavigationInTransition.Forward>
                    </toolkit:NavigationInTransition>
                </Setter.Value>
                </Setter>
                <Setter Property="toolkit:TransitionService.NavigationOutTransition">
                    <Setter.Value>
                        <toolkit:NavigationOutTransition>
                        <toolkit:NavigationOutTransition.Backward>
                            <toolkit:TurnstileTransition Mode="BackwardOut"/>
                        </toolkit:NavigationOutTransition.Backward>
                        <toolkit:NavigationOutTransition.Forward>
                            <toolkit:TurnstileTransition Mode="ForwardOut"/>
                        </toolkit:NavigationOutTransition.Forward>
                    </toolkit:NavigationOutTransition>
                </Setter.Value>
                </Setter>
            </Style>
</Application.Resources>

需要效果的页面添加一个属性Style="{StaticResource TransitionPageStyle}"就可以了