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        向前翻出