Nawigowanie między stronami

Ta część samouczka dodaje ostatni element do aplikacji, nawigację między całą stroną notatek a pojedynczą stroną notatek .

Przed napisaniem kodu do obsługi nawigacji w aplikacji opiszmy oczekiwane zachowanie nawigacji.

W AllNotesPagesystemie znajduje się kolekcja istniejących notatek i przycisk Nowa notatka .

• Kliknięcie istniejącej notatki powinno przejść do strony notatki i załadować notatkę, która została kliknięta.
• Kliknięcie przycisku Nowa notatka powinno przejść do strony notatki i załadować pustą, niezapisaną notatkę.

Na stronie notatek dodasz przycisk Wstecz , a dostępne są przyciski Zapisz i Usuń .

• Kliknięcie przycisku Wstecz powinno wrócić do całej strony notatek, odrzucając wszelkie zmiany wprowadzone w notatce.
• Kliknięcie przycisku Usuń powinno usunąć notatkę, a następnie wrócić.

Nowa notatka

Najpierw będziesz zajmować się nawigacją dla nowej notatki.

1. W pliku AllNotesPage.xaml znajdź AppBarButton odpowiadający nowej notatce.

2. Dodaj procedurę obsługi zdarzeń Click i zmień jej nazwę na NewNoteButton_Click. (Zobacz Dodaj programy obsługi zdarzeń w kroku dotyczącym strony notatki, jeśli potrzebujesz przypomnienia, jak to zrobić.)

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

3. W metodzie NewNoteButton_Click (w AllNotesPage.xaml.cs) dodaj następujący kod:

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

Każda strona ma właściwość Frame , która zawiera odwołanie do wystąpienia ramki , do którego Page należy (jeśli istnieje). W tym Frame miejscu wywołasz metodę Navigate . Metoda Navigate pobiera typ strony, do której chcesz przejść. Uzyskasz to Type w języku C# przy użyciu typeof operatora .

Jeśli teraz uruchomisz aplikację, możesz kliknąć przycisk Nowa notatka , aby przejść do strony notatki i wpisać w edytorze notatek. Jeśli jednak spróbujesz zapisać notatkę, nic się nie stanie. Dzieje się tak, ponieważ instancja modelu Note nie została jeszcze utworzona na stronie notatek. Zrobisz to teraz.

1. Otwórz NotePage.xaml.cs.

2. Dodaj kod, aby zastąpić metodę OnNavigatedTo strony.

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

Teraz po przejściu do NotePage, zostanie utworzone nowe wystąpienie modelu Note.

Istniejące notatki

Teraz dodasz nawigację dla istniejących notatek. Obecnie, gdy klikniesz notatkę w ItemsView, notatka zostaje zaznaczona, ale nic się nie dzieje. Domyślne zachowanie większości kontrolek kolekcji to wybór pojedynczy, co oznacza, że jeden element jest wybierany jednocześnie. Zaktualizujesz ItemsView element tak, aby zamiast go wybierać, możesz kliknąć element podobny do przycisku.

1. Otwórz plik AllNotesPage.xaml.

2. Zaktualizuj kod XAML dla elementu ItemsView z ustawieniem SelectionMode = None i IsItemInvokedEnabled = True.

3. Dodaj procedurę obsługi dla zdarzenia ItemInvoked .

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

4. W AllNotesPage.xaml.cs znajdź metodę ItemsView_ItemInvoked . (Jeśli Visual Studio nie utworzył go dla Ciebie, co może się zdarzyć, jeśli skopiujesz i wklejesz kod, dodaj go w następnym kroku).

5. W metodzie ItemsView_ItemInvoked dodaj kod, aby przejść do NotePage. Tym razem użyjesz przeciążonej metody Navigate, która umożliwia przekazanie obiektu do drugiej strony. Przekaż wywołany Note parametr jako drugi parametr nawigacji.

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

6. Otwórz NotePage.xaml.cs.

7. Zaktualizuj metodę przesłonięcia OnNavigatedTo, aby obsłużyć Note, który jest przekazywany przez wywołanie Navigate.

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

   W tym kodzie najpierw sprawdzisz, czy przekazany parametr jest obiektem Note . Jeśli tak jest, przypiszesz go jako Note model dla strony. Jeśli to nie null lub nie Note, utwórz nowy Note tak jak poprzednio.

Nawigacja wstecz

Na koniec musisz zaktualizować aplikację, aby można było wrócić z pojedynczej notatki do strony wszystkich notatek.

Kontrolka WinUI 3 TitleBar zawiera przycisk Wstecz, który spełnia wszystkie wytyczne fluent design dotyczące umieszczania i wyglądu. Użyjesz tego wbudowanego przycisku do nawigacji wstecz.

1. Otwórz plik MainWindow.xaml.

2. Zaktualizuj kod XAML dla TitleBar, tak aby IsBackButtonVisible = True i IsBackButtonEnabled były powiązane z właściwością Frame.CanGoBack.

3. Dodaj procedurę obsługi dla zdarzenia BackRequested . Kod XAML powinien wyglądać następująco:

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

   W tym miejscu właściwość IsBackButtonVisible jest ustawiona na true. Dzięki temu przycisk Wstecz jest wyświetlany w lewym górnym rogu okna aplikacji.

   Następnie właściwość IsBackButtonEnabled jest powiązana z właściwością Frame.CanGoBack , więc przycisk Wstecz jest włączony tylko wtedy, gdy ramka może wrócić.

   Na koniec zostanie dodany obsługiwacz zdarzenia BackRequested. W tym miejscu należy umieścić kod w celu powrotu.

4. W MainWindow.xaml.cs dodaj ten kod do AppTitleBar_BackRequested metody :

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

   Klasa Frame śledzi nawigację w systemie BackStack, dzięki czemu możesz wrócić do poprzednich stron, wywołując metodę GoBack . Najlepszym rozwiązaniem jest zawsze sprawdzenie właściwości CanGoBack przed wywołaniem metody GoBack.

Następnie należy zaktualizować kod w sekcji NotePage, aby powrócić po usunięciu notatki.

1. Otwórz NotePage.xaml.cs.

2. Zaktualizuj metodę DeleteButton_Click obsługi zdarzeń za pomocą wywołania Frame.CanGoBack metody po usunięciu notatki:

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

Teraz możesz uruchomić aplikację. Spróbuj dodać nowe notatki, przechodzić między notatkami i usuwać notatki.

Dowiedz się więcej w dokumentacji:

• Implementowanie nawigacji między dwiema stronami
• Historia nawigacji i nawigacja wstecz
• Klasa ramek, Klasa strony

Dalsze kroki

Gratulacje! Ukończono samouczek Tworzenie aplikacji WinUI !

Poniższe linki zawierają więcej informacji na temat tworzenia aplikacji za pomocą interfejsu WinUI i Zestaw SDK do aplikacji systemu Windows:

• Przykłady i zasoby
• Design dla aplikacji Windows
• Twórz aplikacje komputerowe Windows
• Kontrolki dla aplikacji Windows