Menavigasi antar halaman

Bagian tutorial ini menambahkan bagian akhir ke aplikasi, navigasi antara halaman semua catatan dan halaman catatan individual.

Sebelum menulis kode apa pun untuk menangani navigasi dalam aplikasi, mari kita jelaskan perilaku navigasi yang diharapkan.

Di AllNotesPage, ada kumpulan catatan yang ada dan tombol Catatan baru .

  • Mengklik catatan yang sudah ada harus menavigasi ke halaman catatan dan memuat catatan yang diklik.
  • Mengklik tombol Catatan baru harus menavigasi ke halaman catatan dan memuat catatan kosong yang belum disimpan.

Pada halaman catatan, Anda akan menambahkan tombol kembali , dan ada tombol Simpan dan Hapus .

  • Mengklik tombol kembali harus menavigasi kembali ke halaman semua catatan, membuang perubahan apa pun yang dibuat pada catatan.
  • Mengklik tombol Hapus akan menghapus catatan lalu menavigasi kembali.

Catatan baru

Pertama, Anda akan menangani navigasi untuk catatan baru.

Tip

Anda dapat mengunduh atau melihat kode untuk tutorial ini dari repositori GitHub. Untuk melihat kode seperti saat ini di langkah ini, lihat komit ini: navigation - catatan baru.

  1. Di AllNotesPage.xaml, temukan AppBarButton untuk catatan baru.

  2. Click Tambahkan penanganan aktivitas dan ganti namanya menjadi NewNoteButton_Click. (Lihat Tambah pengendali acara di langkah halaman catatan jika Anda memerlukan pengingat cara melakukannya.)

    <AppBarButton Icon="Add" Label="New note"
              Click="NewNoteButton_Click"/>

  3. Dalam metode NewNoteButton_Click (dalam AllNotesPage.xaml.cs), tambahkan kode ini:

    private void NewNoteButton_Click(object sender, RoutedEventArgs e)
{
    // ↓ Add this. ↓
    Frame.Navigate(typeof(NotePage));
}

Setiap Halaman memiliki properti Bingkai yang menyediakan referensi ke instans Bingkai milik Page (jika ada). Itulah Frame yang Anda sebut metode Navigasi di sini. Metode Navigate ini menerima Tipe dari halaman yang ingin Anda navigasikan. Anda mendapatkan Type di C# dengan operator typeof.

Jika Anda menjalankan aplikasi sekarang, Anda dapat mengklik tombol Catatan baru untuk menavigasi ke halaman catatan, dan Anda dapat mengetik ke editor catatan. Namun, jika Anda mencoba menyimpan catatan, tidak ada yang akan terjadi. Ini karena instans Note model belum dibuat di halaman catatan. Anda akan melakukan itu sekarang.

  1. Buka NotePage.xaml.cs.

  2. Tambahkan kode untuk mengambil alih metode OnNavigatedTo halaman.

    public NotePage()
{
    this.InitializeComponent();
}
//  ↓ Add this. ↓
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    noteModel = new Note();
}

Sekarang, saat Anda menavigasi ke NotePage, model Note yang baru dibuat.

Catatan yang ada

Sekarang Anda akan menambahkan navigasi untuk catatan yang sudah ada. Sekarang, ketika Anda mengklik catatan di ItemsView, catatan tersebut akan dipilih, tetapi tidak ada yang terjadi. Perilaku default untuk sebagian besar kontrol koleksi adalah pilihan tunggal, yang berarti satu item dipilih pada satu waktu. Anda akan memperbarui ItemsView sehingga alih-alih memilihnya, Anda dapat mengklik item seperti tombol.

Tip

Anda dapat mengunduh atau melihat kode untuk tutorial ini dari repositori GitHub. Untuk melihat kode di langkah ini, lihat komit ini: navigation - aplikasi akhir.

  1. Buka AllNotesPage.xaml.

  2. Perbarui XAML untuk ItemsView dengan SelectionMode = None dan IsItemInvokedEnabled = True.

  3. Tambahkan handler untuk peristiwa ItemInvoked .

    <ItemsView ItemsSource="{x:Bind notesModel.Notes}"
           Grid.Row="1" Margin="24" 
           ItemTemplate="{StaticResource NoteItemTemplate}"
           <!-- ↓ Add this. ↓ -->
           SelectionMode="None"
           IsItemInvokedEnabled="True"
           ItemInvoked="ItemsView_ItemInvoked">

  4. Dalam AllNotesPage.xaml.cs, temukan metode .ItemsView_ItemInvoked (Jika Visual Studio tidak membuatnya untuk Anda, yang bisa terjadi jika Anda menyalin dan menempelkan kode, tambahkan di langkah berikutnya.)

  5. Dalam metode , ItemsView_ItemInvoked tambahkan kode untuk menavigasi ke NotePage. Kali ini, Anda akan menggunakan kelebihan beban metode Navigasi yang memungkinkan Anda meneruskan objek ke halaman lain. Teruskan parameter yang dipanggil Note sebagai parameter navigasi kedua.

    private void ItemsView_ItemInvoked(ItemsView sender, ItemsViewItemInvokedEventArgs args)
{
    Frame.Navigate(typeof(NotePage), args.InvokedItem);
}

  6. Buka NotePage.xaml.cs.

  7. Perbarui metode OnNavigatedTo penimpaan untuk menangani Note yang diteruskan oleh panggilan ke Navigate.

    protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    //  ↓ Update this. ↓
    if (e.Parameter is Note note)
    {
        noteModel = note;
    }
    else
    {
        noteModel = new Note();
    }
   // ↑ Update this. ↑
}

    Dalam kode ini, Anda terlebih dahulu memeriksa untuk melihat apakah parameter yang diteruskan adalah Note objek. Jika ya, Anda menetapkannya sebagai model halaman Note. Jika itu null atau bukan Note, buat baru Note seperti sebelumnya.

