Упражнение. Реализация навигации по всплывающим элементам

Завершено

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

В этом упражнении вы добавите всплывающее меню навигации в приложение.

Этот модуль использует пакет SDK для .NET 9.0. Убедитесь, что установлен .NET 9.0, выполнив следующую команду в предпочтительном терминале команд:

dotnet --list-sdks

Выходные данные, аналогичные следующему примеру, отображаются:

8.0.100 [C:\Program Files\dotnet\sdk]
9.0.100 [C:\Program Files\dotnet\sdk]

Убедитесь, что в списке есть версия, которая начинается с цифры 9. Если ни один из них отсутствует или команда не найдена, установите последний пакет SDK для .NET 9.0.

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

1. Клонируйте или скачайте репозиторий упражнения.

   Примечание.

   Рекомендуется клонировать или скачать содержимое упражнения по короткому пути к папке, например C:\dev, чтобы избежать превышения максимальной длины пути для созданных файлов.

2. Перейдите в папку exercise1 в клонированном репозитории, а затем перейдите в папку start.

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

4. В окне Обозреватель решений в проекте Astronomy разверните папку Pages. Эта папка содержит следующие страницы:

   • AboutPage. На этой странице отображаются сведения о приложении.
   • MoonPhasePage. На этой странице отображаются определенные сведения о фазах Луны.
   • SunrisePage. На этой странице отображается время восхода и захода Солнца для расположений на Земле. Эти данные предоставляются веб-службой Sunrise Sunset.

5. Выполните сборку и запустите приложение. При запуске приложения отображается страница MoonPhasePage, но в настоящее время у пользователя нет способа перейти на другие страницы.

   На следующем рисунке показано приложение, работающее в эмуляторе Android:

   

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

Добавление всплывающих элементов

1. В окне Обозревателя решений откройте страницу AppShell.xaml.

2. В редакторе разметки XAML заключите существующий элемент <ShellContent> в <FlyoutItem>. Задайте свойство Title элемента <Flyout> равным Moon Phase (Фаза Луны). Разметка должна выглядеть следующим образом:

   <FlyoutItem Title="Moon Phase">
       <ShellContent
           ContentTemplate="{DataTemplate local:MoonPhasePage}"/> 
   </FlyoutItem>
   

3. Добавьте свойство FlyoutIcon в узел <Shell> для отображения изображения. По умолчанию он отображает три горизонтальных полосы, но мы можем изменить его на то, что нам нравится. Разметка должна выглядеть следующим образом:

   <Shell
       x:Class="Astronomy.AppShell"
       xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:Astronomy.Pages"
       FlyoutIcon="moon.png">
   

4. Запустите приложение. Теперь в левом верхнем углу приложения должно появиться изображение Луны.

   

   Коснитесь значка, а всплывающий элемент появится.

   

5. Теперь добавьте другие всплывающие элементы. Создайте новый элемент <FlyoutItem> под созданным ранее и задайте для его параметра Title значение Sunrise (Восход). Параметр ShellContent должен указывать на страницу SunrisePage.

6. Добавьте еще один элемент <FlyoutItem>, задайте для его заголовка значение About (О программе). Задайте для параметра ShellContent значение AboutPage. XAML для этих двух элементов должен выглядеть следующим образом:

   <FlyoutItem Title="Sunrise">
       <ShellContent
           ContentTemplate="{DataTemplate local:SunrisePage}"/>
   </FlyoutItem>
   
   <FlyoutItem Title="About">
       <ShellContent
           ContentTemplate="{DataTemplate local:AboutPage}"/>
   </FlyoutItem>
   

7. Снова запустите приложение, и теперь в всплывающем элементе есть три варианта. Касание всплывающего элемента отображает соответствующую страницу.

   

   Примечание.

   Если вы работаете на платформе, отличной от Windows, вам может потребоваться включить разрешение на доступ к данным о местоположении для приложения на этой платформе, чтобы страница Sunrise/Sunset Times (Время восхода/захода) могла работать. Например, на устройстве Android задайте для доступа к данным о местоположении значение Разрешить только при использовании приложения.

Добавление значков

Возможно, вы заметили, что всплывающие элементы выглядят немного пустыми. С помощью свойства Icon можно добавлять значки во всплывающие элементы.

В папке Resources\Images уже есть изображения, которые можно использовать.

1. Задайте для свойства Icon первого элемента FlyoutItem значение moon.png.

   <FlyoutItem Title="Moon Phase" Icon="moon.png">
       <ShellContent
           ContentTemplate="{DataTemplate local:MoonPhasePage}" />
   </FlyoutItem>
   

2. Повторите эти действия для двух других элементов, используя значения sun.png и question.png соответственно.

   <FlyoutItem Title="Sunrise" Icon="sun.png">
       <ShellContent
           ContentTemplate="{DataTemplate local:SunrisePage}"/>
   </FlyoutItem>
   
   <FlyoutItem Title="About" Icon="question.png">
       <ShellContent
           ContentTemplate="{DataTemplate local:AboutPage}"/>
   </FlyoutItem>
   

3. Запустите приложение и откройте всплывающее меню. Каждый всплывающий элемент теперь имеет значок, связанный с ним.

   

Добавление заголовка всплывающего меню

Всплывающие элементы находятся в верхней части всплывающего меню, что затрудняет их различать. Мы можем добавить некоторое пространство в верхнюю часть и даже целый элемент View с помощью <Shell.FlyoutHeader>.

1. Добавьте всплывающий заголовок в качестве дочернего <Shell> элемента узла:

   <Shell.FlyoutHeader>
   </Shell.FlyoutHeader>
   

2. Вы можете создать любую иерархию представлений <Shell.FlyoutHeader>, которую вы хотите создать в пределах . Давайте поместим Grid и Image.

   <Shell.FlyoutHeader>
       <Grid HeightRequest="100" BackgroundColor="DarkSlateBlue">
           <Image Source="moon.png" />
       </Grid>
   </Shell.FlyoutHeader>