Die Notiz als Navigationsparameter übergeben

Da Note nun über ein State verfügt, passen Sie die Navigation so an, dass es an AllNotesPage zurückgegeben wird, wo Sie es entsprechend seinem State weiterverarbeiten können. Dies bietet Ihnen auch die Möglichkeit, die Benutzererfahrung im Zusammenhang mit der Navigation zu verbessern.

Derzeit erfolgt die gesamte Navigation von NotePage zurück zu AllNotesPage mit einem einfachen Aufruf von Frame.GoBack. Die GoBack Methode erlaubt es Ihnen jedoch nicht, einen Navigationsparameter zu übergeben. Um einen Note Parameter als Parameter zu übergeben, müssen Sie die Rückwärtsnavigation durch eine Vorwärtsnavigation (Frame.Navigate) ersetzen. GoBack Fügt auch keinen Eintrag zum Navigationsstapel hinzu, z. B. eine Vorwärtsnavigation, sodass Sie den Backstack verwalten müssen, um zu verhindern, dass diese Vorwärtsnavigation hinzugefügt wird.

OnNavigatingFrom

Überschreiben Sie in NotePage.cs die Methode OnNavigatingFrom. Dies wird aufgerufen, nachdem der Benutzer die Zurück-Schaltfläche drückt und GoBack aufgerufen wird. Sie können die Navigation abfangen, die Notiz Stateüberprüfen und die Navigation bei Bedarf abbrechen.

Wenn die Notiz nicht gespeichert wird, brechen Sie die Rückwärtsnavigation ab und zeigen ein Dialogfeld an, in dem gefragt wird, ob der Benutzer die Notiz speichern möchte.

• Wenn der Benutzer die Notiz speichert, rufen Sie SaveAsync auf und ersetzen Sie dann die Zurück-Navigation durch einen Aufruf von Navigate, der die Notiz an AllNotesPage übergibt.
• Wenn der Benutzer seine Änderungen nicht speichert, verwenden Sie TextBox.Undo , um Bearbeitungen rückgängig zu machen, den Notizstatus zurückzusetzen und die Rückwärtsnavigation neu zu starten.

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

Ändern Sie als Nächstes den Code für das Ereignis Click "Schaltfläche löschen" in NotePage.xaml.cs. Anstatt die Notiz einfach zu löschen und zurück zu navigieren, überprüfen Sie den Notizstatus.

• Wenn der Status lautet Unset – was bedeutet, dass die Notiz neu erstellt wird, keine Bearbeitungen vorhanden ist und nicht gespeichert wurde – navigieren Sie einfach zurück. Sie müssen die Notiz nicht als Parameter übergeben.
• Löschen Sie andernfalls die Notizdatei aus dem Dateisystem, und übergeben Sie das Note Objekt als Navigationsparameter zurück. Dann erhält AllNotesPage das Note mit dessen Deleted-Zustand und weiß, dass es aus der Notes-Sammlung gelöscht werden muss.

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);
        }
    }
}

Speichern und schließen

Derzeit muss der Benutzer klicken, um eine Notiz zu speichern, und dann auf den Pfeil "Zurück" klicken, um die Notizenseite zu schließen und zur Notizensammlung zurückzukehren. Diese Benutzeroberfläche kann verbessert werden, indem der Benutzer die Notiz mit nur einem Klick speichern und schließen lässt. Dazu ersetzen Sie die Schaltfläche „Speichern“ durch ein „Speichern und schließen“-SplitButton mit einer Dropdown-Option, mit der Sie nur speichern können.

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

Fügen Sie einen neuen Ereignishandler für das Schaltflächenereignis Click "Speichern und schließen" hinzu. Hier speichern Sie die Notiz und übergeben sie dann als Navigationsparameter zurück AllNotesPage .

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

Behandeln des Navigationsparameters in AllNotesPage

In AllNotesPage müssen Sie den übergebenen Navigationsparameter (Note) behandeln und ihn nach Bedarf zur Notes-Sammlung hinzufügen oder aus ihr entfernen.

Um den eingehenden Navigationsparameter zu verarbeiten, überschreiben Sie die Methode OnNavigatedTo, wie hier gezeigt.

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

Jetzt können Sie Ihre App ausführen, um zu sehen, wie diese Änderungen funktionieren. Versuchen Sie, neue Notizen hinzuzufügen, zwischen Notizen zu navigieren und Notizen zu löschen.

Weitere Informationen finden Sie in den Dokumenten:

• Implementieren der Navigation zwischen zwei Seiten
• Navigationsverlauf und Rückwärtsnavigation
• Frame-Klasse, Page-Klasse

Nächste Schritte

Herzlichen Glückwunsch! Sie haben das Lernprogramm "WinUI Notes 2 " abgeschlossen!

Die folgenden Links enthalten weitere Informationen zum Erstellen von Apps mit WinUI und dem Windows App SDK:

• Beispiele und Ressourcen
• Design für Windows-Apps
• Entwickeln von Windows-Desktop-Apps
• Steuerelemente für Windows-Apps