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