Passer la note en tant que paramètre de navigation

Maintenant que le Note a un State, mettez à jour la navigation afin de le renvoyer à AllNotesPage, où vous pouvez le gérer de manière appropriée en fonction de son State. Cela vous donne également la possibilité d’améliorer l’expérience utilisateur liée à la navigation.

Conseil / Astuce

Si nécessaire, consultez Créez votre première application WinUI 3 : étape 1 - Navigation. Il est utile de comprendre comment la navigation est configurée avant d’apporter ces modifications.

Actuellement, l’ensemble de la navigation en arrière de NotePage vers AllNotesPage s’effectue avec un simple appel à Frame.GoBack. Toutefois, la GoBack méthode ne vous permet pas de passer un paramètre de navigation. Pour passer un Note paramètre, vous devez remplacer la navigation arrière par une navigation vers l’avant (Frame.Navigate). GoBack n’ajoute pas non plus d’entrée à la pile de navigation comme une navigation vers l’avant. Vous devez donc gérer la pile arrière pour empêcher l’ajout de cette navigation vers l’avant.

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.

OnNavigatingFrom

Dans NotePage.cs, redéfinissez la méthode OnNavigatingFrom. Cette méthode est appelée après que l’utilisateur a appuyé sur le bouton Retour et que GoBack est appelé. Il vous permet d’intercepter la navigation, de vérifier la note Stateet d’annuler la navigation si nécessaire.

Ici, si la note n’est pas enregistrée, vous annulez la navigation arrière et affichez une boîte de dialogue qui vous demande si l’utilisateur souhaite enregistrer la note.

  • Si l’utilisateur enregistre la note, appelez SaveAsync, puis remplacez la navigation arrière par un appel à Navigate ce qui transmet la note à AllNotesPage.
  • Si l’utilisateur n’enregistre pas ses modifications, utilisez TextBox.Undo pour annuler les modifications, réinitialiser l’état de la note et redémarrer la navigation arrière.
// ↓ 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

Ensuite, modifiez le code de l’événement du bouton Click Supprimer dans NotePage.xaml.cs. Au lieu de supprimer simplement la note et de revenir en arrière, vous allez vérifier l’état de la note.

  • Si l’état est Unset – ce qui signifie que la note vient d’être créée, n’a fait l’objet d’aucune modification et n’a pas été enregistrée – il vous suffit de revenir en arrière. Vous n’avez pas besoin de passer la note en tant que paramètre.
  • Sinon, supprimez le fichier de note dans le système de fichiers et renvoyez l’objet Note en tant que paramètre de navigation. Ensuite, AllNotesPage recevra le Note dans son état Deleted et saura le supprimer de la collection 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);
        }
    }
}

Enregistrer et fermer

Actuellement, l’utilisateur doit cliquer pour enregistrer une note, puis cliquer sur la flèche arrière pour fermer la page de notes et revenir à la collection de notes. Cette expérience peut être améliorée en permettant à l’utilisateur d’enregistrer et de fermer la note en un clic. Pour ce faire, vous allez remplacer le bouton « Enregistrer » par un bouton SplitButton « Enregistrer et fermer », avec une option dans la liste déroulante permettant simplement d’enregistrer.

<!-- ↓ 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>

Ajoutez un nouveau gestionnaire d’événements pour l’événement de bouton Click « Enregistrer et fermer ». Ici, vous enregistrez la note, puis vous la renvoyez à AllNotesPage comme paramètre de navigation.

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

Gérer le paramètre de navigation dans AllNotesPage

Dans AllNotesPage, vous devez gérer le paramètre de navigation entrant (Note) et l’ajouter à ou le supprimer de la Notes collection si nécessaire.

Pour gérer le paramètre de navigation entrant, remplacez la méthode OnNavigatedTo , comme illustré ici.

// ↓ 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();
    }
}

Vous pouvez maintenant exécuter votre application pour voir comment ces modifications fonctionnent. Essayez d’ajouter de nouvelles notes, de naviguer d’une note à l’autre et de supprimer des notes.

En savoir plus dans la documentation :

Étapes suivantes

Félicitations ! Vous avez terminé le didacticiel Notes WinUI partie 2 !

Les liens suivants fournissent plus d’informations sur la création d’applications avec WinUI et le SDK d'application Windows :

  • Last updated on