WP7應用開發筆記(12) 添加頁面動畫

頁面動畫就是頁面的切換的動畫過度效果。

平時使用Wp手機的系統程序都是像翻頁一樣的過度效果，我下面就准備完成簡單的添加這樣的效果。

 

使用Windows Phone Toolkit

其實這個動畫效果不需要自己實現，Windows Phone Toolkit 已經封裝好了現成庫，我們只需要調用就可以了。

這里可以下載:

http://silverlight.codeplex.com/

安裝后可以在C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Toolkit 找到[32位系統去掉(x86)]，

引用到項目中就可以了，里面還有不少增強控件也非常實用，相信大家都用過了。

不過這里主要使用的是TransitionService.NavigationInTransition

 

為頁面添加過度效果

第一步，必須要有一個不可缺少的准備工作，就是找到app.xaml.cs里面

找到    RootFrame = new PhoneApplicationFrame();

替換成 RootFrame = new TransitionFrame();

 

第二步,在頁面上添加效果代碼

先添加名稱空間xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

 

然后再<phone:PhoneApplicationPage>元素下添加

 

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

 

OK簡單2步就完成了一個頁面的翻頁動畫效果。

Toolkit 提供了很多動畫效果都在Microsoft.Phone.Controls.Toolkit\Transitions\Transitions 里面,

還可以繼承TransitionElement實現自己的動畫。

不過我覺得默認的TurnstileTransition最滿意，太炫了影響使用。

 

將過度效果作為頁面樣式

如果頁面比較多每個頁面都想要效果，那么可以將效果作為樣式添加到系統資源文件里或者直接寫在App.xaml里。

方法也很簡單

 

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

需要效果的頁面添加一個屬性Style="{StaticResource TransitionPageStyle}"就可以了