windowsphone8翻页效果

要在一个页面添加跳转动画效果，只要在页面头部引入

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

然后添加一段代码就可以

<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>

　　

　　

 打开app.xaml.cs，找到这句

RootFrame = new PhoneApplicationFrame();

注释掉替换成

RootFrame = new TransitionFrame();

写一个简单的跳转来试试，应该可以出效果了。现在有动画了，看似大功告成了，但是在一个app里往往所有页面跳转的风格都是一致的，那岂不是要在每个页面都粘贴一遍，显然这不科学。所以接着往下看，把上面在MainPage里做的都删掉，打开app.xaml文件在<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>

最后在MainPage里面<phone:phoneApplication>里添加Style="{StaticResource PageTranstionStyle}"对app资源的引用。 ok，大功告成了。这样就不用在每个页面里都复制那么长的一段代码，只要加上一句就可以。

wptoolkit里为我们提供了一些比较常用的页面切换效果

• SlideTransition ： 上下或者左右滑动效果，具体有Mode值决定：
  • SlideUpFadeIn 向上飞入
  • SlideUpFadeOut 向上飞出
  • SlideDownFadeIn 向下飞入
  • SlideDownFadeOut 向下飞出
  • SlideLeftFadeIn 向左飞入
  • SlideLeftFadeIn 向左飞出
  • SlideRightFadeIn 向右飞入
  • SlideRightFadeIn 向右飞出
• RollTransition：360度旋转动画效果
• RotateTransition ：旋转效果，Mode枚举值如下：
  • In180Clockwise 180顺时针转入
  • Out180Clockwise 180顺时针转出
  • In180Counterclockwise 180逆时针转入
  • Out180Counterclockwise 180逆时针转出
  • In90Clockwise 90顺时针转入
  • Out90Clockwise 90顺时针转出
  • In90Counterclockwise 90逆时针转入
  • Out90Counterclockwise 90逆时针转出
• SwivelTransition : 垂直翻转动画效果，Mode值枚举如下：
  • BackwardIn 向后翻转入
  • BackwardOut 向后翻转出
  • ForwardIn 向前翻转入
  • ForwardOut 向前翻转出
  • FullScreenIn 全屏翻转入
  • FullScreenOut 全屏翻转出
• TurnstileTransition：左右翻页动画效果，Mode枚举值如下：
  • BackwardIn 向后翻入
  • BackwardOut 向后翻出
  • ForwardIn 向前翻入
  • ForwardOut 向前翻出

如果还是对效果不满意怎么办，没关系，既然有了wptoolkit的源码，那就看看源码里的transitions是怎么写的。在Microsoft.Phone.Controls.Toolkit.WP8项目里找到Transitions文件夹，我们看到里面有一个StoryBoard文件夹。就是这了，原来wptoolkit也是通过写storyboard的方法实现的动画，只不过是把这些封装起来而已。随便打开一个xaml文件，里面的代码已经很精简很清楚了，修改它的值然后重新编译吧。