使用应用时，好多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        向前翻出

Windows Phone使用sliverlight toolkit实现页面切换动画效果的更多相关文章

  1. react实现页面切换动画效果

    一.前情概要 注:(我使用的路由是react-router4)     如下图所示,我们需要在页面切换时有一个过渡效果,这样就不会使页面切换显得生硬,用户体验大大提升:     but the 问题是 ...

  2. 超炫的 CSS3 页面切换动画效果

    在线演示      源码下载

  3. (原)android中的动画(三)之动画监听&页面切换动画

    1.动画也可以设置监听事件,例如在动画结束时需要执行某操作 把要执行的代码写在onAnimationEnd()回调方法中即可: anim.setAnimationListener(new Animat ...

  4. Angular 全局页面切换动画 me-pageloading

    最近看了Codrops的一篇文章, 里面讲到了一个页面切换的效果, 详情点击此处. 看了这个效果感觉很赞, 觉得这个效果可以用在angular的页面切换中, 所以将这个效果移植到angular中, 做 ...

  5. iOS页面切换动画实现方式。

    iOS页面切换动画实现方式. 1.使用UIView animateWithDuration:animations:completion方法 Java代码 [UIView animateWithDura ...

  6. QtQuick多页面切换、多页面切换动画、多个qml文件数据交互

    一.QtQuick多页面切换方法 (1)“隐藏法” 前一个视图visible设为false或者透明度opacity设为0,相当于“隐藏”了,实际还存在: 要显示的视图visible设为true或者透明 ...

  7. 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

    基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...

  8. Activity 切换动画和页面切换动画

    public class MainActivity extends Activity { private ViewFlipper viewFlipper; private float startX; ...

  9. (转)Android中的页面切换动画

    这段时间一直在忙Android的项目,总算抽出点时间休息一下,准备把一些项目用到的Android经验分享一下. 在Android开发过程中,经常会碰到Activity之间的切换效果的问题,下面介绍一下 ...

随机推荐

  1. vim中设置Python自动补全

    转自:http://blog.csdn.net/wangzhuo_0717/article/details/6942428 在VIM里面增加python的autocomplete功能的做法如下: 1. ...

  2. SQL Server中内连接和外连接的区别

    SQL Server中内连接和外连接的区别 假设一个数据库中有两张表,一张是学生表StudentInfo,一张是班级表ClassInfo,两张表之间用ClassId字段进行关联. 如果用内连接,正常的 ...

  3. 【分布式计算】MapReduce的替代者-Parameter Server

    原文:http://blog.csdn.net/buptgshengod/article/details/46819051 首先还是要声明一下,这个文章是我在入职阿里云1个月以来,对于分布式计算的一点 ...

  4. vs 行数

    工具->选项->文本编辑器->选择你用的语言,选中行号,即可!

  5. poj1328解题报告（贪心、线段交集）

    POJ 1328,题目链接http://poj.org/problem?id=1328 题意: 有一海岸线(x轴),一半是陆地(y<0).一半是海(y>0),海上有一些小岛(用坐标点表示P ...

  6. jQuery之父：每天都写点代码

    去年秋天,我的“兼职编程项目”遇到了一些问题:要不是从 Khan Academy 的项目里挪出时间来的话,我根本没办法将不理想的进度弥补上. 这些项目遇到了一些严重的问题.之前的工作我主要是在周末,有 ...

  7. sql 自定义函数--十进制转二进制

    随笔记忆: if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[DECTOBIN]') and xtype in ...

  8. Android Studio 复制粘贴图片到drawable文件夹没有效果 - 解决方法

    我想放一些图片到drawable文件夹里面,但是简单的复制文件,粘贴文件,或者拖拽文件,都不起作用.不知道为什么,之前是可以的,突然就不行了. 解决方案 在drawable文件夹的目录上右键,选择Re ...

  9. 关于类型“LinkButton”的控件“xxx”必须放在具有 runat=server 的窗体标记内问题的解决方案

    1.首先确认LinkButton控件包含在Form中,检查该Form有无runat标记,如果有,排除Form原因,请继续看. 2.如果看到这里,估计你是在做Excel导出功能.在后台代码中重写Veri ...

  10. 开始迈入Csharp的世界了

    以前没有学过, 有点兴奋,完全是新手啊. 今天是元宵情人节, 加油↖(^ω^)↗ 分享一些话:   一则拉封丹寓言名字叫寓言<两个朋友>:    一天夜里,一个朋友突然去找另一个朋友.被吵 ...