Passare la nota come parametro di navigazione

Ora che Note ha un State, aggiorna la navigazione per passarlo di nuovo a AllNotesPage, dove puoi gestirlo in modo appropriato in base al suo State. In questo modo è anche possibile migliorare l'esperienza utente correlata alla navigazione.

Suggerimento

Se necessario, vedere Creare la prima app WinUI 3, Passaggio 1 - Navigazione. È utile capire come è configurata la navigazione prima di apportare queste modifiche.

Attualmente, tutti gli spostamenti da NotePage indietro a AllNotesPage vengono eseguiti con una semplice chiamata a Frame.GoBack. Tuttavia, il GoBack metodo non consente di passare un parametro di navigazione. Per passare un oggetto Note come parametro, è necessario sostituire lo spostamento indietro con uno spostamento avanti (Frame.Navigate). GoBack inoltre non aggiunge un elemento allo stack di navigazione come avviene con una navigazione in avanti, quindi è necessario gestire lo stack di navigazione all’indietro per evitare che questa navigazione in avanti venga aggiunta.

Suggerimento

È possibile scaricare o visualizzare il codice completato di questa esercitazione dal repo GitHub WinUI Notes part 2. Per visualizzare le differenze tra i punti di inizio e di fine per il progetto, vedere questo commit: aggiornamenti per la parte 2.

OnNavigatingFrom

In NotePage.cs, eseguire l'override del metodo OnNavigatingFrom. Questo viene chiamato dopo che l'utente preme il pulsante Indietro e GoBack viene chiamato. Consente di intercettare la navigazione, verificare la nota State e annullare la navigazione, se necessario.

In questo caso, se la nota non viene salvata, si annulla lo spostamento indietro e viene visualizzata una finestra di dialogo che chiede se l'utente vuole salvare la nota.

  • Se l'utente salva la nota, chiamare SaveAsync, quindi sostituire lo spostamento indietro con una chiamata a Navigate che passa la nota a AllNotesPage.
  • Se l'utente non salva le modifiche, usa TextBox.Undo per annullare eventuali modifiche, reimpostare lo stato della nota e riavviare lo spostamento indietro.
// ↓ 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

Modifica quindi il codice per l'evento del pulsante di eliminazione Click in NotePage.xaml.cs. Invece di eliminare semplicemente la nota e tornare indietro, si verificherà lo stato della nota.

  • Se lo stato è Unset , ovvero la nota è appena creata, non ha modifiche e non è stato salvato, è sufficiente tornare indietro. Non è necessario passare la nota come parametro.
  • In caso contrario, eliminare il file di note dal file system e passare nuovamente l'oggetto Note come parametro di spostamento. Quindi AllNotesPage riceverà il Note con il suo stato Deleted e saprà di doverlo eliminare dalla raccolta 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);
        }
    }
}

Salva e chiudi

Attualmente, l'utente deve fare clic per salvare una nota, quindi fare clic sulla freccia indietro per chiudere la pagina della nota e tornare alla raccolta note. Questa esperienza può essere migliorata consentendo all'utente di salvare e chiudere la nota con un solo clic. Per farlo, sostituirai il pulsante "Salva" con un pulsante SplitButton "Salva e chiudi" con un'opzione nel menu a discesa per salvare soltanto.

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

Aggiungere un nuovo gestore dell'evento per l'evento del pulsante "Salva e chiudi" Click. In questo caso, salvare la nota e quindi passarla di nuovo a AllNotesPage come parametro di navigazione.

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

Gestire il parametro di spostamento in AllNotesPage

In AllNotesPageè necessario gestire il parametro di navigazione in ingresso (Note) e aggiungerlo o rimuoverlo dalla Notes raccolta in base alle esigenze.

Per gestire il parametro di spostamento in ingresso, eseguire l'override del metodo OnNavigatedTo , come illustrato di seguito.

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

È ora possibile eseguire l'app per verificare il funzionamento di queste modifiche. Provare ad aggiungere nuove note, spostarsi tra le note e eliminare le note.

Per altre informazioni, vedere la documentazione:

Passaggi successivi

Congratulazioni! Hai completato il tutorial WinUI Notes - parte 2!

I collegamenti seguenti forniscono altre informazioni sulla creazione di app con WinUI e sull'SDK per app di Windows:

  • Last updated on