navigation page

Tanggal  22 November 2013

Pada kesempatan kali ini kita akan mempelajari mengenai navigation between page pada windows Phone,atau dalam bahasa indonesia nya berpindah halaman.Dari page 1 berpindah ke page 2,serta dapat pula mengirimkan data atau informasi dari page 1 ke page 2.

Jadi bisa di bilang navigation page ini selain dapat berpindah halaman, juga dapat menerima dan mengirim informasi dari page 1 ke page yang lain nya.Baik kita mulai saja pembelajaran mengenai  navigation between page.

Seperti biasa buka aplikasi microsoft windows phone 2010 lau pilih option C# pada desktop di kiri lalu lihat desktop yang tengah dan pilih windows phone application setelah itu cari create directory from solution dan checklist lalu tunggu beberapa saat aplikasi akan meloading template yang dipilih. Jangan lupa memberi nama pada project yang akan digunakan untuk saat ini saya akan memberi navigationpage. Setelah itu kita cari properties dan solution explorer.

Setelah project terbuka terlebih dahulu kita membuat page yang kedua untuk berpindah  halaman,nah biar lebih memudahkan kita satu folderkan semua page yang akan kita gunakan pada project kali ini,cara membuat folder baru ialah :

1.       Sorot nama project kita pada solution explorer

2.       Kemudian klik kanan dan pilih add folder

3.       Setelah itu beri nama folder “views”,seperti pada gambar di bawah ini

Setelah membuat folder baru kita membuat page baru di project kita dengan cara

1.       Sorot folder “views ” pada solution explorer

2.       Kemudian klik kanan dan pilih add item

3.       Beri nama page yang kedua dengan “second page” dan page 3 dengan “page3” seperti di bawah ini

Nah setelah selesai baru lah kita mulai membuat atau mendesain project pada page 1 agar dapat berpindah halaman dan mengirim nilai atau parameter kepada page 2,

Seting page 1 seperti pada gambar di bawah ini

 

 

Textblock yang kita gunakan untuk menerima nilai dari page yang lain,dan hyperlinkbutton kita gunakan untuk berpindah halaman,

Agar kita bisa mengirim nilain dan berpindah halaman ke page 2 kita harus mengatur nilai apa yang akan di kirim dan akan di kirm atau berpindah halaman kemana pada propertis “navigateUri’

Dengan syntax tersebut kita akan mengirim parameter dan berpindah halaman ke page 2.

Setelah kita selesai dengan page 1,sekarang kita desain project di page 2 gseperti yang di bawah ini

 

Agar page 2 dapet menerima nilai dari page 1,kita buka page2 yang “.XAML.cs”,kemudian syntax di bawah ini

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

        {

            string nama = "";

            if (NavigationContext.QueryString.TryGetValue("nama", out nama))

            {

                namaTB.Text = nama;

            }

            string umur = "";

            if (NavigationContext.QueryString.TryGetValue("umur", out umur))

            {

                umurTB.Text = umur;

            }

 

Setelah di page 2 kita mendesai seperti diatas maka di run kemudian pada page 1 klia langsung klik page 2 saja supaya nanti hasil nya akan seperti ini

                

 

 

Itu lah contoh hasil perpindahan halaman dan pengiriman nilai nama dan umur dari page 1 ke page 2.

Nah sekarang kita akan mengirim nilai dari page 2 ke page 1,

Kita desai dlu di page 2 seperti di page 1 tadi kita atur navigateUri pada “hyperlinkbutton” yang ada di page 2

Setelah kita atur di project 2 seperti yang di atas tadi,kita masukan syntax di page 1 agar nilai yang akan di kirim dari page 2 bisa di terima di page 1.

Di page 1 kita masukan syntax pada mainpage.xaml.cs nya seperti di bawah ini

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

        {

            string jk = "";

            if (NavigationContext.QueryString.TryGetValue("jk", out jk))

            {

                jkTB.Text = jk;

            }

            string nickname = "";

            if (NavigationContext.QueryString.TryGetValue("nickname", out nickname))

            {

                nicknameTB.Text = nickname;

            }

 

 

Setelah itu di atur jalankan page 2 kemudian klik main page,maka hasil nya akan seperti di bawah ini :

 

 

 Hasil di atas ialah page 2 mengirim nilai nama panggilan dan jenik kelamin k page 1,

Begitulah cara berpindah halaman dan mengirim nilai ke page yang lain,silahkan coba di rumah dan semoga berhasil ya :-)