Pertemuan 9

Navigation

Pada modul pertemuan 9 ini kita akan membahas bagaimana caranya menggunakan
banyak halaman pada sebuah aplikasi. Modul ini akan memberikan tiga buah contoh
untuk dapat diimplementasikan sesuai dengan kebutuhan pada saat pengembangan
sistem. Dengan menggunakan system navigasi yang baik, maka aplikasi yang
terbentuk akan lebih mudah dipahami alurnya. Aplikasi yang alur atau navigasinya
berantakan akan membuat pengguna menjadi kesulitan.

Untuk contoh 1, silahkan bentuk sebuah projek WPF baru, beri nama
„BelajarNavigasi“. Atur ukuran window menjadi 350 x 525 jika defaultnya terlalu besar.
Lalu ketikkan script XAML berikut ini pada file MainWindow.xaml untuk mendesain
tampilan UI.

Kemudian, tambahkan sebuah halaman WPF baru dengan cara klik kanan pada judul
projek yang terletak di Solution Explorer > Add > Page. Lalu pilih Page (WPF) > beri
nama “Page1”. Atur ukuran window 300 x 300. Tambahkan kode program berikut.

Tambahkan sebuah page lagi dengan cara yang sama seperti di atas, lalu beri nama
„Page2”. Tambahkan kode program di bawah yang hampir serupa dengan kode
sebelumnya.

Langkah selanjutnya buka MainWindow.xaml.cs, lalu double klik pada setiap button
dan tambahkan kode program berikut.
Jika sudah selesai, silahkan run kode program di atas. Program akan menghasilkan
output seperti contoh di bawah ini.

Untuk contoh 2, silahkan bentuk sebuah projek WPF baru dan beri nama projek
„BelajarNavigasi2“. Tambahkan sebuah Window baru dengan cara klik kanan pada
nama projek > Add > Window > Window (WPF) > beri nama „halaman1“. Ketikkan
kode XAML berikut pada halaman1.xaml.
Lalu double klik pada tombol dengan id “btnPertama”, kemudian tambahkan kode C#
berikut kedalam method yang telah terbentuk.

Tambahkan lagi sebuah window dengan cara yang sama seperti pada contoh di atas,
beri nama file halaman2.xaml.

Kemudian, double klik pada tombol tersebut dan masukkan kode program seperti
pada contoh di bawah ini.

Langkah selanjutnya untuk menampilkan halaman yang ingin dilihat pada aplikasi saat
dijalankan, kita harus mengubah setting pada “StartupUri” sesuai dengan nama
halaman tersebut.

Jika berhasil, maka aplikasi akan terlihat seperti pada gambar di bawah ini. Ketika
tombol di tekan, maka akan muncul halaman lainnya dan menutup halaman yang tidak
terpakai.
Untuk contoh 3, pada contoh ini, kita akan belajar bagaimana mengirimkan nilai dari
sebuah halaman ke halaman lainnya. Hal ini penting untuk diketahui karena mengirim
nilai atau informasi antar halaman merupakan hal yang umum digunakan pada sebuah
aplikasi. Silahkan projek WPF baru dan beri nama „BelajarPassValue“.

Ketikkan script kode XAML berikut pada file MainWindow.xaml untuk membentuk
form sederhana.

Selanjutnya, double klik pada tombol “Kirim Data”, lalu tambahkan kode program
seperti pada tutorial di bawah ini.
Kemudian tambahkan sebuah Window lagi, beri nama “Hal2”. Buka file Hal2.xaml dan
ketikkan kode berikut ini untuk menambahkan label pada halaman.

Buka file Hal2.xaml.cs untuk menambahkan kode program C# untuk mendapatkan

nilai yang dikirim dari halaman sebelumnya.

Jika telah selesai, maka silahkan jalankan program tersebut. Program anda akan
mampu mengirim dan menerima data antar halaman.
Latihan dan Analisa:
1. Silahkan buat Analisa dari beberapa contoh diatas. Terutama perbedaan antara
contoh program 1 dan contoh program 2.
2. Apa fungsi NavigationUIVisibility?
3. Silahkan tambahkan dari contoh 3 diatas beberapa inputan berupa usia dan
tinggi.
4. Tambahkan radio button untuk menentukan gender.
5. Gunakan info usia, tinggi dan gender untuk menampilkan kategori BMI pada
halaman 2.

Silahkan sertakan hasilnya beserta analisa pada laporan.