Windows Phone 實用開發技巧（9）：自定義Windows Phone 頁面切換動畫

 在Silverlight for Windows Phone ToolKit 中默認中有自帶的頁面Transitions：RollTransition、RotateTransition、SlideTransition、SwivelTransition、TurnstileTransition。你們若是查看源代碼，會發現這些Transition都是繼承自TransitionElement，而後定義一些特定的Mode去調用不一樣的StoryBoard去實現頁面切換效果，因而咱們能夠定義本身的Transition類，繼承自TransitionElement，調用本身定義的StoryBoard。

 

 下圖能夠方便你們理解Toolkit中默認的Forward、Backward、In、Out的流程

 

下面咱們就來自定義Page Transition：

1. 首先，須要將App.xaml.cs中InitializePhoneApplication RootFrame改成RootFrame = new TransitionFrame();//set to transition

2. 添加對ToolKit的引用，添加類MyTransition，該類繼承自 TransitionElement，具體代碼以下

 

3.  編輯MainPage.xaml，添加ToolKit的名稱空間 xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

4.  向MainPage中添加頁面資源，即咱們定義的StoryBoard，詳細代碼見源代碼

5.  添加以下代碼，以增長頁面切換效果

 

6.  添加第二個命名，作法同MainPage，不一樣的是修改StoryBoard 以顯示不一樣的切換效果

7。 運行程序，會發現頁面切換效果

PS：若是你們的頁面有背景顏色，在切換頁面的時候可能會出現黑屏或者白屏的狀況，由於在Windows Phone 中Pages都是放在一個容器中的，而容器的背景顏色是綁定當前系統的主題的顏色，因此你們能夠修改成背景顏色相近的顏色，以提供更好的用戶體驗。

修改方法爲在App.xaml.cs中 RootFrame = new TransitionFrame();//set to transition

下一行代碼中設置RootFrame的背景顏色便可

 

源代碼下載： 

 參考http://blogs.msdn.com/b/benwilli/archive/2011/02/04/custom-page-transitions-in-wp7.aspx