Navigieren zwischen Seiten

In diesem Teil des Lernprogramms wird der App das letzte Element hinzugefügt, die Navigation zwischen der gesamten Notizenseite und der einzelnen Notizenseite .

Bevor Sie Code zur Behandlung der In-App-Navigation schreiben, beschreiben wir das erwartete Navigationsverhalten.

In AllNotesPage, gibt es die Sammlung vorhandener Notizen und eine Schaltfläche " Neue Notiz ".

• Wenn Sie auf eine vorhandene Notiz klicken, müssen Sie zur Notizseite navigieren und die Notiz laden, auf die geklickt wurde.
• Wenn Sie auf die Schaltfläche " Neue Notiz " klicken, sollten Sie zur Notizenseite navigieren und eine leere, nicht gespeicherte Notiz laden.

Auf der Notizseite fügen Sie eine Schaltfläche " Zurück " hinzu, und es gibt schaltflächen " Speichern " und "Löschen ".

• Wenn Sie auf die Schaltfläche "Zurück" klicken, sollte die Navigation zurück zur Seite "Alle Notizen" erfolgen und dabei alle an der Notiz vorgenommenen Änderungen verworfen werden.
• Durch Klicken auf die Schaltfläche "Löschen " sollte die Notiz gelöscht und dann zurück navigiert werden.

Neue Notiz

Zunächst werden Sie die Navigation für eine neue Notiz verwalten.

1. Suchen Sie in AllNotesPage.xaml nach AppBarButton einer neuen Notiz.

2. Fügen Sie einen Click Ereignishandler hinzu, und benennen Sie ihn in NewNoteButton_Click. (Weitere Informationen finden Sie unter Add-Ereignishandler im Schritt der Notizseite, wenn Sie eine Erinnerung benötigen, wie es zu tun ist.)

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

3. Fügen Sie in der NewNoteButton_Click Methode (in AllNotesPage.xaml.cs) den folgenden Code hinzu:

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

Jede Seite verfügt über eine Frame-Eigenschaft, die einen Verweis auf die Frame-Instanz bereitstellt, zu der sie (falls vorhanden) gehört. Dies ist das Frame , wo Sie die Navigate-Methode hier aufrufen. Die Navigate Methode verwendet den Typ der Seite, zu der Sie navigieren möchten. Sie erhalten dies Type in C# mithilfe des typeof Operators.

Wenn Sie die App jetzt ausführen, können Sie auf die Schaltfläche " Neue Notiz " klicken, um zur Notizseite zu navigieren, und Sie können in den Notiz-Editor eingeben. Wenn Sie jedoch versuchen, die Notiz zu speichern, geschieht nichts. Dies liegt daran, dass noch keine Instanz des Note Modells auf der Notizseite erstellt wurde. Das tun Sie jetzt.

1. Öffnen Sie NotePage.xaml.cs.

2. Fügen Sie Code hinzu, um die OnNavigatedTo-Methode der Seite außer Kraft zu setzen.

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

Wenn Sie nun zu NotePagenavigieren, wird eine neue Instanz des Note Modells erstellt.

Vorhandene Notizen

Jetzt fügen Sie die Navigation für vorhandene Notizen hinzu. Wenn Sie derzeit auf die Notiz in der ItemsView klicken, wird die Notiz ausgewählt, aber nichts geschieht. Das Standardverhalten für die meisten Sammlungssteuerelemente ist eine einzelne Auswahl, was bedeutet, dass jeweils ein Element ausgewählt wird. Sie aktualisieren die ItemsView Option so, dass Sie anstelle der Auswahl auf ein Element wie eine Schaltfläche klicken können.

1. Öffnen Sie AllNotesPage.xaml.

2. Aktualisieren Sie den XAML-Code für ItemsViewSelectionMode = None und IsItemInvokedEnabled = True.

3. Fügen Sie einen Handler für das ItemInvoked-Ereignis hinzu.

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

