A megjegyzés átadása navigációs paraméterként

Most, hogy a Note rendelkezik egy State-val, frissítse a navigációt úgy, hogy visszaadja azt a AllNotesPage számára, ahol a State alapján megfelelően kezelheti. Ez lehetővé teszi a navigációval kapcsolatos felhasználói élmény javítását is.

Tip

Szükség esetén tekintse át az első WinUI 3-alkalmazás létrehozását, 1. lépés – Navigáció. A módosítások végrehajtása előtt hasznos megérteni, hogyan van beállítva a navigáció.

Jelenleg minden visszanavigálás NotePage helyről vissza AllNotesPage helyre a Frame.GoBack egyszerű hívásával történik. A metódus azonban GoBack nem teszi lehetővé egy navigációs paraméter átadását. Ahhoz, hogy a Note elemet paraméterként átadhassa, a visszanavigálást előrenavigálásra kell cserélnie (Frame.Navigate). GoBack emellett nem ad hozzá bejegyzést a navigációs veremhez, ahogyan a továbbítási navigáció teszi, ezért a backstack kezelését kell elvégeznie, hogy megakadályozza a továbbítási navigáció hozzáadását.

Tip

Az oktatóanyag befejezett kódját a WinUI Notes 2. részében található GitHub adattárból töltheti le vagy tekintheti meg. A projekt kezdeti és végső állapota közötti különbségek megtekintéséhez lásd ezt a commitot: frissítések a 2. részhez.

OnNavigatingFrom

A(z) NotePage.cs elemben írja felül az OnNavigatingFrom metódust. Ez akkor hívódik meg, amikor a felhasználó megnyomja a Vissza gombot, és meghívódik a GoBack. Segítségével elfoghatja a navigációt, ellenőrizheti a megjegyzést State, és szükség esetén megszakíthatja a navigációt.

Ha a jegyzet nincs mentve, megszakítja a háttérnavigációt, és megjelenik egy párbeszédpanel, amely megkérdezi, hogy a felhasználó menteni szeretné-e a jegyzetet.

  • Ha a felhasználó menti a jegyzetet, hívja meg a SaveAsync-t, majd cserélje le a visszanavigációt egy Navigate hívással, amely átadja a jegyzetet a AllNotesPage számára.
  • Ha a felhasználó nem menti a módosításokat, a TextBox.Undo használatával visszavonhatja a módosításokat, alaphelyzetbe állíthatja a jegyzet állapotát, és újraindíthatja a háttérnavigációt.
// ↓ 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

Ezután módosítsa a törlés gombesemény Click kódját a következőben NotePage.xaml.cs: . Ahelyett, hogy egyszerűen törölné a jegyzetet, majd visszalépne, ellenőrizni fogja a jegyzet állapotát.

  • Ha az állapot – Unset ami azt jelenti, hogy a jegyzet újonnan lett létrehozva, nem rendelkezik módosításokkal, és nem lett mentve – egyszerűen lépjen vissza. Nem kell paraméterként megadnia a megjegyzést.
  • Ellenkező esetben törölje a jegyzetfájlt a fájlrendszerből, és adja vissza az Note objektumot navigációs paraméterként. Ezután AllNotesPage megkapja a(z) Note elemet a(z) Deleted állapotával, és tudni fogja, hogy törölnie kell a(z) Notes gyűjteményből.
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);
        }
    }
}

Mentés és bezárás

A felhasználónak jelenleg a jegyzet mentéséhez kell kattintania, majd a vissza nyílra kattintva bezárhatja a jegyzetoldalt, és visszaléphet a jegyzetgyűjteményhez. Ez a felület továbbfejleszthető azáltal, hogy lehetővé teszi a felhasználó számára, hogy egyetlen kattintással mentse és zárja be a jegyzetet. Ehhez a „Mentés” gombot egy „Mentés és bezárás” SplitButton vezérlőre cseréli, amelynek legördülő menüjében a csak mentés lehetőség is elérhető.

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

Adjon hozzá egy új eseménykezelőt a "Mentés és bezárás" gombeseményhez Click . Itt mentse a jegyzetet, majd küldje vissza a AllNotesPage számára navigációs paraméterként.

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

A navigációs paraméter kezelése az AllNotesPage-ben

A AllNotesPage elemben kezelnie kell a beérkező navigációs paramétert (Note), és szükség szerint hozzá kell adnia a Notes gyűjteményhez, vagy el kell távolítania abból.

A bejövő navigációs paraméter kezeléséhez felül kell bírálnia az OnNavigatedTo metódust az itt látható módon.

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

Most már futtathatja az alkalmazást, hogy lássa, hogyan működnek ezek a módosítások. Próbáljon meg új jegyzeteket hozzáadni, navigáljon oda-vissza a jegyzetek között, és törölje a jegyzeteket.

További információ a dokumentumokban:

Következő lépések

Gratulálok! Elvégezte a WinUI Notes 2. rész oktatóanyagát!

Az alábbi hivatkozások további információt nyújtanak a WinUI-val és a Windows App SDK-val történő alkalmazások létrehozásáról:

  • Last updated on