Exercício: implementar a navegação de submenu

No cenário de exemplo, você tem um aplicativo do .NET MAUI que contém páginas para exibir informações sobre corpos astronômicos, as fases da lua e os horários do nascer/do sol. O aplicativo também inclui uma página Sobre. Atualmente, essas páginas são autônomas. Mas você deseja fornecer uma maneira lógica para o usuário se mover entre elas.

Neste exercício, você adiciona a navegação de submenu ao aplicativo.

Este módulo usa o SDK do .NET 10.0. Verifique se você tem o .NET 10.0 instalado executando o seguinte comando em seu terminal de comando preferencial:

dotnet --list-sdks

Uma saída semelhante ao seguinte exemplo aparece:

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

Verifique se uma versão que começa com 10 está listada. Se nenhum estiver listado ou o comando não for encontrado, instale o SDK do .NET 10.0 mais recente.

Abrir a solução inicial

1. Clone ou baixe o repositório do exercício.

   Observação

   Recomendamos clonar ou baixar o conteúdo do exercício para um caminho de pasta curto, como C:\dev, para evitar que os arquivos gerados pelo build excedam o comprimento máximo do caminho.

2. Vá para a pasta exercise1 no repositório clonado e para a pasta start.

3. Use o Visual Studio para abrir a solução Astronomy.sln ou a pasta no Visual Studio Code.

4. Na janela Gerenciador de Soluções, no projeto Astronomy, expanda a pasta Pages. Esta pasta contém as seguintes páginas:

   • AboutPage. Esta página exibe informações sobre o aplicativo.
   • MoonPhasePage. Esta página exibe informações específicas sobre as fases da Lua, conforme visto da Terra.
   • SunrisePage. Esta página exibe os horários de nascer e pôr-do-sol para locais na Terra. Os dados são fornecidos pelo serviço Web Sunrise Sunset.

5. Compile e execute o aplicativo. Quando o aplicativo é iniciado, o MoonPhasePage é exibido. Mas atualmente não há meios fornecidos para permitir que o usuário navegue até as outras páginas.

   A seguinte imagem mostra o aplicativo em execução no emulador Android:

   

6. Feche o aplicativo e retorne ao Visual Studio ou ao Visual Studio Code.

Adicionar a navegação de submenu

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

2. No editor de marcação XAML, coloque um <ShellContent> ao redor de um item <FlyoutItem> existente. Defina a propriedade Title do item <Flyout> como Fase da Lua. A marcação deve ter esta aparência:

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

3. Adicione uma propriedade FlyoutIcon ao nó <Shell> para exibir uma imagem. Por padrão, ele exibirá três barras horizontais, mas podemos alterá-lo para o que quisermos. A marcação deve ter esta aparência:

   <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. Execute o aplicativo. Agora você deve ver uma imagem da lua no canto superior esquerdo do aplicativo.

   

   Toque no ícone e o submenu aparece.

   

5. Agora, adicione mais opções de submenu. Crie um novo <FlyoutItem> abaixo do que você acabou de fazer e defina seu Title como Nascer do sol. Seu ShellContent deve apontar para a página SunrisePage.

6. Adicione outro <FlyoutItem> e defina seu título em Sobre. Desta vez, defina ShellContent como AboutPage. O XAML para esses dois itens deve parecer assim:

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

7. Execute o aplicativo novamente e agora há três opções no submenu. Tocar no item de submenu exibe a página correspondente.

   

   Observação

   Se você estiver executando em uma plataforma diferente do Windows, talvez seja necessário habilitar a permissão de Localização do seu aplicativo na plataforma para que a página Horário do nascer do sol/pôr-do-sol funcione. Por exemplo, em um dispositivo Android, defina o acesso de Localização como Permitir somente durante o uso do aplicativo.

Adicionar ícones

Você pode ter notado que os itens do submenu parecem um pouco vazios. Você pode adicionar ícones aos itens do submenu usando a propriedade Icon.

Algumas imagens já foram adicionadas à pasta Recursos\Imagens para uso.

1. Defina a propriedade Icon do primeiro FlyoutItem como moon.png.

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

2. Repita para os outros dois itens de submenu, usando sun.png e question.png respectivamente.

   <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. Execute o aplicativo e abra o submenu. Cada item de submenu agora tem um ícone associado a ele.

   

Adicionar um cabeçalho do submenu

Os itens do submenu estão na parte superior do submenu, tornando-os difíceis de distinguir. Podemos adicionar um espaço na parte superior e até mesmo um View inteiro usando o <Shell.FlyoutHeader>.

1. Adicione um cabeçalho de submenu como elemento filho do nó <Shell>:

   <Shell.FlyoutHeader>
   </Shell.FlyoutHeader>
   

2. Você pode criar qualquer hierarquia de exibição que desejar dentro do <Shell.FlyoutHeader>. Vamos colocar um Grid com um Image.

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