Saturday, 13 April 2013

Windows Phone Tutorial - Page Navigation

Advertisement

Postingan ini sebenarnya sangat sederhana, tapi saya lagi semangat-semangatnya ngeblog, so here goes. :)
Ketika kita mengembangkan aplikasi mobile Windows Phone, entah itu versi 7, 7.5, 7.8, atau 8, tidak jarang ketika kita membutuhkan lebih dari satu halaman. Tujuan dari postingan ini adalah menjelaskan bagaimana melakukan navigasi antarhalaman pada Windows Phone.



  1. Yang pertama adalah kita bikin saja projek dummy yang bernama NavigasiHalaman
  2. Ubah property Text TextBlock PageTitle dari "page title" menjadi "Halaman Utama" (tidak mke kutip).
  3. Di dalam grid ContentPanel, sebelum kodingan </Grid>, tambahkan kodingan XAML berikut


  4. Sehingga secara lengkap kodingan Grid ContentPanel-nya menjadi seperti ini








  5. Nah, sekarang kita masuk ke bagian code-behind dari MainPage.xaml kita. Tekan saja F7.
  6. Di bawah kurung kurawal penutupnya c public MainPage, tambahkan kodingan ini



  7. private void nextPage(object sender, RoutedEventArgs e)
    {
    this.NavigationService.Navigate(new Uri("/SecondPage.xaml", UriKind.Relative));
    }

    Maksud kodingan diatas adalah, ketika Button kita tadi di-Click, maka fungsi diatas akan dijalankan. "Apa maksud kodingan diatas?". Maksudnya begini, c halaman MainPage itu sendiri (yaitu kita tunjuk menggunakan keyword this), menjalankan NavigationService dan dengan itu, dia akan me-Navigate ke Uri atau alamat yang kita tuju, dalam kasus ini halaman kedua, yang akan kita buat sebentar lagi. Bagian "/SecondPage.xaml" adalah alamat halaman yang ingin kita tuju. UriKind.Relative maksudnya alamat "/SecondPage.xaml" itu alamat yang masih relatif, karena sebenarnya di dalam Windows Phone-nya sendiri, belum tentu alamatnya seperti itu, makanya tipe Uri-nya Relative.


  8. Nah sekarang kita akan membuat halaman kedua.Klik kanan pada projevt kita di Solution Explorer - Add - Add New Item. Kemudian pilih Windows Phone Portrait Page. Beri nama SecondPage.xaml.




  9. Ubah property Text TextBlock PageTitle dari "page name" menjadi "Halaman 2" (tidak mke kutip).

Sekarang coba jalankan dengan menekan tombol F5. Lihatlah hasilnya. ;)

Mungkin itu saja dulu untuk postingan ini, terus belajar dan teruslah mengoprek gan :)



EmoticonEmoticon