Anterior

Seguinte

Exercício: Implementar navegação de submenu

Concluído

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

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

Este módulo usa o SDK do .NET 8.0. Certifique-se de ter o .NET 8.0 instalado executando o seguinte comando no seu terminal de comando preferido:

dotnet --list-sdks

Saída semelhante ao exemplo a seguir aparece:

6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]

Certifique-se de que uma versão que começa com 8 está listada. Se nenhum estiver listado ou o comando não for encontrado, instale o SDK do .NET 8.0 mais recente.

Abra a solução inicial

1. Clone ou baixe o repositório de exercícios.

   Nota

   É melhor clonar ou baixar o conteúdo do exercício para um caminho de pasta curto, como C:\dev, para evitar que os arquivos gerados pela compilação excedam o comprimento máximo do caminho.

2. Vá para a pasta exercise1 no repositório clonado e, em seguida, vá para a pasta inicial.

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 Astronomia, expanda a pasta Páginas. Esta pasta contém as seguintes páginas:

   • SobrePage. Esta página exibe informações sobre o aplicativo.
   • MoonPhasePage. Esta página exibe informações específicas sobre as fases da Lua vistas da Terra.
   • Nascer do Sol. Esta página exibe os horários do 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 a aplicação. Quando o aplicativo é iniciado, a MoonPhasePage é exibida, mas atualmente não há meios fornecidos para permitir que o usuário navegue para as outras páginas.

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

   

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

Adicionar navegação de submenu

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

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

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

3. Adicione uma propriedade ao <Shell> nó para exibir uma FlyoutIcon imagem. Por padrão, ele exibe três barras horizontais, mas podemos alterá-lo para ser 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 a aplicação. Agora você deve ver uma imagem da lua no canto superior esquerdo do aplicativo.

   

   Toque no ícone e o submenu será exibido.

   

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

6. Adicione outro <FlyoutItem>, defina seu título como Sobre. Desta vez, defina o ShellContent para AboutPage. O XAML para esses dois itens deve ter esta aparência:

   <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 do submenu exibe sua respetiva página.

   

   Nota

   Se estiver a executar numa plataforma diferente do Windows, poderá ter de ativar a permissão de Localização para a sua aplicação nessa plataforma para que a página Sunrise/Sunset Times funcione. Por exemplo, em um dispositivo Android, defina Acesso à localização como Permitir somente enquanto estiver usando o aplicativo.

Adicionar ícones

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

Algumas imagens já foram adicionadas à pasta Resources\Images para você usar.

1. Defina a Icon propriedade do primeiro FlyoutItem para a lua .png.

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

2. Repita para os outros 2 itens do 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 do submenu agora tem um ícone associado a ele.

   

Adicionar um cabeçalho de submenu

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

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

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

   

Continuar