Windows Phone使用sliverlight toolkit实现页面切换动画效果

使用应用时，好多app在页面切换的时候都有一个动画效果，感觉很炫，也大大增加了用户体验，怎么实现呢？

界面的切换，可以用Windows Phone Toolkit中的TransitionService来搞定。

要使用TransitionService，首先需要在工程中添加一个引用：Microsoft.Phone.Controls.Toolkit.dll。之后，在要进行切换的page的XAML文件里LayoutRoot外添加如下Transition Service代码(注意：不要放在<phone:PhoneApplicationPage.Resources> 中哦)

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

都是什么意思呢？Page里定义了四种模式如图



最重要的一点，就是要修改App.xmal.cs文件

//RootFrame = new PhoneApplicationFrame(); 注释掉，使用下边的实例
RootFrame = new TransitionFrame();

如果说想要好多地方都要用，那么就封装成公共的吧

在App.xmal中加入以下内容

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"       <!--命名空间-->

<!--应用程序资源-->
<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>    <!--应用程序资源-->
<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}"

动画枚举：

toolkit:SlideTransition 飞入动画
Mode
SlideUpFadeIn         向上飞入
SlideUpFadeOut         向上飞出
SlideDownFadeIn     向下飞入
SlideDownFadeOut     向下飞出
SlideLeftFadeIn        向左飞入
SlideLeftFadeIn        向左飞出
SlideRightFadeIn    向右飞入
SlideRightFadeIn    向右飞出
toolkit:RollTransition        360旋转动画

toolkit:RotateTransition    旋转动画
Mode
In180Clockwise        180顺时针转入
Out180Clockwise        180顺时针转出
In180Counterclockwise    180逆时针转入
Out180Counterclockwise    180逆时针转出
In90Clockwise        90顺时针转入
Out90Clockwise        90顺时针转出
In90Counterclockwise    90逆时针转入
Out90Counterclockwise    90逆时针转出

toolkit:SwivelTransition    垂直翻转动画
Mode
BackwardIn        向后翻转入
BackwardOut        向后翻转出
ForwardIn        向前翻转入
ForwardOut        向前翻转出
FullScreenIn        全屏翻转入
FullScreenOut        全屏翻转出

toolkit:TurnstileTransition    翻页动画
Mode
BackwardIn        向后翻入
BackwardOut        向后翻出
ForwardIn        向前翻入
ForwardOut        向前翻出