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

 

 

 

posted @ 2013-07-29 14:28  ゞ修ζ止符℡_R²º¹³  阅读(810)  评论(0)  编辑  收藏  举报