Navigasi belakang

Terakhir, Anda perlu memperbarui aplikasi sehingga Anda dapat menavigasi kembali dari catatan individual ke halaman semua catatan.

Kontrol TitleBar WinUI 3 menyertakan tombol kembali yang memenuhi semua panduan Fluent Design untuk penempatan dan penampilan. Anda akan menggunakan tombol bawaan ini untuk navigasi belakang.

  1. Buka MainWindow.xaml.

  2. Perbarui XAML untuk TitleBar dengan IsBackButtonVisible = True dan IsBackButtonEnabled terikat ke properti Frame.CanGoBack.

  3. Tambahkan handler untuk peristiwa BackRequested . XAML Anda akan terlihat seperti ini:

    <TitleBar x:Name="AppTitleBar"
          Title="WinUI Notes"
          IsBackButtonVisible="True"
          IsBackButtonEnabled="{x:Bind rootFrame.CanGoBack, Mode=OneWay}"
          BackRequested="AppTitleBar_BackRequested">

    Di sini, properti IsBackButtonVisible diatur ke true. Ini membuat tombol kembali muncul di sudut kiri atas jendela aplikasi.

    Kemudian, properti IsBackButtonEnabled terikat ke properti Frame.CanGoBack , sehingga tombol kembali diaktifkan hanya jika bingkai dapat menavigasi kembali.

    Terakhir, penanganan aktivitas BackRequested ditambahkan. Di sinilah Anda menempatkan kode untuk menavigasi kembali.

  4. Di MainWindow.xaml.cs, tambahkan kode ini ke AppTitleBar_BackRequested metode :

    private void AppTitleBar_BackRequested(TitleBar sender, object args)
{
    // ↓ Add this. ↓
    if (rootFrame.CanGoBack == true)
    {
        rootFrame.GoBack();
    }
    // ↑ Add this. ↑
}

    Kelas Frame ini melacak navigasi di BackStack-nya, sehingga Anda dapat menavigasi kembali ke halaman sebelumnya hanya dengan memanggil metode GoBack . Ini adalah praktik terbaik untuk selalu memeriksa properti CanGoBack sebelum memanggil GoBack.

Selanjutnya, Anda perlu memperbarui kode NotePage untuk menavigasi kembali setelah catatan dihapus.

  1. Buka NotePage.xaml.cs.

  2. DeleteButton_Click Perbarui metode penanganan aktivitas dengan panggilan ke Frame.CanGoBack metode setelah catatan dihapus:

    private async void DeleteButton_Click(object sender, RoutedEventArgs e)
{
    if (noteModel is not null)
    {
        await noteModel.DeleteAsync();
    }
    // ↓ Add this. ↓
    if (Frame.CanGoBack == true)
    {
        Frame.GoBack();
    }
    // ↑ Add this. ↑
}

Tip

Anda mungkin telah memperhatikan bahwa dalam NotePage, Anda memanggil Frame.GoBack, saat di MainWindow Anda memanggil rootFrame.GoBack. Ini karena kelas Halaman memiliki properti Bingkai yang mendapatkan Frame yang menghosting Page, jika ada. Dalam hal ini, ia mendapatkan referensi ke rootFrame.

Sekarang Anda dapat menjalankan aplikasi Anda. Coba tambahkan catatan baru, navigasi bolak-balik di antara catatan, dan hapus catatan.

Pelajari selengkapnya di dokumen:

Langkah selanjutnya

Selamat! Anda telah menyelesaikan tutorial Membuat aplikasi WinUI !

Untuk menjaga hal-hal sederhana dan memperkenalkan beberapa konsep dasar, tutorial ini berfokus pada kesederhanaan atas efisiensi, dan memperkenalkan fitur pada tingkat yang paling dasar. Jadi, sementara aplikasi berfungsi, ada beberapa hal yang dapat ditingkatkan.

Kami menyarankan agar Anda melanjutkan dengan salah satu tutorial tindak lanjut ini untuk mempelajari lebih lanjut:

  • Catatan WinUI bagian 2 - Menjelaskan lebih banyak fitur yang terkait dengan navigasi dan pengikatan data. Anda akan memperbarui aplikasi agar berfungsi lebih efisien sambil menjaga arsitektur dasar yang sama.

    OR

  • Pengikatan data, injeksi dependensi, dan pengujian unit di WinUI – Menunjukkan cara menerapkan pengikatan data, injeksi dependensi, dan pengujian unit dengan pola desain Model-View-ViewModel (MVVM). Anda akan mengubah aplikasi dan melihat model untuk memanfaatkan Toolkit MVVM.

  • Last updated on