Teruskan catatan sebagai parameter navigasi

Sekarang setelah Note memiliki State, perbarui navigasi agar meneruskannya kembali ke AllNotesPage, tempat Anda dapat menanganinya sebagaimana mestinya berdasarkan State-nya. Ini juga memberi Anda kesempatan untuk meningkatkan pengalaman pengguna yang terkait dengan navigasi.

Tip

Jika diperlukan, tinjau Membuat aplikasi WinUI 3 pertama Anda, Langkah 1 - Navigasi. Sangat membantu untuk memahami bagaimana navigasi disiapkan sebelum membuat perubahan ini.

Saat ini, semua navigasi dari NotePage belakang ke AllNotesPage dilakukan dengan panggilan sederhana ke Frame.GoBack. Namun, GoBack metode ini tidak memungkinkan Anda untuk meneruskan parameter navigasi. Untuk meneruskan Note sebagai parameter, Anda harus mengganti navigasi belakang dengan navigasi maju (Frame.Navigate). GoBack juga tidak menambahkan entri ke stack navigasi seperti halnya navigasi maju, jadi Anda perlu mengelola back stack agar navigasi maju ini tidak ditambahkan.

Tip

Anda dapat mengunduh atau melihat kode lengkap untuk tutorial ini dari repositori GitHub di WinUI Notes bagian 2. Untuk melihat perbedaan antara titik awal dan titik akhir dalam proyek, lihat commit ini: pembaruan untuk bagian 2.

OnNavigatingFrom

Dalam NotePage.cs, ambil alih metode OnNavigatingFrom . Ini dipanggil setelah pengguna menekan tombol kembali dan GoBack dipanggil. Ini memungkinkan Anda mencegat navigasi, memeriksa catatan State, dan membatalkan navigasi jika diperlukan.

Di sini, jika catatan tidak disimpan, Anda membatalkan navigasi belakang dan menampilkan dialog yang menanyakan apakah pengguna ingin menyimpan catatan.

  • Jika pengguna menyimpan catatan, panggil SaveAsync, lalu ganti navigasi belakang dengan panggilan ke Navigate yang meneruskan catatan ke AllNotesPage.
  • Jika pengguna tidak menyimpan perubahan mereka, gunakan TextBox.Undo untuk membatalkan pengeditan apa pun, mengatur ulang status catatan, dan memulai ulang navigasi belakang.
// ↓ Add this. ↓
protected async override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    if (noteModel?.State == NoteState.Unsaved)
    {
        e.Cancel = true;
        ContentDialog dialog = new ContentDialog();

        // XamlRoot must be set for the ContentDialog.
        dialog.XamlRoot = this.XamlRoot;
        dialog.Title = "Save your work?";
        dialog.PrimaryButtonText = "Save";
        dialog.SecondaryButtonText = "Don't Save";
        dialog.CloseButtonText = "Cancel";
        dialog.DefaultButton = ContentDialogButton.Primary;

        ContentDialogResult result = await dialog.ShowAsync();

        if (result == ContentDialogResult.Primary)
        {
            await noteModel.SaveAsync();
            Frame.Navigate(typeof(AllNotesPage), noteModel);
        }
        else if (result == ContentDialogResult.Secondary)
        {
            while (NoteEditor.CanUndo)
            {
                NoteEditor.Undo();
            }
            NoteEditor.Focus(FocusState.Programmatic);
            noteModel.State = NoteState.Saved;
            Frame.Navigate(typeof(AllNotesPage), noteModel);
        }
    }
}

Delete

Selanjutnya, ubah kode untuk peristiwa tombol hapus Click di NotePage.xaml.cs. Alih-alih hanya menghapus catatan dan menavigasi kembali, Anda akan memeriksa status catatan.

  • Jika statusnya Unset - yang berarti catatan baru dibuat, tidak memiliki pengeditan apa pun, dan belum disimpan - Anda hanya menavigasi kembali. Anda tidak perlu meneruskan catatan sebagai parameter.
  • Jika tidak, hapus file catatan dari sistem berkas dan kirimkan kembali objek Note sebagai parameter navigasi. Kemudian AllNotesPage akan menerima Note dengan status Deleted-nya dan mengetahui bahwa item tersebut harus dihapus dari koleksi Notes.
private async void DeleteButton_Click(object sender, RoutedEventArgs e)
{
    if (noteModel is not null)
    {
        if (noteModel.State == NoteState.Unset)
        {
            // If the note is new, doesn't have any edits,
            // and hasn't been saved, just call GoBack.
            // There's no need to pass back the noteModel.
            if (Frame.CanGoBack == true)
            {
                Frame.GoBack();
            }
        }
        else
        {
            // If the note has been saved before, then delete it
            // and navigate back to the AllNotesPage passing the
            // noteModel with its Deleted state.
            await noteModel.DeleteAsync();
            Frame.Navigate(typeof(AllNotesPage), noteModel);
        }
    }
}

Simpan dan tutup

Saat ini, pengguna harus mengklik untuk menyimpan catatan, lalu klik panah belakang untuk menutup halaman catatan dan kembali ke koleksi catatan. Pengalaman ini dapat ditingkatkan dengan membiarkan pengguna menyimpan dan menutup catatan dengan satu klik. Untuk melakukan ini, Anda akan mengganti tombol "Simpan" dengan SplitButton "Simpan dan tutup" dengan opsi drop-down untuk hanya menyimpan.

<!-- ↓ Delete this. ↓ -->
<!--<Button Content="Save" Click="SaveButton_Click"/>-->

<!-- ↓ Add this. ↓ -->
<SplitButton Content="Save &amp; close" Click="SaveCloseButton_Click"
             Height="32">
    <SplitButton.Flyout>
        <MenuFlyout>
            <MenuFlyoutItem Text="Save" Click="SaveButton_Click"/>
        </MenuFlyout>
    </SplitButton.Flyout>
</SplitButton>

Tambahkan penanganan aktivitas baru untuk peristiwa tombol "Simpan dan tutup" Click . Di sini, Anda menyimpan catatan tersebut, kemudian meneruskannya kembali ke AllNotesPage sebagai parameter navigasi.

// ↓ Add this. ↓
private async void SaveCloseButton_Click(SplitButton sender, SplitButtonClickEventArgs args)
{
    if (noteModel is not null)
    {
        await noteModel.SaveAsync();
        Frame.Navigate(typeof(AllNotesPage), noteModel);
    }
}

Tangani parameter navigasi di AllNotesPage

Di AllNotesPage, Anda perlu menangani parameter navigasi masuk (Note) dan menambahkannya ke atau menghapusnya dari Notes koleksi sesuai kebutuhan.

Untuk menangani parameter navigasi masuk, ambil alih metode OnNavigatedTo , seperti yang ditunjukkan di sini.

// ↓ Add this. ↓
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    if (e.Parameter is Note note)
    {
        if (note.State == NoteState.Deleted)
        {
            notesModel.RemoveNote(note);
        }
        else if (!notesModel.Notes.Contains(note))
        {
            notesModel.AddNote(note);
        }
        // This navigation should be treated like a
        // back navigation, so clear the backstack.
        Frame.BackStack.Clear();
    }
}

Sekarang Anda dapat menjalankan aplikasi untuk melihat cara kerja perubahan ini. Coba tambahkan catatan baru, navigasi bolak-balik di antara catatan, dan hapus catatan.

Pelajari selengkapnya di dokumen:

Langkah berikutnya

Selamat! Anda telah menyelesaikan tutorial WinUI Notes bagian 2 !

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

  • Last updated on