Windows phone中如何添加頁面跳轉動畫

有沒有羨慕ios平台中華麗的動畫效果，不用擔心微軟的toolkit團隊為我們為我們提供了這樣一套組件，叫做TransitionServices服務。

簡單說一下它具備的效果：turnstile（軸旋轉效果）；turnstile feather（羽毛式軸旋轉效果）；continuum（繼承動畫效果）；slide（滑動效果）；rotate（旋轉效果）。這裡我們實現一下Turnstile效果：

接下來我介紹一下使用過程（這裡實現一個全域的跳轉動畫，某個頁面需要動畫效果時直接添加style屬性就可以了）：

      首先毋庸置疑我們要下載Silverlight for Windows Phone Toolkit （沒有Windows phone Toolkit的可以去http://silverlight.codeplex.com/releases/view/55034/ 進行下載）：

      因為想實現全域都可以調用的動畫，於是我們可以在App.xaml中實現我們的想法。

        1.首先將Toolkit引用進來：在Application中加入  xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" 即可：

          

       2.在 <Application.Resources>中添加一個動畫樣式（Style標籤中的便是）：

  <!--應用程式資源-->    <Application.Resources>        <local:LocalizedStrings xmlns:local="clr-namespace:MeeTu" x:Key="LocalizedStrings"/>        <UriMapper:UriMapper x:Name="mapper">            <UriMapper:UriMapping Uri="/MainPage.xaml" />        </UriMapper:UriMapper>        <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>            <Setter Property="Background">                <Setter.Value>                    <ImageBrush ImageSource="/Images/bg2.png"/>                </Setter.Value>            </Setter>        </Style>    </Application.Resources>

       3.這一點很重要，我們需要在App.xaml.cs檔案中修改下東西，以便於我們的動畫能被調用。

          在cs檔案中找到"RootFrame = new PhoneApplicationFrame();" 也就是PhoneApplicationFrame的執行個體化方法，

          我們將它改成："RootFrame = new TransitionFrame();"  這樣我們的架構就成為了一個可以有跳轉動畫的架構了。

       4.接下來就是調用了，這個很簡單直接在想用動畫的頁面裡加上這個style就可以了： Style="{StaticResource PageTranstionStyle}"：

<phone:PhoneApplicationPage    x:Class="MeeTu.Message.SendMessagePage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    FontFamily="{StaticResource PhoneFontFamilyNormal}"    FontSize="{StaticResource PhoneFontSizeNormal}"    Foreground="{StaticResource PhoneForegroundBrush}"    SupportedOrientations="Portrait" Orientation="Portrait"    mc:Ignorable="d"    Style="{StaticResource PageTranstionStyle}"    shell:SystemTray.IsVisible="False">    <!--LayoutRoot 是包含所有頁面內容的根網格-->    <Grid x:Name="LayoutRoot">        <Grid.Background>            <ImageBrush ImageSource="/Images/bg2.png"/>        </Grid.Background>    </Grid>    <phone:PhoneApplicationPage.ApplicationBar>        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Default" BackgroundColor="Black" ForegroundColor="White">            <shell:ApplicationBarIconButton Text="send" IconUri="/Icons/check.png" Click="ApplicationBarIconButton_Click_Send" />            <shell:ApplicationBar.MenuItems>                <shell:ApplicationBarMenuItem Text="Settings" />                <shell:ApplicationBarMenuItem Text="Profile" />                <shell:ApplicationBarMenuItem Text="Sign out" />            </shell:ApplicationBar.MenuItems>        </shell:ApplicationBar>    </phone:PhoneApplicationPage.ApplicationBar></phone:PhoneApplicationPage>

     最後：除了內建的這些動畫效果外，我們同樣可以自訂動畫，這個我以後再同大家分享。