zoukankan      html  css  js  c++  java
  • WP开发笔记——WP APP添加页面跳转动画

      微软的toolkit团队为我们为我们提供了这样一套组件,叫做TransitionServices服务。

      简单说一下它具备的效果:

        turnstile(轴旋转效果);

        turnstile feather(羽毛式轴旋转效果);

        continuum(继承动画效果);

        slide(滑动效果);

        rotate(旋转效果)。

      这里我们实现一下Turnstile效果:

      一、首先,我们要下载Silverlight for Windows Phone Toolkit

        (没有Windows phone Toolkit的可以去http://silverlight.codeplex.com/releases/view/55034/ 进行下载),并进行引用:

     

      二、在App.xaml中引入:

    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

        并添加此段代码:

    <!--应用程序资源-->
        <Application.Resources>
            <Style x:Key="PageTranstionStyle" 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>

      三、我们需要在App.xaml.cs文件中修改下东西,以便于我们的动画能被调用。

        在cs文件中找到    

    RootFrame = new PhoneApplicationFrame();

        也就是PhoneApplicationFrame的实例化方法。将它改成:

    RootFrame = new TransitionFrame();

        这样我们的框架就成为了一个可以有跳转动画的框架了。

      四、接下来就是调用了,这个很简单直接在想用动画的页面里加上这个style就可以了:

    Style="{StaticResource PageTranstionStyle}"
  • 相关阅读:
    LintCode2016年8月22日算法比赛----骰子求和
    LintCode2016年8月22日算法比赛----平面列表
    LintCode2016年8月22日算法比赛----将数组重新排序以构造最小值
    LintCode2016年8月22日算法比赛----克隆二叉树
    Leetcode算法比赛----Longest Absolute File Path
    Leetcode算法比赛----First Unique Character in a String
    vue运行报错Error: listen EADDRNOTAVAIL 192.168.1.105:8080
    vue使用lrz插件压缩图片
    <input type="file">原型难看
    vue创建全局变量以及全局方法
  • 原文地址:https://www.cnblogs.com/chenguangqiao/p/3705968.html
Copyright © 2011-2022 走看看