Переход между страницами

Эта часть руководства добавляет окончательный фрагмент в приложение, навигация между страницей всех заметок и отдельной страницей заметок .

Прежде чем писать любой код для обработки навигации в приложении, давайте опишите ожидаемое поведение навигации.

В AllNotesPageней есть коллекция существующих заметок и кнопка "Создать заметку ".

Щелкнув существующую заметку, перейдите на страницу заметок и загрузите заметку, которую щелкнули.
При нажатии кнопки "Создать заметку " перейдите на страницу заметок и загрузите пустую несохраняемую заметку.

На странице заметок вы добавите кнопку "Назад ", а кнопки "Сохранить " и "Удалить ".

Нажатие кнопки "Назад" должно вернуться на страницу всех заметок, отменив любые изменения, внесенные в заметку.
Нажмите кнопку "Удалить ", чтобы удалить заметку, а затем вернуться назад.

Новая заметка

Сначала вы будете обрабатывать навигацию для новой заметки.

Подсказка

Вы можете скачать или просмотреть код для этого руководства из репозитория GitHub. Чтобы увидеть код как на этом шаге, см. эту фиксацию: навигация — новая заметка.

В AllNotesPage.xaml найдите AppBarButton новую заметку.
Click Добавьте обработчик событий и переименуйте его NewNoteButton_Clickв . (См. раздел "Добавление обработчиков событий " на шаге страницы заметок, если вам потребуется напоминание о том, как это сделать.)
```
<AppBarButton Icon="Add" Label="New note"
              Click="NewNoteButton_Click"/>
```

NewNoteButton_Click В методе (в AllNotesPage.xaml.cs) добавьте следующий код:

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

Каждая страница имеет свойство Frame , которое предоставляет ссылку на экземпляр Frame , к которому Page принадлежит (при наличии). Это то, что вы вызываете Frame метод Navigate здесь. Метод Navigate принимает тип страницы, на которую вы хотите перейти. Вы получаете это Type в C# с помощью typeof оператора.

Если вы запускаете приложение сейчас, нажмите кнопку "Создать заметку ", чтобы перейти на страницу заметок, и вы можете ввести его в редактор заметок. Однако если вы попытаетесь сохранить заметку, ничего не произойдет. Это связано с тем, что экземпляр Note модели еще не создан на странице заметок. Теперь вы сделаете это.

Откройте NotePage.xaml.cs.

Добавьте код для переопределения метода OnNavigatedTo страницы.

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

    noteModel = new Note();
}

Теперь при переходе NotePageпо адресу создается новый экземпляр Note модели.

Существующие заметки

Теперь вы добавите навигацию для существующих заметок. В настоящее время при щелчке заметки в элементе ItemsViewвыбрана заметка, но ничего не происходит. Поведение по умолчанию для большинства элементов управления коллекцией является одним выделением, что означает, что один элемент выбирается одновременно. Вы обновите его ItemsView таким образом, чтобы вместо выбора его можно было щелкнуть элемент, например кнопку.

Подсказка

Вы можете скачать или просмотреть код для этого руководства из репозитория GitHub. Чтобы увидеть код как на этом шаге, см. эту фиксацию: навигация — окончательное приложение.

Откройте AllNotesPage.xaml.
Обновите XAML для ItemsViewпараметра SelectionMode = None и IsItemInvokedEnabled = True.

Добавьте обработчик события ItemInvoked .

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

В AllNotesPage.xaml.cs найдите ItemsView_ItemInvoked метод. (Если Visual Studio не создали его для вас, что может произойти, если вы скопируйте и вставьте код, добавьте его на следующем шаге.)
В методе ItemsView_ItemInvoked добавьте код для перехода к NotePage. На этот раз вы будете использовать перегрузку метода Navigate , которая позволяет передать объект на другую страницу. Передайте вызываемый Note в качестве второго параметра навигации.
```
private void ItemsView_ItemInvoked(ItemsView sender, ItemsViewItemInvokedEventArgs args)
{
    Frame.Navigate(typeof(NotePage), args.InvokedItem);
}
```
Откройте NotePage.xaml.cs.
OnNavigatedTo Обновите переопределение метода, чтобы обработать Note переданный вызовом 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. ↑
}
```
В этом коде сначала проверяется, является ли переданный Note объектом. Если это так, вы назначите ее в качестве Note модели для страницы. Если это null или нет Note, создайте новый Note , как и раньше.

Наконец, необходимо обновить приложение, чтобы вернуться из отдельной заметки на страницу всех заметок.

Элемент управления WinUI TitleBar включает кнопку "Назад", которая соответствует всем рекомендациям по проектированию Fluent для размещения и внешнего вида. Вы будете использовать эту встроенную кнопку для обратной навигации.

Откройте Файл MainWindow.xaml.
Обновите XAML для TitleBarобъекта IsBackButtonVisible = True и IsBackButtonEnabled , привязанного к свойству Frame.CanGoBack .
Добавьте обработчик события BackRequested . Код XAML должен выглядеть следующим образом:
```
<TitleBar x:Name="AppTitleBar"
          Title="WinUI Notes"
          IsBackButtonVisible="True"
          IsBackButtonEnabled="{x:Bind rootFrame.CanGoBack, Mode=OneWay}"
          BackRequested="AppTitleBar_BackRequested">
```
Здесь для свойства IsBackButtonVisible задано trueзначение . Это делает кнопку "Назад" в левом верхнем углу окна приложения.

Затем свойство IsBackButtonEnabled привязано к свойству Frame.CanGoBack , поэтому кнопка "Назад" включена только в том случае, если кадр может вернуться назад.

Наконец, добавляется обработчик событий BackRequested . Здесь вы помещаете код для возврата.
В MainWindow.xaml.cs добавьте этот код в AppTitleBar_BackRequested метод:
```
private void AppTitleBar_BackRequested(TitleBar sender, object args)
{
    // ↓ Add this. ↓
    if (rootFrame.CanGoBack == true)
    {
        rootFrame.GoBack();
    }
    // ↑ Add this. ↑
}
```
Класс Frame отслеживает навигацию в backStack, поэтому вы можете вернуться к предыдущим страницам, просто вызвав метод GoBack . Рекомендуется всегда проверять свойство CanGoBack перед вызовом GoBack.

Затем необходимо обновить код, NotePage чтобы вернуться после удаления заметки.

Откройте NotePage.xaml.cs.

DeleteButton_Click Обновите метод обработчика событий с вызовом Frame.CanGoBack метода после удаления заметки:

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

Подсказка

Возможно, вы заметили, что в NotePage, вы звоните Frame.GoBack, в то время как вы MainWindow позвонили rootFrame.GoBack. Это связано с тем, что класс Page имеет свойство Frame , которое получает Frame , которое размещает , если таковой Pageимеется. В этом случае он получает ссылку на rootFrame.

Теперь вы можете запустить приложение. Попробуйте добавить новые заметки, перейти между заметками и удалить их.

Дополнительные сведения см. в документации:

Дальнейшие шаги

Поздравляю! Вы завершили руководство по созданию приложения WinUI !

Следующие ссылки содержат дополнительные сведения о создании приложений с помощью WinUI и пакета SDK для приложений Windows:

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2025-09-03

Поделиться через

Переход между страницами

Новая заметка

Существующие заметки

Обратная навигация

Дальнейшие шаги

Обратная связь

Дополнительные ресурсы