Aly Sangadji Blog

Saat kita membuat beberapa page pada Apps Windows phone, terjadi beberapa tahap dalam perpindahan antar page tersebut. Salah satunya adalah sebuah kejadian transisi perpindahan dari page pertama ke page kedua, sebaliknya ataupun ke page lainnnya. Code dibawah ini merupakan perpindahan dari page 1 ke page 2 dengan code C#:

private void Button_Click(object sender, RoutedEventArgs e)

{

    NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.Relative));

}

Code diatas hanya mengarahkan kita pada page2, tetapi tidak terjadi sebuah transisi yang cukup untuk memberitahukan kepada pengguna bahwa aplikasi tersebut terjadi aksi dan berpindah halaman. Pada Windows Phone, kita dapat membuat transisi tersebut dengan mudah. Anda membutuhkan sebuah toolkit yang bisa anda download di http://silverlight.codeplex.com/ (disarankan anda mendownload toolkit tersebut pada versi yang paling baru, november 2011).

  
Sumber gambar: http://www.windowsphonegeek.com (Gambar sebuah transisi perpindahan dari MainPage ke page1 atau Page2).

Setelah anda mendownload dan menginstall toolkit tersebut, tambahkan reference pada project anda: Microsoft.Phone.Controls.Toolkit. Setiap halaman yang anda inginkan untuk melakukan transisi tambahkan namespace pada code xaml: xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit", dan code dibawah ini:

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

Jika code diatas sudah terdapat pada setiap halaman, rubah sebuah baris code C# pada App.xaml.cs:

awal : RootFrame = new PhoneApplicationFrame(); –--> RootFrame = new TransitionFrame();

Run Aplikasi anda dan perhatikan perpindahannya..Semoga bermanfaat