Skicka anteckningen som en navigeringsparameter

Nu när Note har en State, uppdatera navigeringen så att den skickar tillbaka den till AllNotesPage, där du kan hantera den på lämpligt sätt baserat på dess State. Detta ger dig också möjlighet att förbättra användarupplevelsen i samband med navigering.

Tip

Om det behövs kan du läsa Skapa din första WinUI 3-app, Steg 1 – Navigering. Det är bra att förstå hur navigeringen konfigureras innan du gör dessa ändringar.

För närvarande är all navigering från NotePage tillbaka till AllNotesPage klar med ett enkelt anrop till Frame.GoBack. Metoden tillåter dock GoBack inte att du skickar en navigeringsparameter. För att kunna skicka en Note som en parameter måste du ersätta bakåtnavigering med en framåtriktad navigering (Frame.Navigate). GoBack lägger inte heller till någon post i navigeringsstacken som en framåtriktad navigering gör, så du måste hantera backstacken för att förhindra att den här navigeringen läggs till.

Tip

Du kan ladda ned eller visa den färdiga koden för den här självstudien från GitHub-repot med namnet WinUI Notes part 2. Om du vill se skillnaderna mellan projektets start- och slutpunkt, se denna commit: uppdateringar för del 2.

OnNavigatingFrom

I NotePage.cs åsidosätter du metoden OnNavigatingFrom. Detta anropas när användaren trycker på bakåtknappen och GoBack anropas. Du kan avlyssna navigeringen, kontrollera anteckningen State och avbryta navigeringen vid behov.

Om anteckningen inte sparas avbryter du navigeringen på baksidan och visar en dialogruta som frågar om användaren vill spara anteckningen.

  • Om användaren sparar anteckningen, anropa SaveAsync och ersätt sedan bakåtnavigeringen med ett anrop till Navigate som skickar vidare anteckningen till AllNotesPage.
  • Om användaren inte sparar sina ändringar använder du TextBox.Undo för att ångra eventuella ändringar, återställa anteckningstillståndet och starta om navigeringen på baksidan.
// ↓ 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

Ändra sedan koden för borttagningsknappens Click händelse i NotePage.xaml.cs. I stället för att bara ta bort anteckningen och navigera tillbaka kontrollerar du anteckningstillståndet.

  • Om tillståndet är Unset – vilket innebär att anteckningen har skapats nyligen, inte har några ändringar och inte har sparats – navigerar du bara tillbaka. Du behöver inte skicka anteckningen som en parameter.
  • Annars tar du bort anteckningsfilen från filsystemet och skickar Note tillbaka objektet som navigeringsparameter. Därefter kommer AllNotesPage att få Note i sitt Deleted-tillstånd och veta att den ska tas bort från Notes-samlingen.
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);
        }
    }
}

Spara och stäng

För närvarande måste användaren klicka för att spara en anteckning och sedan klicka på bakåtpilen för att stänga anteckningssidan och gå tillbaka till anteckningssamlingen. Den här upplevelsen kan förbättras genom att låta användaren spara och stänga anteckningen med ett klick. För att göra detta ersätter du knappen "Spara" med "Spara och stäng" SplitButton med ett listrutealternativ för att bara spara.

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

Lägg till en ny händelsehanterare för knapphändelsen Click "Spara och stäng". Här sparar du anteckningen och skickar den sedan tillbaka till AllNotesPage som navigeringsparameter.

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

Hantera navigeringsparametern i AllNotesPage

I AllNotesPagemåste du hantera den inkommande navigeringsparametern (Note) och lägga till den i eller ta bort den Notes från samlingen efter behov.

Om du vill hantera den inkommande navigeringsparametern åsidosätter du metoden OnNavigatedTo , som du ser här.

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

Nu kan du köra appen för att se hur dessa ändringar fungerar. Prova att lägga till nya anteckningar, navigera fram och tillbaka mellan anteckningar och ta bort anteckningar.

Läs mer i dokumenten:

Nästa steg

Grattis! Du har slutfört handledningen WinUI Notes part 2!

Följande länkar innehåller mer information om hur du skapar appar med WinUI och Windows App SDK:

  • Last updated on