WP開發筆記——WP APP添加頁面跳轉動畫

標籤：style   class   blog   code   java   tar   

　　微軟的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}"