Navigálás a lapok között

Az oktatóanyag ezen része hozzáadja az utolsó darabot az alkalmazáshoz, navigálás az összes jegyzetoldal és az egyes jegyzetoldal között.

Mielőtt bármilyen kódot írna az alkalmazáson belüli navigáció kezelésére, ismertesse a várt navigációs viselkedést.

Ebben AllNotesPagea fájlban található a meglévő jegyzetek gyűjteménye és egy Új jegyzet gomb.

Ha egy meglévő jegyzetre kattint, lépjen a jegyzetoldalra, és töltse be a kattintott jegyzetet.
Az Új jegyzet gombra kattintva lépjen a jegyzetoldalra, és töltsön be egy üres, nem mentett jegyzetet.

A jegyzetoldalon hozzáad egy vissza gombot, és vannak Mentés és törlés gomb.

A vissza gombra kattintva vissza kell lépnie az összes jegyzetoldalra, és el kell vetnie a jegyzet módosításait.
A Törlés gombra kattintva törölje a jegyzetet, majd lépjen vissza.

Új megjegyzés

Először egy új jegyzet navigációját fogja kezelni.

Jótanács

Az oktatóanyag kódját a GitHub-adattárból töltheti le vagy tekintheti meg. A jelen lépésben szereplő kód megtekintéséhez tekintse meg a következő véglegesítést: navigáció – új megjegyzés.

Az AllNotesPage.xaml fájlban keresse meg az AppBarButton új jegyzetet.
Adjon hozzá egy eseménykezelőt Click , és nevezze át a névre NewNoteButton_Click. (Ha emlékeztetőre van szüksége, tekintse meg az eseménykezelők hozzáadását a jegyzetoldali lépésben.)
```
<AppBarButton Icon="Add" Label="New note"
              Click="NewNoteButton_Click"/>
```

NewNoteButton_Click A metódusban (AllNotesPage.xaml.cs) adja hozzá a következő kódot:

private void NewNoteButton_Click(object sender, RoutedEventArgs e)
{
    // ↓ Add this. ↓
    Frame.Navigate(typeof(NotePage));
}

Minden lap rendelkezik egy Frame tulajdonságot, amely hivatkozik arra a Keretpéldányra , amelyhez az Page tartozik (ha van ilyen). Itt Frame ezt hívja meg a Navigate metódusnak. A Navigate metódus a használni kívánt lap típusát veszi át. Ezt c# formátumban kapja Type meg az typeof operátorral.

Ha most futtatja az alkalmazást, az Új jegyzet gombra kattintva navigálhat a jegyzetoldalra, és beírhatja a jegyzetszerkesztőbe. Ha azonban megpróbálja menteni a jegyzetet, semmi sem fog történni. Ennek az az oka, hogy a Note modell egy példánya még nem lett létrehozva a jegyzetoldalon. Most is ezt fogja tenni.

Nyissa meg a NotePage.xaml.cs.

Adjon hozzá kódot a lap OnNavigatedTo metódusának felülbírálásához.

public NotePage()
{
    this.InitializeComponent();
}
//  ↓ Add this. ↓
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    noteModel = new Note();
}

Most, amikor a következőre NotePagelép, létrejön a Note modell új példánya.

Meglévő jegyzetek

Most hozzáadja a navigációt a meglévő jegyzetekhez. Jelenleg, amikor a jegyzetre kattint a ItemsViewfájlban, a jegyzet ki van jelölve, de semmi sem történik. A legtöbb gyűjteményvezérlő alapértelmezett viselkedése egyetlen kijelölés, ami azt jelenti, hogy egyszerre egy elem van kijelölve. A módosítást úgy fogja elvégezni, hogy ahelyett ItemsView , hogy kijelöli, rákattinthat egy elemre, mint egy gombra.

Jótanács

Nyissa meg az AllNotesPage.xaml fájlt.
Frissítse az XAML-t a ItemsView = és az IsItemInvokedEnabled = True beállítással.

Adjon hozzá egy kezelőt az ItemInvoked eseményhez.

<ItemsView ItemsSource="{x:Bind notesModel.Notes}"
           Grid.Row="1" Margin="24" 
           ItemTemplate="{StaticResource NoteItemTemplate}"
           <!-- ↓ Add this. ↓ -->
           SelectionMode="None"
           IsItemInvokedEnabled="True"
           ItemInvoked="ItemsView_ItemInvoked">

