Windows Phone 22 November 2013 - Navigation Page

Alhamdullillah kita udah sampai di materi Navigation Page yaitu tentang pergantian atau perpindahan page. Dalam sebuah Aplikasi pasti tidak hanya terdiri dari satu Page atau halaman pastinya lebih dari beberapa page, nah di Navigation Page inilah kita mempelajari bagaimana cara untuk berpindah dari satu page ke page lainnya.

Ada beberapa langkah untuk bisa menjalani atau membuat Navigation Page ini. Pertama yang perlu kita perhatikan adalah kita membuat lebih dari satu page dalam sebuah projeck dan nantinya page itu dapat saling terhubung satu sama lain.

Pertama kita buat projeck, lalu klik kanan pada nama projeck Kita yang terletak di solution eksplorer.. saya ulangi klik kanan – add – new folder, beri nama yang muda diingat… 

Selanjutnya kita akan membuat page baru di dalam folder tersebut… klik kanan folder – add – new item… beri nama second page…. Dan nama untuk page pertama Main Page.

Membuat folder baru

Membuat page di folder..

Nggak susahkan ? nah disini kita akan mebuat lima page yang saling terhubung satu sama lain yang dapat menginput sebuah text yang nantinya text yang telah kita masukan sebelumnya terkirim atau terterah keterangan di Pange tujuan.. apa sudah ada gambaran mengenai aplikasi yang saya jelaskan ?  kalau masih belum mari kita lihat gambar berikut ..

Semoga ada pencerahan sedikit (eh banyak) ketika melihat gambar diatas.. tapi mungkin masih belum paham juga ya… ? mari saya jelaskan sedikit lagi…

Jadi kita akan mengimput sebuah pesan di dalam textbox dan ketika kita klik buttom Go to Page 2 nantinya di page dua di textblock akan muncul pesan yang kita input tadi… begitu juga sebaliknya, ketika kita berada di page dua atau page lainnya kita dapat berpindah ke page yang kita mau dan menampilkan pesan yang kita inginkan yang sebelumnya kita input di texbox.

Sekarang kita mulai saja ya .. saya anggap temen – temen udah pada paham dengan penjelasan yang kurang jelas dari saya tapi saya kira sudah sangat jelas.

Lanjut ke projeck yang sudah di rencanakan…

Pertama – tama buatlah empat page lagi dalam satu folder yang kita buat tadi dengan nama yang berurutan saja supaya mudah di ingat yaitu page satu, page dua, page tiga, page empat. Maka aka nada lima page semuanya itu sudah termasuk dengan main page tadi .. main page kita buat saja menjadi page satu.

Jika sudah dowble klik pada button Go to Page 2 dan ketikan scrip seperti di bawah ini…

private void gotopage2_Click(object sender, RoutedEventArgs e)

        {

            string page = inputbx1.Text;

            NavigationService.Navigate(new Uri("/View/SecondPage.xaml?from page =" + page, UriKind.Relative));

        }

Sudah ? jika sudah masuk ke page dua dan cari file page dua.xaml.cs-nya

Tu kelihat di gambar, double klik aja… dan langsung tambahin skrip dibawah ini

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)

        {

            string page = "";

            if (NavigationContext.QueryString.TryGetValue("from page ", out page))

            {

                resultblock2.Text = string.Format("from page  = {0}", page);

            }

        }

Untuk nama TextBox dan TexyBlock pastinya udah tahu dong karena kita udah termasuk jauh belajarnya… ya di sesuaiin aja kebetulan saya member nama TextBox dengan ‘inputbx1’ dan TextBlock dengan ‘resultblock1’ “1” untuk yang di page satu,, jika di page 2 dan yang lainya saya sesuaiin aja menurut page.. nama ini saya buat untuk kemudahan saya membuat scrip agar tidak tertukar…

Nah jika sudah langsung run saja program kita.. untuk selanjutnya langkahnya sama saja hanya di buttom dan page yang berbeda .. J

Selamat mencoba semoga bermanfaat…