Exercício: implementar navegação por guias

• 10 minutos

No aplicativo de astronomia, você foi encarregador de combinar guias com o submenu para ajudar na navegação entre as diferentes páginas.

A primeira coisa que você decide fazer é remover todas as páginas do submenu e adicioná-las a um TabBar para que possa ver como o aplicativo funciona.

Adicionando uma TabBar

1. Na janela do Gerenciador de Soluções, abra a página AppShell.xaml.

2. Na página de marcação XAML, exclua tudo que estiver dentro de <Shell>.

3. Crie um <TabBar> e um <Tab> vazio.

   <?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. Em seguida, adicione um ShellContent ao Tab e defina seu conteúdo como o MoonPhasePage.

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

5. Agora, dê à guia um título a ser exibido e um ícone usando as propriedades Title e Icon.

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

6. Adicione outro Tab para o SunrisePage. Defina Title para o nascer do sol e Icon para o sun.png. O XAML concluído terá esta aparência:

   <?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. Execute o aplicativo para ver a aparência dele.

   

Combinar páginas da guia com um submenu

Você decide que faz sentido ter as páginas de fase da lua e de nascer do sol na mesma página da guia. Também faz sentido manter a página sobre separada. Então, você decide adicionar o submenu de volta. O primeiro item do submenu exibe a página da guia e o segundo, a página sobre.

1. Exclua o TabBar e todos os itens filho contidos nele.

2. No lugar, adicione um <FlyoutItem>. Defina a propriedade Title como Astronomia e o ícone como moon.png.

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

3. Dentro de <FlyoutItem>, adicione um <ShellContent> que aponta para o MoonPhasePage. Defina sua propriedade Title como Fase da Lua e a propriedade Icon como moon.png.

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

4. No mesmo <FlyoutItem>, adicione outro <ShellContent> para apontar para o SunrisePage. Defina a propriedade Title como Nascer do sol e a propriedade Icon como 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>
   

   Agora, tocar nesse item de submenu exibe uma página da guia com duas guias.

5. Para criar um item de submenu que aponta para AboutPage, adicione um novo <FlyoutItem>. Defina sua propriedade Title como About e a propriedade Icon como question.png.

6. Dentro desse <FlyoutItem>, adicione um <ShellContent> que aponta para o AboutPage.

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

7. Execute o aplicativo novamente. Você deverá ver dois itens no submenu. O primeiro abre uma página da guia que contém MoonPhasePage e SunrisePage. O segundo exibirá o AboutPage.

Precisa de ajuda?

O código XAML final para AppShell.xaml deve ser semelhante a este exemplo:

<?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>