Exercício: implementar a navegação de submenu
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 de nascer do sol/pôr 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 8.0. Verifique se você tem o .NET 8.0 instalado executando o seguinte comando em seu terminal de comando preferencial:
dotnet --list-sdks
Uma saída semelhante ao seguinte exemplo 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]
Verifique se 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.
Abrir a solução inicial
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.
Vá para a pasta exercise1 no repositório clonado e para a pasta start.
Use o Visual Studio para abrir a solução Astronomy.sln ou a pasta no Visual Studio Code.
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.
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:
Feche o aplicativo e retorne ao Visual Studio ou ao Visual Studio Code.
Adicionar a navegação de submenu
Na janela do Gerenciador de Soluções, abra a página AppShell.xaml.
No editor de marcação XAML, coloque um
<FlyoutItem>
ao redor de um item<ShellContent>
existente. Defina a propriedadeTitle
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>
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">
Execute o aplicativo. Agora você deve ver uma imagem da lua no canto superior esquerdo do aplicativo.
Toque no ícone e o submenu aparece.
Agora, adicione mais opções de submenu. Crie um novo
<FlyoutItem>
abaixo do que você acabou de fazer e defina seuTitle
como Nascer do sol. SeuShellContent
deve apontar para a páginaSunrisePage
.Adicione outro
<FlyoutItem>
e defina seu título em Sobre. Desta vez, definaShellContent
comoAboutPage
. 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>
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.
Defina a propriedade
Icon
do primeiroFlyoutItem
como moon.png.<FlyoutItem Title="Moon Phase" Icon="moon.png"> <ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" /> </FlyoutItem>
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>
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>
.
Adicione um cabeçalho de submenu como elemento filho do nó
<Shell>
:<Shell.FlyoutHeader> </Shell.FlyoutHeader>
Você pode criar qualquer hierarquia de exibição que desejar dentro do
<Shell.FlyoutHeader>
. Vamos colocar umGrid
com umImage
.<Shell.FlyoutHeader> <Grid HeightRequest="100" BackgroundColor="DarkSlateBlue"> <Image Source="moon.png" /> </Grid> </Shell.FlyoutHeader>