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

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

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

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

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

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

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

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

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

1. В AllNotesPage.xaml найдите AppBarButton новую заметку.

2. Добавьте обработчик событий Click и переименуйте его на NewNoteButton_Click. (См. шаг по добавлению обработчиков событий добавить на странице заметки, если вам потребуется напоминание о том, как это сделать.)

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

3. 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. Теперь вы сделаете это.

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

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

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

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

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

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

1. Откройте AllNotesPage.xaml.

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

3. Добавьте обработчик события 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. В AllNotesPage.xaml.cs найдите ItemsView_ItemInvoked метод. (Если Visual Studio не создали его для вас, что может произойти при копировании и вставке кода, добавьте его на следующем шаге.)

5. В методе ItemsView_ItemInvoked добавьте код для перехода к NotePage. На этот раз вы будете использовать перегрузку метода Navigate, которая позволяет передать объект на другую страницу. Передайте вызываемый Note в качестве второго параметра навигации.

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

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

7. Обновите переопределение метода 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 для страницы. Если это null или нет Note, создайте новый Note , как и раньше.

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

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

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

1. Откройте Файл MainWindow.xaml.

2. Обновите XAML для TitleBarобъекта IsBackButtonVisible = True и IsBackButtonEnabled , привязанного к свойству Frame.CanGoBack .

3. Добавьте обработчик события 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 . Здесь размещается код для навигации назад.

4. В 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, чтобы можно было вернуться после удаления заметки.

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

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

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

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

• Реализация навигации между двумя страницами
• журнал навигации и обратная навигация
• Класс Frame, класс Page

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

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

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

• Примеры и ресурсы
• Дизайн приложений для Windows
• Разработка настольных приложений для Windows
• Элементы управления для приложений Windows