Bagikan melalui

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 apa adanya dalam langkah ini, lihat penerapan ini: navigasi - catatan baru.

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

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

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

  3. NewNoteButton_Click Dalam metode (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 ini Navigate mengambil Tipe halaman yang ingin Anda navigasikan. Anda mendapatkannya Type di C# dengan menggunakan typeof operator.

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, instans Note baru model dibuat.

Catatan yang ada

Sekarang Anda akan menambahkan navigasi untuk catatan yang sudah ada. Saat ini, ketika Anda mengklik catatan di ItemsView, catatan 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 apa adanya dalam langkah ini, lihat penerapan ini: navigasi - 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 dapat 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 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 penimpaan OnNavigatedTo metode 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 Note model untuk halaman. 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 WinUI TitleBar menyertakan tombol kembali yang memenuhi semua panduan Desain Fasih untuk penempatan dan tampilan. Anda akan menggunakan tombol bawaan ini untuk navigasi belakang.

  1. Buka MainWindow.xaml.

  2. Perbarui XAML untuk TitleBar dengan IsBackButtonVisible = True dan IsBackButtonEnabled yang 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 !

Tautan berikut ini menyediakan informasi selengkapnya tentang membuat aplikasi dengan WinUI dan Windows App SDK:

  • Last updated on