Cache navigasi dan pemberitahuan perubahan

Langkah pertama adalah melakukan penyiapan dasar untuk perubahan yang perlu Anda buat:

  • aktifkan cache navigasi.
  • menerapkan pemberitahuan perubahan properti untuk properti Note.Text.

Setelah itu selesai, Anda akan menyesuaikan bagian lain dari aplikasi agar berfungsi dengan perubahan ini.

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.

Aktifkan NavigationCacheMode

Secara default, instans Halaman baru dibuat dengan nilai defaultnya setiap kali navigasi terjadi. Di aplikasi WinUI Notes, di sinilah notesModel, yang menyimpan semua instans Note, juga dibuat.

Di AllNotesPage.xaml, atur NavigationCacheMode ke Diaktifkan (NavigationCacheMode="Enabled"). Dengan NavigationCacheMode diaktifkan, instans halaman yang sama tetap dipertahankan, sehingga instans baru Page tidak dibuat setiap kali navigasi, dan notesModel tidak dibuat ulang.

<Page
    x:Class="WinUI_Notes.Views.AllNotesPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI_Notes.Views"
    xmlns:models="using:WinUI_Notes.Models"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    //  ↓ Add this. ↓
    NavigationCacheMode="Enabled">

Jalankan aplikasi sekarang dan Anda akan melihat beberapa efek samping dari perubahan ini.

  1. Saat Anda mengedit catatan yang sudah ada, perubahan Anda tidak tercermin di halaman semua catatan saat Anda menavigasi kembali.
  2. Saat Anda membuat dan menyimpan catatan baru, catatan tersebut tidak muncul di daftar semua catatan saat Anda menavigasi kembali.
  3. Saat Anda menghapus catatan yang ada, catatan tersebut tidak dihapus dari daftar semua catatan saat Anda menavigasi kembali.

Anda akan memperbaiki masalah ini nanti.

Pelajari selengkapnya di dokumen:

Mengimplementasikan INotifyPropertyChanged

Saat Anda mengedit dan menyimpan catatan yang sudah ada, perubahan Anda disimpan ke sistem file, tetapi perubahan tidak disebarluaskan ke daftar semua catatan. Ini karena Note kelas tidak memberi tahu pengikatan data, yang menghubungkan TextBox ke Note teks, bahwa pembaruan telah terjadi. Agar notifikasi ini dapat terjadi, kelas Note perlu mengimplementasikan antarmuka INotifyPropertyChanged untuk properti Text-nya.

Note

WinUI menyertakan antarmuka Microsoft.UI.Xaml.Data.INotifyPropertyChanged. Ini hanya digunakan oleh aplikasi C++, yang tidak menggunakan .NET.

Aplikasi C# yang dibuat dengan .NET menggunakan antarmuka System.ComponentModel.INotifyPropertyChanged sebagai gantinya.

Implementasi INotifyPropertyChanged mengikuti pola yang ditetapkan.

  1. Tambahkan using pernyataan untuk namespace yang diperlukan.

    // ↓ Add this. ↓
using System.ComponentModel
using System.Runtime.CompilerServices

  2. Mengimplementasikan INotifyPropertyChanged. Kelas Note sekarang mengimplementasikan antarmuka ini.

    // ↓ Update this. ↓
public class Note : INotifyPropertyChanged

  3. Buat field pendukung (_text) untuk properti Text.

    // ↓ Delete this. ↓
// public string Text { get; set; } = string.Empty;

// ↓ Add this. ↓
private string _text = string.Empty;

  4. Text Ubah properti untuk menggunakan pola getter/setter dengan pemberitahuan perubahan properti.

    // ↓ Add this. ↓
public string Text
{
    get => _text;
    set
    {
        if (_text != value)
        {
            _text = value;
            OnPropertyChanged();
        }
    }
}

  5. Tambahkan event PropertyChanged yang diperlukan oleh antarmuka INotifyPropertyChanged.

    // ↓ Add this. ↓
public event PropertyChangedEventHandler? PropertyChanged;

  6. Tambahkan metode OnPropertyChanged. Metode pembantu ini memicu event PropertyChanged menggunakan atribut CallerMemberName untuk pendeteksian nama properti secara otomatis.

    // ↓ Add this. ↓
protected void OnPropertyChanged([CallerMemberName] string? propertyName = null)
{
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

Tip

Anda dapat menggunakan GitHub Copilot untuk dengan cepat menerapkan INotifyPropertyChanged di aplikasi Anda. Perubahan kode ini dihasilkan dengan perintah: "Terapkan INotifyPropertyChanged untuk properti Note.Text".

Modus pengikatan

Text Sekarang properti akan memberi tahu elemen UI apa pun yang terikat padanya setiap kali nilainya berubah, sehingga UI Anda dapat diperbarui secara otomatis. Namun, agar elemen UI terikat bereaksi terhadap pemberitahuan pembaruan, Anda harus memastikan BindingMode yang benar digunakan.

Important

Penting untuk memilih BindingMode yang benar; jika tidak, pengikatan data Anda mungkin tidak berfungsi seperti yang diharapkan. (Kesalahan umum dengan {x:Bind} adalah lupa mengubah default BindingMode saat OneWay atau TwoWay diperlukan.)

Name Description
OneTime Memperbarui properti target hanya saat pengikatan dibuat. Default untuk {x:Bind}.
OneWay Memperbarui properti target saat pengikatan dibuat. Perubahan pada objek sumber juga dapat disebarluaskan ke target.
TwoWay Memperbarui target atau objek sumber saat berubah. Saat pengikatan dibuat, properti target diperbarui dari sumbernya.

Di AllNotesPage.xaml, temukan NoteItemTemplate di Page.Resources. Kemudian, dalam templat, temukan TextBlock yang terikat ke properti Text. Perbarui pengikatan untuk menggunakan OneWay mode pengikatan.

// ↓ Update this. ↓              ↓    ↓
<TextBlock Text="{x:Bind Text, Mode=OneWay}"
           Margin="4" TextWrapping="Wrap"
           TextTrimming="WordEllipsis"/>

Karena pengguna tidak dapat memperbarui teks di TextBlock, hanya binding OneWay yang diperlukan, dari sumber (Note.Text) ke tujuan (TextBlock.Text).

Pelajari selengkapnya di dokumen:

Lanjutkan ke langkah 2 - Lacak status catatan

  • Last updated on