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ának kezelésével fog foglalkozni.

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: navigation – új megjegyzés.

  1. Az AllNotesPage.xaml fájlban keresse meg az új jegyzethez tartozó AppBarButton elemet.

  2. Adjon hozzá egy eseménykezelőt Click , és nevezze át a névre NewNoteButton_Click. (Ha emlékeztetőre van szüksége, lásd az eseménykezelők hozzáadását a jegyzetoldali lépésnél további részletekért.)

    <AppBarButton Icon="Add" Label="New note"
              Click="NewNoteButton_Click"/>

  3. 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 a Frame, amin meghívja a Navigate metódust. A Navigate metódus a használni kívánt lap típusát veszi át. Ezt C#-ban kapja meg a Type operátor használatával.

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.

  1. Nyissa meg a NotePage.xaml.cs.

  2. 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();
}

Amikor a NotePage-re navigál, létrejön a Note modell egy új példánya.

Meglévő jegyzetek

Most hozzáad navigációs lehetőséget 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

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: navigation – végleges alkalmazás.

  1. Nyissa meg az AllNotesPage.xaml fájlt.

  2. Frissítse az XAML-t a ItemsViewSelectionMode = None és az IsItemInvokedEnabled = True beállítással.

  3. 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">

  4. A AllNotesPage.xaml.cs fájlban keresse meg a ItemsView_ItemInvoked metódust. (Ha a Visual Studio nem hozta létre önnek, ami előfordulhat, ha másolja és beilleszti a kódot, adja hozzá a következő lépésben.)

  5. A ItemsView_ItemInvoked metódusban adjon hozzá olyan kódot, amely lehetővé teszi a navigálást a NotePage-ra. 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 megadott Note további navigációs paraméterként.

    private void ItemsView_ItemInvoked(ItemsView sender, ItemsViewItemInvokedEventArgs args)
{
    Frame.Navigate(typeof(NotePage), args.InvokedItem);
}

  6. Nyissa meg a NotePage.xaml.cs.

  7. Frissítse a OnNavigatedTo függvény felülírását a Note hívás által átadott Navigate kezelésére.

    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 hozzárendeli az oldal modelljeként a Note-t. Ha null vagy nem Note, hozzon létre egy Note-t ugyanúgy, mint korábban.

Háttérnavigáció

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

A WinUI 3 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.

  1. Nyissa meg a MainWindow.xaml fájlt.

  2. Frissítse a TitleBar XAML-t úgy, hogy az IsBackButtonVisible és az = tulajdonságokat a True tulajdonsághoz köti.

  3. 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 helyezi el a visszalépéshez szükséges kódot.

  4. 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. Mielőtt a hívásra kerülne sor, mindig ellenőrizze a GoBack tulajdonságot.

Ezután frissítenie kell a kódot NotePage a visszalépéshez, miután a jegyzetet törölték.

  1. Nyissa meg a NotePage.xaml.cs.

  2. 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 NotePage esetében a Frame.GoBack-t hívja, míg a MainWindow esetében a rootFrame.GoBack-t hívta. Ennek az az oka, hogy a Lap osztálynak van egy Frame tulajdonsága, amely lekéri a Frame elemet, amely a Page elemet üzemelteti, ha van ilyen. Ebben az esetben hivatkozást kap a(z) rootFrame elemre.

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!

Annak érdekében, hogy a dolgok egyszerűek maradjanak, és alapvető fogalmakat vezessenek be, ez az oktatóanyag az egyszerűségre és a hatékonyságra összpontosított, és a legalapvetőbb szintű funkciókat mutatta be. Így amíg az alkalmazás működik, van néhány dolog, ami javítható.

Javasoljuk, hogy folytassa az alábbi oktatóanyagok egyikét, hogy többet tudjon meg:

  • WinUI Notes 2. rész – A navigációval és az adatkötéssel kapcsolatos további funkciókat ismerteti. Az alkalmazást úgy fogja frissíteni, hogy hatékonyabban működjön, miközben megtartja ugyanazt az alapvető architektúrát.

    VAGY

  • Adatkötés, függőséginjektálás és egységtesztelés a WinUI-ban – Bemutatja, hogyan implementálhat adatkötést, függőséginjektálást és egységtesztelést a Model-View-ViewModel (MVVM) tervezési mintával. Az MVVM Toolkit használatával módosíthatja az alkalmazást és a modelleket.

  • Last updated on