Memulai: Navigasi

Menambahkan navigasi

iOS menyediakan kelas UINavigationController untuk membantu navigasi dalam aplikasi: Anda dapat mendorong dan memunculkan tampilan untuk membuat hierarki UIViewController yang menentukan aplikasi Anda.

Sebaliknya, aplikasi Windows 10 yang berisi beberapa tampilan membutuhkan lebih banyak pendekatan situs web untuk navigasi. Anda dapat membayangkan pengguna Anda melompat dari halaman ke halaman saat mereka mengklik kontrol untuk bekerja dengan cara mereka melalui aplikasi. Untuk informasi selengkapnya, lihat Dasar-dasar desain navigasi.

Salah satu cara untuk mengelola navigasi ini di aplikasi Windows 10 adalah dengan menggunakan kelas Bingkai. Panduan berikut menunjukkan kepada Anda cara mencobanya.

Melanjutkan dengan solusi yang Anda mulai sebelumnya, buka file MainPage.xaml , dan tambahkan tombol dalam tampilan Desain . Ubah properti Konten tombol dari "Tombol" menjadi "Buka Halaman". Kemudian, buat handler untuk peristiwa Klik tombol, seperti yang ditunjukkan pada gambar berikut. Jika Anda tidak ingat cara melakukannya, tinjau panduan di bagian sebelumnya (Petunjuk: klik dua kali tombol dalam tampilan Desain ).

adding a button and its click event in visual studio

Mari kita tambahkan halaman baru. Di tampilan Solusi, ketuk menu Project, dan ketuk Tambahkan Item Baru. Ketuk Halaman Kosong seperti yang diperlihatkan dalam gambar berikut, lalu ketuk Tambahkan.

adding a new page in visual studio

Selanjutnya, tambahkan tombol ke file BlankPage.xaml. Mari kita gunakan kontrol AppBarButton, dan mari kita berikan gambar panah kembali: dalam tampilan XAML , tambahkan <AppBarButton Icon="Back"/> di <Grid> </Grid> antara elemen.

Sekarang, mari kita tambahkan penanganan aktivitas ke tombol: klik dua kali kontrol dalam tampilan Desain dan Microsoft Visual Studio menambahkan teks "AppBarButton_Click" ke kotak Klik, seperti yang ditunjukkan pada gambar berikut, lalu menambahkan dan menampilkan penanganan aktivitas yang sesuai dalam file BlankPage.xaml.cs.

adding a back button and its click event in visual studio

Jika Anda kembali ke tampilan XAML file BlankPage.xaml, <AppBarButton> kode Extensible Application Markup Language (XAML) elemen sekarang akan terlihat seperti ini:

<AppBarButton Icon="Back" Click="AppBarButton_Click"/>

Kembali ke file BlankPage.xaml.cs, dan tambahkan kode ini untuk masuk ke halaman sebelumnya setelah pengguna mengetuk tombol .

private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
    // Add the following line of code.    
    Frame.GoBack();
}

Terakhir, buka file MainPage.xaml.cs dan tambahkan kode ini. Ini membuka BlankPage setelah pengguna mengetuk tombol.

private void Button_Click(object sender, RoutedEventArgs e)
{
    // Add the following line of code.
    Frame.Navigate(typeof(BlankPage1));
}

Sekarang, jalankan program. Ketuk tombol "Buka Halaman" untuk masuk ke halaman lain, lalu ketuk tombol panah belakang untuk kembali ke halaman sebelumnya.

Navigasi halaman dikelola oleh kelas Bingkai . Karena kelas UINavigationController di iOS menggunakan metode pushViewController dan popViewController , kelas Bingkai untuk aplikasi UWP menyediakan metode Navigate dan GoBack . Kelas Frame juga memiliki metode yang disebut GoForward, yang melakukan apa yang mungkin Anda harapkan.

Panduan ini membuat instans baru BlankPage setiap kali Anda menavigasinya. (Instans sebelumnya akan dibebaskan, atau dirilis, secara otomatis). Jika Anda tidak ingin instans baru dibuat setiap kali, tambahkan kode berikut ke konstruktor kelas BlankPage di file BlankPage.xaml.cs. Ini akan mengaktifkan perilaku NavigationCacheMode .

public BlankPage()
{
    this.InitializeComponent();
    // Add the following line of code.
    this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;
}

Anda juga bisa mendapatkan atau mengatur properti CacheSize kelas Bingkai untuk mengelola berapa banyak halaman dalam riwayat navigasi yang dapat di-cache.

Untuk informasi selengkapnya tentang navigasi, lihat Navigasi dan sampel animasi kepribadian XAML.

Catatan Untuk informasi tentang navigasi untuk aplikasi UWP menggunakan JavaScript dan HTML, lihat Mulai Cepat: Menggunakan navigasi satu halaman.  

Langkah selanjutnya

Memulai: Animasi