Упражнение. Использование страниц с вкладками вместе со страницами навигации

Завершено

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

Открытие решения для начала работы

1. Перейдите в папку упражнений3 в репозитории, клонированного в начале этого модуля, а затем перейдите в начальнуюпапку.

2. Используйте Visual Studio, чтобы открыть решение Astronomy.sln или папку в Visual Studio Code.

   Примечание.

   Это решение содержит страницы и стили, которые не входят в версию приложения, используемого в предыдущих упражнениях.

3. В окне Обозревателя решений откройте папку Pages. Помимо файлов MoonPhasePage, SunrisePage и AboutPage, эта папка содержит еще две страницы:

   • AstronomicalBodiesPage. Эта страница содержит четыре кнопки, позволяющие пользователю узнать сведения о Солнце, Луне, Земле или комете Галлея. Текущая версия приложения — это просто подтверждение концепции. В будущем эта страница позволяет пользователю выбирать из большего списка.

   • AstronomicalBodyPage. Эта страница используется для отображения сведений об астрономическом объекте.

Астрономические телаPage уже добавлены в виде вкладки на странице, которая отображается при щелчке всплывающего меню "Астрономия ".

Добавление маршрута для страницы сведений

1. Чтобы перейти к Астрономическому ОбъектуPage, необходимо настроить маршрут, зарегистрируя его в конструкторе класса AppShell :

   public AppShell()
   {
       InitializeComponent();
   
       Routing.RegisterRoute("astronomicalbodydetails", typeof(AstronomicalBodyPage));
   }
   

Переход на страницу сведений

1. Теперь необходимо выполнить навигацию. В AstronomicalBodiesPage.xaml.cs создайте обработчики событий щелчка для каждой Button страницы.

   public AstronomicalBodiesPage()
   {
       InitializeComponent();
   
       btnComet.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails");
       btnEarth.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails");
       btnMoon.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails");
       btnSun.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails");
   }
   

   При Button щелчке приложения перейдите на страницу "АстрономическийBodyPage ". Но нам по-прежнему нужно указать, какой тип тела будет отображаться.

2. Чтобы отправить данные в АстрономическийBodyPage, добавьте строку параметра запроса в сведения о маршрутизации. Строка имеет форму ?astroName=astroBodyToDisplay.

   btnComet.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=comet");
   btnEarth.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=earth");
   btnMoon.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=moon");
   btnSun.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=sun");
   

3. Чтобы получить данные в Астрономическом ОбъектеBodyPage, сначала создайте свойство уровня класса для хранения входящих данных. Назовите его AstroName.

   string astroName;
   public string AstroName
   {
       get => astroName;
       set
       {
           astroName = value;
   
           // this is a custom function to update the UI immediately
           UpdateAstroBodyUI(astroName);
       } 
   }
   

   Здесь используется вспомогательный компонент, UpdateAstroBodyUI(astroName) используемый для обновления пользовательского интерфейса сразу после AstroName установки свойства.

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

   [QueryProperty(nameof(AstroName), "astroName")]
   public partial class AstronomicalBodyPage
   { 
       ...
   }
   

5. Запустите приложение и выберите вкладку Bodies (Объекты).

6. Нажмите кнопку "Солнце ". Должны появиться сведения о Солнце. Панель навигации должна содержать стрелку назад, которая позволяет пользователю вернуться в список тел. Остальные вкладки по-прежнему видны и активны:

   

7. Закройте приложение и вернитесь в Visual Studio или Visual Studio Code.