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 obsługiwać nawigację dla nowej notatki.

Wskazówka

Możesz pobrać lub wyświetlić kod tego samouczka z repozytorium GitHub. Aby zobaczyć kod w tym kroku, zobacz to zatwierdzenie: nawigacja — nowa notatka.

W pliku AllNotesPage.xaml znajdź AppBarButton nową notatkę.
Dodaj procedurę obsługi zdarzeń Click i zmień jej nazwę na NewNoteButton_Click. (Jeśli potrzebujesz przypomnienia, jak to zrobić, zobacz Dodawanie programów obsługi zdarzeń w kroku notatek).
```
<AppBarButton Icon="Add" Label="New note"
              Click="NewNoteButton_Click"/>
```

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ż wystąpienie Note modelu nie zostało jeszcze utworzone na stronie notatek. Zrobisz to teraz.

Otwórz NotePage.xaml.cs.

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 NotePageusługi zostanie utworzone nowe wystąpienie Note modelu.

Istniejące notatki

Teraz dodasz nawigację dla istniejących notatek. Obecnie po kliknięciu ItemsViewnotatki w obiekcie jest zaznaczona notatka, 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.

Wskazówka

Możesz pobrać lub wyświetlić kod tego samouczka z repozytorium GitHub. Aby zobaczyć kod w tym kroku, zobacz to zatwierdzenie: nawigacja — ostateczna aplikacja.

Otwórz plik AllNotesPage.xaml.
Zaktualizuj kod XAML dla elementu ItemsViewza pomocą polecenia SelectionMode = None i IsItemInvokedEnabled = True.

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

W AllNotesPage.xaml.cs znajdź metodę ItemsView_ItemInvoked . (Jeśli program Visual Studio nie utworzył go dla Ciebie, co może się zdarzyć, jeśli skopiujesz i wklejesz kod, dodaj go w następnym kroku).
W metodzie ItemsView_ItemInvoked dodaj kod, aby przejść do NotePage. Tym razem użyjesz przeciążenia 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);
}
```
Otwórz NotePage.xaml.cs.
Zaktualizuj przesłonięć metodęOnNavigatedTo, aby obsłużyć Note metodę przekazaną przez wywołanie metody .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 jest null to element , Noteutwórz nowy Note , tak jak poprzednio.

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

Kontrolka WinUI 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.

Otwórz plik MainWindow.xaml.
Zaktualizuj kod XAML dla TitleBar właściwości IsBackButtonVisible = True i IsBackButtonEnabled z właściwością Frame.CanGoBack .
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 truewartość . 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 dodana procedura obsługi zdarzeń BackRequested . W tym miejscu należy umieścić kod w celu powrotu.
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 NotePage pliku , aby powrócić po usunięciu notatki.

Otwórz NotePage.xaml.cs.

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

Wskazówka

Być może zauważysz, że w metodze NotePagewywołasz Frame.GoBackmetodę , podczas gdy w MainWindow nazwie rootFrame.GoBack. Dzieje się tak, ponieważ klasa Page ma właściwość Frame , która pobiera Frame element hostujący Pageelement , jeśli istnieje. W takim przypadku pobiera odwołanie do rootFrameelementu .

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

Dowiedz się więcej w dokumentacji:

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 zestawu SDK aplikacji systemu Windows:

Sprzężenie zwrotne

Czy ta strona była pomocna?

Last updated on 2025-09-03

Udostępnij za pomocą

Nawigowanie między stronami

Nowa notatka

Istniejące notatki

Nawigacja wstecz

Dalsze kroki

Sprzężenie zwrotne

Dodatkowe zasoby