如何做一個比較酷的介面切換【Windows Phone】

當你看一些Windows Phone 應用程式時，有可能你注意到比較炫的介面切換, 顯然這個東西會大大增加我們的使用者體驗。

由於我們Team 專案中美化設計需求，就做了一番調查，現在發個帖來總結下自己的心得。

介面的切換，可以用Windows Phone Toolkit中的TransitionService來搞定。

要使用TransitionService，首先需要在工程中添加一個reference引用：Microsoft.Phone.Controls.Toolkit.dll。之後，在要進行切換的page的XAML檔案裡LayoutRoot外添加如下Transition Service代碼

 

 1 <toolkit:TransitionService.NavigationInTransition>
 2           <toolkit:NavigationInTransition>
 3               <toolkit:NavigationInTransition.Backward>
 4                   <toolkit:TurnstileTransition Mode="BackwardIn"/>
 5               </toolkit:NavigationInTransition.Backward>
 6               <toolkit:NavigationInTransition.Forward>
 7                   <toolkit:TurnstileTransition Mode="ForwardIn"/>
 8               </toolkit:NavigationInTransition.Forward>
 9         </toolkit:NavigationInTransition>
10       </toolkit:TransitionService.NavigationInTransition>
11       <toolkit:TransitionService.NavigationOutTransition>
12           <toolkit:NavigationOutTransition>
13               <toolkit:NavigationOutTransition.Backward>
14                 <toolkit:TurnstileTransition   Mode="BackwardOut"/>
15               </toolkit:NavigationOutTransition.Backward>
16               <toolkit:NavigationOutTransition.Forward>
17                   <toolkit:TurnstileTransition Mode="ForwardOut"/>
18               </toolkit:NavigationOutTransition.Forward>
19           </toolkit:NavigationOutTransition>
20     </toolkit:TransitionService.NavigationOutTransition>

裡面定義了一個page的四種模式，用下面的圖可以清晰的表達出來

 

                       

為了實現自動切換，需要在App.cs檔案裡添加：

// RootFrame = new PhoneApplicationFrame();  //注釋掉
2 RootFrame = new TransitionFrame();

Ok， 這樣就基本完工了。應用可以按照每個頁面定義的格式進行介面動畫切換了。

 為了更好的說明， 附上一些代碼：

http://files.cnblogs.com/OMG-Team/Transitions.zip

裡面可以支援  旋杆式介面切換，滑動式介面切換，旋轉式介面切換