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