windows phone 页面切换 动画

首先将App.xaml.cs中 InitializePhoneApplication() 函数里的RootFrame修改成RootFrame=new TransitionFrame();

　　其次在XAML中添加 xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

　　最后在Page元素下添加

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

　　toolkit提供了5种动画效果 1.RollTransition 2.RotateTransition 3.SlideTransition 4.SwivelTransition 5.TurnstileTransition;我们还可以通过继承TransitionElement实现自己的动画。

　　如果很多页面需要这些效果的话，也可以将效果作为样式添加到资源文件中以提供其他页面使用

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

 

 http://silverlightchina.net/html/zhuantixilie/winphone7/2012/0722/17574.html

 在xaml文件中：

toolkit:TransitionService.NavigationInTransition 进来的动画 
    toolkit:NavigationInTransition    
        toolkit:NavigationInTransition.Backward  后退进入动画 
        toolkit:NavigationInTransition.Forward   前进进入动画

toolkit:TransitionService.NavigationOutTransition 出去的动画 
    toolkit:NavigationOutTransition 
        toolkit:NavigationOutTransition.Backward 后退退出动画 
        toolkit:NavigationOutTransition.Forward  前进退出动画

 

 

动画枚举

---

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