Cache de navigation et notification de modification

La première étape consiste à effectuer la configuration de base pour les modifications que vous devez apporter :

  • activez le cache de navigation.
  • implémentez des notifications de modification de propriété pour la Note.Text propriété.

Une chose terminée, vous allez adapter d’autres parties de l’application pour qu’elles fonctionnent avec ces modifications.

Conseil / Astuce

Vous pouvez télécharger ou afficher le code terminé pour ce didacticiel à partir du dépôt GitHub dans la partie 2 des notes WinUI. Pour voir les différences entre les points de départ et d’arrivée du projet, consultez ce commit : mises à jour pour la partie 2.

Activer NavigationCacheMode

Par défaut, une nouvelle instance de page est créée avec ses valeurs par défaut chaque fois que la navigation se produit. Dans l’application Notes WinUI, il s’agit également de l’emplacement où est créé l’instance notesModel, qui stocke toutes les Note instances.

Dans AllNotesPage.xaml, définissez NavigationCacheModesur Activé (NavigationCacheMode="Enabled"). Une NavigationCacheMode fois activée, la même instance de page est conservée, de sorte qu’une nouvelle Page instance n’est pas créée sur chaque navigation et notesModel n’est pas recréé.

<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">

Exécutez l’application maintenant et vous remarquerez certains effets secondaires de cette modification.

  1. Lorsque vous modifiez une note existante, vos modifications ne sont pas reflétées dans la page toutes les notes lorsque vous revenez.
  2. Lorsque vous créez et enregistrez une nouvelle note, elle n’apparaît pas dans la liste de toutes les notes lorsque vous revenez.
  3. Lorsque vous supprimez une note existante, elle n’est pas supprimée de la liste de toutes les notes lorsque vous revenez.

Vous allez résoudre ces problèmes ensuite.

En savoir plus dans la documentation :

Implémenter INotifyPropertyChanged

Lorsque vous modifiez et enregistrez une note existante, votre modification est enregistrée dans le système de fichiers, mais la modification n’est pas propagée à la liste de toutes les notes. Cela est dû au fait que la Note classe n’avertit pas la liaison de données, qui connecte le TextBoxNote texte, qu’une mise à jour s’est produite. Pour que cette notification se produise, la Note classe doit implémenter l’interface INotifyPropertyChanged pour sa Text propriété.

Note

WinUI inclut l’interface Microsoft.UI.Xaml.Data.INotifyPropertyChanged. Cela est utilisé uniquement par les applications C++, qui n'utilisent pas .NET.

Les applications C# créées avec .NET utiliser l’interface System.ComponentModel.INotifyPropertyChanged à la place.

L’implémentation de INotifyPropertyChanged suit un modèle défini.

  1. Ajoutez des instructions using pour les espaces de noms requis.

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

  2. Implémentez INotifyPropertyChanged. La Note classe implémente maintenant cette interface.

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

  3. Créez un champ de stockage (_text) pour la Text propriété.

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

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

  4. Modifiez la Text propriété pour utiliser un modèle getter/setter avec notification de modification de propriété.

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

  5. Ajoutez l’événement PropertyChanged requis par l’interface INotifyPropertyChanged .

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

  6. Ajoutez la méthode OnPropertyChanged. Cette méthode d’assistance déclenche l’événement PropertyChanged à l’aide de l’attribut CallerMemberName pour la détection automatique du nom de propriété.

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

Conseil / Astuce

Vous pouvez utiliser GitHub Copilot pour implémenter INotifyPropertyChanged rapidement dans votre application. Ces modifications de code ont été générées à l’invite : « Implémenter INotifyPropertyChanged pour la propriété Note.Text ».

Mode de liaison

À présent, la Text propriété avertit tous les éléments d’interface utilisateur qui lui sont liés chaque fois que sa valeur change, afin que votre interface utilisateur puisse être mise à jour automatiquement. Toutefois, pour que les éléments d’interface utilisateur liés réagissent à la notification de mise à jour, vous devez vous assurer que le BindingMode correct est utilisé.

Important

Il est important de choisir le BindingMode correct ; sinon, votre liaison de données peut ne pas fonctionner comme prévu. (Une erreur courante avec {x:Bind} est d’oublier de modifier la valeur par défaut BindingMode quand OneWay ou TwoWay est nécessaire.)

Name Description
OneTime Met à jour la propriété cible uniquement lorsque la liaison est créée. Valeur par défaut pour {x:Bind}.
OneWay Met à jour la propriété cible lors de la création de la liaison. Les modifications apportées à l’objet source peuvent également se propager à la cible.
TwoWay Met à jour la cible ou l’objet source lorsque l’un ou l’autre change. Lorsque la liaison est créée, la propriété cible est mise à jour à partir de la source.

Dans AllNotesPage.xaml, recherchez le NoteItemTemplate dans Page.Resources. Ensuite, dans le modèle, recherchez l’élément TextBlock lié à la Text propriété. Mettez à jour la liaison afin d’utiliser le mode de liaison OneWay.

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

Étant donné que l’utilisateur ne peut pas mettre à jour le texte dans le TextBlock, seule une OneWay liaison est nécessaire, de la source (Note.Text) à la cible (TextBlock.Text).

En savoir plus dans la documentation :

Passer à l’étape 2 - Suivre l’état des notes

  • Last updated on