4. Suchen Sie in AllNotesPage.xaml.cs die ItemsView_ItemInvoked Methode. (Wenn Visual Studio es nicht für Sie erstellt hat, was passieren könnte, wenn Sie den Code kopieren und einfügen, fügen Sie ihn im nächsten Schritt hinzu.)

5. Fügen Sie Code in der ItemsView_ItemInvoked-Methode hinzu, um zu NotePage zu navigieren. Dieses Mal verwenden Sie eine Überladung der Navigate-Methode , mit der Sie ein Objekt an die andere Seite übergeben können. Übergeben Sie den aufgerufenen Note Parameter als zweiten Navigationsparameter.

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

6. Öffnen Sie NotePage.xaml.cs.

7. Aktualisieren Sie die OnNavigatedTo-Methodenüberschreibung, um den von dem Aufruf Note übergebenen Navigate zu behandeln.

   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. ↑
   }
   

   In diesem Code überprüfen Sie zunächst, ob der übergebene Parameter ein Note Objekt ist. Wenn es so ist, weisen Sie es als Note Modell der Seite zu. Wenn es sich bei null nicht um eine Note handelt, erstellen Sie wie zuvor eine neue Note.

Rückwärtsnavigation

Schließlich müssen Sie die App aktualisieren, damit Sie von einer einzelnen Notiz zur gesamten Notizenseite zurückkehren können.

Das WinUI 3 TitleBar-Steuerelement enthält eine Zurück-Schaltfläche, die alle Fluent Design-Richtlinien für Platzierung und Darstellung erfüllt. Sie verwenden diese integrierte Schaltfläche für die Rückwärtsnavigation.

1. Öffnen Sie "MainWindow.xaml".

2. Aktualisieren Sie den XAML-Code für TitleBarIsBackButtonVisible = True und IsBackButtonEnabled, indem Sie diese an die Eigenschaft Frame.CanGoBack binden.

3. Fügen Sie einen Handler für das BackRequested-Ereignis hinzu. Ihr XAML sollte wie folgt aussehen:

   <TitleBar x:Name="AppTitleBar"
             Title="WinUI Notes"
             IsBackButtonVisible="True"
             IsBackButtonEnabled="{x:Bind rootFrame.CanGoBack, Mode=OneWay}"
             BackRequested="AppTitleBar_BackRequested">
   

   Hier wird die IsBackButtonVisible-Eigenschaft auf truefestgelegt. Dadurch wird die Schaltfläche "Zurück" in der oberen linken Ecke des App-Fensters angezeigt.

   Anschließend ist die IsBackButtonEnabled-Eigenschaft an die Frame.CanGoBack-Eigenschaft gebunden, sodass die Zurück-Schaltfläche nur aktiviert ist, wenn der Frame zurück navigieren kann.

   Schließlich wird der BackRequested-Ereignishandler hinzugefügt. Hier platzieren Sie den Code, um zurück zu navigieren.

4. Fügen Sie in MainWindow.xaml.cs diesen Code der AppTitleBar_BackRequested Methode hinzu:

   private void AppTitleBar_BackRequested(TitleBar sender, object args)
   {
       // ↓ Add this. ↓
       if (rootFrame.CanGoBack == true)
       {
           rootFrame.GoBack();
       }
       // ↑ Add this. ↑
   }
   

   Die Frame Klasse verfolgt die Navigation im BackStack-Element, sodass Sie einfach durch Aufrufen der GoBack-Methode zurück zu vorherigen Seiten navigieren können. Es ist eine bewährte Methode, immer die CanGoBack-Eigenschaft zu überprüfen, bevor aufgerufen wird.

Als Nächstes müssen Sie den Code NotePage aktualisieren, um zurück zu navigieren, nachdem die Notiz gelöscht wurde.

1. Öffnen Sie NotePage.xaml.cs.

2. Aktualisieren Sie die DeleteButton_Click Ereignishandlermethode mit einem Aufruf der Frame.CanGoBack Methode, nachdem die Notiz gelöscht wurde:

   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. ↑
   }
   

Sie können Ihre App jetzt ausführen. 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

Glückwunsch! Sie haben das Lernprogramm zum Erstellen einer WinUI-App 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