A AllNotesPage.xaml.cs keresse meg a metódust ItemsView_ItemInvoked . (Ha a Visual Studio nem hozta létre Önnek, ami akkor fordulhat elő, ha a kódot másolja és illessze be, adja hozzá a következő lépéshez.)
A metódusban ItemsView_ItemInvoked adjon hozzá kódot, amelybe navigálhat NotePage. Ezúttal a Navigate metódus túlterhelését fogja használni, amely lehetővé teszi egy objektum átadását a másik lapra. Adja át a meghívást Note második navigációs paraméterként.
```
private void ItemsView_ItemInvoked(ItemsView sender, ItemsViewItemInvokedEventArgs args)
{
    Frame.Navigate(typeof(NotePage), args.InvokedItem);
}
```
Nyissa meg a NotePage.xaml.cs.
Frissítse a OnNavigatedTo metódus felülbírálását a Note hívás Navigateáltal átadott művelet kezeléséhez.
```
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    //  ↓ Update this. ↓
    if (e.Parameter is Note note)
    {
        noteModel = note;
    }
    else
    {
        noteModel = new Note();
    }
   // ↑ Update this. ↑
}
```
Ebben a kódban először ellenőrzi, hogy az átadott paraméter objektum-e Note . Ha igen, akkor az oldal modelljeként Note rendeli hozzá. Ha nem nullNote, hozzon létre egy újat Note , mint korábban.

Végül frissítenie kell az alkalmazást, hogy vissza navigáljon az egyes jegyzetekről az összes jegyzetoldalra.

A WinUI címsáv vezérlőelem tartalmaz egy vissza gombot, amely megfelel az elhelyezésre és megjelenésre vonatkozó Fluent Design-irányelveknek. Ezt a beépített gombot fogja használni a háttérnavigációhoz.

Nyissa meg a MainWindow.xaml fájlt.
Frissítse a TitleBar tulajdonsághoz kötött = True és IsBackButtonEnabled XAML értékét.
Adjon hozzá egy kezelőt a BackRequested eseményhez . Az XAML-nek így kell kinéznie:
```
<TitleBar x:Name="AppTitleBar"
          Title="WinUI Notes"
          IsBackButtonVisible="True"
          IsBackButtonEnabled="{x:Bind rootFrame.CanGoBack, Mode=OneWay}"
          BackRequested="AppTitleBar_BackRequested">
```
Itt az IsBackButtonVisible tulajdonság értéke true. Így a vissza gomb megjelenik az alkalmazásablak bal felső sarkában.

Ezután az IsBackButtonEnabled tulajdonság a Frame.CanGoBack tulajdonsághoz van kötve, így a vissza gomb csak akkor van engedélyezve, ha a keret vissza tud navigálni.

Végül hozzáadja a BackRequested eseménykezelőt. Itt nyitja meg a visszalépéshez szükséges kódot.
A MainWindow.xaml.cs adja hozzá ezt a kódot a AppTitleBar_BackRequested metódushoz:
```
private void AppTitleBar_BackRequested(TitleBar sender, object args)
{
    // ↓ Add this. ↓
    if (rootFrame.CanGoBack == true)
    {
        rootFrame.GoBack();
    }
    // ↑ Add this. ↑
}
```
Az Frame osztály nyomon követi a navigációt a BackStackben, így egyszerűen visszaléphet az előző oldalakra a GoBack metódus meghívásával. Ajánlott, hogy hívás előtt mindig ellenőrizze a GoBack tulajdonságot.

Ezután frissítenie kell a kódot NotePage a jegyzet törlése után visszalépéshez.

Nyissa meg a NotePage.xaml.cs.

Frissítse az DeleteButton_Click eseménykezelő metódust a metódus hívásával a Frame.CanGoBack jegyzet törlése után:

private async void DeleteButton_Click(object sender, RoutedEventArgs e)
{
    if (noteModel is not null)
    {
        await noteModel.DeleteAsync();
    }
    // ↓ Add this. ↓
    if (Frame.CanGoBack == true)
    {
        Frame.GoBack();
    }
    // ↑ Add this. ↑
}

Jótanács

Lehet, hogy észrevette , hogy a NotePagehívás során, miközben ön hívott Frame.GoBackMainWindow.rootFrame.GoBack Ennek az az oka, hogy a Lap osztálynak van egy Frame tulajdonsága , amely lekéri azokat Frame , amelyek a Page( ha vannak) elemet üzemeltetik. Ebben az esetben a hivatkozás a következőre lesz beolvasva rootFrame: .

Most már futtathatja az alkalmazást. 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-alkalmazás létrehozása oktatóanyagot!

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:

Visszacsatolás

Hasznos volt ez az oldal?

Last updated on 2025-09-03

Megosztás:

Navigálás a lapok között

Új megjegyzés

Meglévő jegyzetek

Háttérnavigáció

Következő lépések

Visszacsatolás

További források