Упражнение. Реализация навигации по вкладкам

Завершено

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

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

Добавление TabBar

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

2. На странице разметки XAML удалите все элементы внутри <Shell>.

3. Создайте <TabBar> и пустой объект <Tab>.

   <?xml version="1.0" encoding="UTF-8" ?>
   <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">
   
       <TabBar>
           <Tab>
   
           </Tab>
       </TabBar>
   </Shell>
   

4. Затем добавьте в ShellContent его содержимое Tab и задайте его содержимое MoonPhasePage.

   <TabBar>
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" />
       </Tab>
   </TabBar>
   

5. Теперь присвойте вкладке заголовок для отображения и значок с помощью свойств Title и Icon.

   <Tab Title="Moon Phase" Icon="moon.png">
   

6. Добавьте еще один объект Tab для SunrisePage. Задайте для своего Title восхода и его sun.pngIcon. Готовый XAML выглядит следующим образом:

   <?xml version="1.0" encoding="UTF-8" ?>
   <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">  
   
       <TabBar>
           <Tab Title="Moon Phase" Icon="moon.png">
               <ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" />
           </Tab>
           <Tab Title="Sunrise" Icon="sun.png">
               <ShellContent ContentTemplate="{DataTemplate local:SunrisePage}"/>
           </Tab>
       </TabBar>
   </Shell>
   

7. Запустите приложение, чтобы увидеть, как оно выглядит.

   

Объединение вкладок со всплывающим элементом

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

1. TabBar Удалите все дочерние элементы, содержащиеся в нем.

2. А вместо этого добавьте <FlyoutItem>. Задайте для свойства Title значение Astronomy, а для icon — moon.png.

   <FlyoutItem Title="Astronomy" Icon="moon.png">
   
   </FlyoutItem>
   

3. <FlyoutItem>Добавьте в нее <ShellContent>значениеMoonPhasePage, указывающее на . Задайте для свойства Title значение Moon Phase, а для Icon — moon.png.

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

4. В том же <FlyoutItem>элементе добавьте еще один <ShellContent> , чтобы указать SunrisePageна объект . Задайте для свойства Title значение Sunrise, а для свойства Icon — sun.png.

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

   Теперь при нажатии на этот всплывающий элемент отображается страница вкладки с двумя вкладками.

5. Чтобы создать всплывающий элемент, указывающий на AboutPage, добавьте новый объект <FlyoutItem>. Задайте для свойства Title значение О программе, а для Icon — question.png.

6. В этом <FlyoutItem>случае добавьте объект, указывающий <ShellContent> на AboutPage.

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

7. Снова запустите приложение. Во всплывающем элементе должны появиться два элемента. Первый открывает страницу вкладок, содержащую MoonPhasePage и SunrisePage. Второй непосредственно отображает AboutPage.

Нужна помощь?

Окончательный код XAML для AppShell.xaml должен выглядеть следующим образом:

<?xml version="1.0" encoding="UTF-8" ?>
<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">

    <!-- You can add this back in for the header -->
    <!--<Shell.FlyoutHeader>
        <Grid HeightRequest="100" BackgroundColor="DarkSlateBlue">
            <Image Source="moon.png"/>
        </Grid>
    </Shell.FlyoutHeader>-->

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

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

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