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

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

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

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

 1 <toolkit:TransitionService.NavigationInTransition>

 2           <toolkit:NavigationInTransition>

 3               <toolkit:NavigationInTransition.Backward>

 4                   <toolkit:TurnstileTransition Mode="BackwardIn"/>

 5               </toolkit:NavigationInTransition.Backward>

 6               <toolkit:NavigationInTransition.Forward>

 7                   <toolkit:TurnstileTransition Mode="ForwardIn"/>

 8               </toolkit:NavigationInTransition.Forward>

 9         </toolkit:NavigationInTransition>

10       </toolkit:TransitionService.NavigationInTransition>

11       <toolkit:TransitionService.NavigationOutTransition>

12           <toolkit:NavigationOutTransition>

13               <toolkit:NavigationOutTransition.Backward>

14                 <toolkit:TurnstileTransition   Mode="BackwardOut"/>

15               </toolkit:NavigationOutTransition.Backward>

16               <toolkit:NavigationOutTransition.Forward>

17                   <toolkit:TurnstileTransition Mode="ForwardOut"/>

18               </toolkit:NavigationOutTransition.Forward>

19           </toolkit:NavigationOutTransition>

20     </toolkit:TransitionService.NavigationOutTransition>

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

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

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

2 RootFrame = new TransitionFrame();

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

在App.xmal中加入以下内容

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

 

 1     <!--应用程序资源-->

 2     <Application.Resources>

 3         <Style x:Key="TransitionPageStyle" TargetType="phone:PhoneApplicationPage" >

 4             <!--进来的动画↓↓↓↓↓↓↓↓↓↓↓-->

 5             <Setter Property="toolkit:TransitionService.NavigationInTransition">

 6                 <Setter.Value>

 7                     <toolkit:NavigationInTransition>

 8                         <!--后退进入动画 -->

 9                         <toolkit:NavigationInTransition.Backward>

10                             <toolkit:TurnstileTransition Mode="BackwardIn"/>

11                         </toolkit:NavigationInTransition.Backward>

12                         <!--前进进入动画-->

13                         <toolkit:NavigationInTransition.Forward>

14                             <toolkit:TurnstileTransition Mode="ForwardIn"/>

15                         </toolkit:NavigationInTransition.Forward>

16                     </toolkit:NavigationInTransition>

17                 </Setter.Value>

18             </Setter>

19             <!--出去的动画↓↓↓↓↓↓↓↓-->

20             <Setter Property="toolkit:TransitionService.NavigationOutTransition">

21                 <Setter.Value>

22                     <toolkit:NavigationOutTransition>

23                         <!--后退退出动画-->

24                         <toolkit:NavigationOutTransition.Backward>

25                             <toolkit:TurnstileTransition Mode="BackwardOut"/>

26                         </toolkit:NavigationOutTransition.Backward>

27                         <!--前进退出动画-->

28                         <toolkit:NavigationOutTransition.Forward>

29                             <toolkit:TurnstileTransition Mode="ForwardOut"/>

30                         </toolkit:NavigationOutTransition.Forward>

31                     </toolkit:NavigationOutTransition>

32                 </Setter.Value>

33             </Setter>

34         </Style>

35     </Application.Resources>    <!--应用程序资源-->

36     <Application.Resources>

37         <Style x:Key="TransitionPageStyle" TargetType="phone:PhoneApplicationPage" >

38             <!--进来的动画↓↓↓↓↓↓↓↓↓↓↓-->

39             <Setter Property="toolkit:TransitionService.NavigationInTransition">

40                 <Setter.Value>

41                     <toolkit:NavigationInTransition>

42                         <!--后退进入动画 -->

43                         <toolkit:NavigationInTransition.Backward>

44                             <toolkit:TurnstileTransition Mode="BackwardIn"/>

45                         </toolkit:NavigationInTransition.Backward>

46                         <!--前进进入动画-->

47                         <toolkit:NavigationInTransition.Forward>

48                             <toolkit:TurnstileTransition Mode="ForwardIn"/>

49                         </toolkit:NavigationInTransition.Forward>

50                     </toolkit:NavigationInTransition>

51                 </Setter.Value>

52             </Setter>

53             <!--出去的动画↓↓↓↓↓↓↓↓-->

54             <Setter Property="toolkit:TransitionService.NavigationOutTransition">

55                 <Setter.Value>

56                     <toolkit:NavigationOutTransition>

57                         <!--后退退出动画-->

58                         <toolkit:NavigationOutTransition.Backward>

59                             <toolkit:TurnstileTransition Mode="BackwardOut"/>

60                         </toolkit:NavigationOutTransition.Backward>

61                         <!--前进退出动画-->

62                         <toolkit:NavigationOutTransition.Forward>

63                             <toolkit:TurnstileTransition Mode="ForwardOut"/>

64                         </toolkit:NavigationOutTransition.Forward>

65                     </toolkit:NavigationOutTransition>

66                 </Setter.Value>

67             </Setter>

68         </Style>

69     </Application.Resources>

1 <!--调用方法-->

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