Exercício: usar páginas com guias com páginas de navegação

Concluído

No aplicativo de astronomia, você foi solicitado a adicionar páginas que permitem que o usuário selecione diferentes corpos celestes e exiba os respectivos detalhes. Pode haver qualquer número de corpos, portanto, criar uma guia para cada corpo não é uma abordagem viável. Portanto, para permitir que o usuário selecione qual corpo exibir, você decide adicionar outra página que contém uma lista. O usuário pode selecionar um corpo dessa lista e o aplicativo exibe os detalhes desse corpo em uma nova página. A página de lista atua como uma página raiz para a navegação de pilha. Você adiciona a página de lista como uma guia na interface do usuário existente.

Abrir a solução inicial

1. Vá para a pasta exercise3 no repositório que você clonou no início deste módulo e, em seguida, vá para a pasta iniciar.

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

   Observação

   Essa solução contém páginas que não estão na versão do aplicativo que você usou nos exercícios anteriores.

3. Na janela Gerenciador de Soluções, abra a pasta Páginas. Além dos arquivos MoonPhasePage, SunrisePage e AboutPage, essa pasta contém mais duas páginas:

   • AstronomicalBodiesPage. Esta página contém quatro botões que permitem ao usuário selecionar os detalhes do Sol, da Lua, da Terra ou do Cometa Halley. A versão atual do aplicativo é simplesmente uma prova de conceito. No futuro, essa página permitirá que o usuário selecione em uma lista maior.

   • AstronomicalBodyPage. Esta página é usada para exibir as informações de um corpo astronômico.

A AstronomicalBodiesPage já foi adicionada como uma guia na página que aparece quando o submenu Astronomia é clicado.

Adicionar uma rota para a página de detalhes

1. Para navegar até AstronomicalBodyPage, você precisa configurar uma rota registrando-a no construtor de classe AppShell:

   public AppShell()
   {
       InitializeComponent();
   
       Routing.RegisterRoute("astronomicalbodydetails", typeof(AstronomicalBodyPage));
   }
   

Navegue até a página de detalhes

1. Agora precisamos executar a navegação. Em AstronomicalBodiesPage.xaml.cs, crie manipuladores de eventos de clique para cada Button na página.

   public AstronomicalBodiesPage()
   {
       InitializeComponent();
   
       btnComet.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails");
       btnEarth.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails");
       btnMoon.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails");
       btnSun.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails");
   }
   

   Sempre que um Button for clicado, o aplicativo navega até a página AstronomicalBodyPage. Mas ainda precisamos enviar que tipo de corpo astronômico exibir.

2. Para enviar dados para AstronomicalBodyPage, adicione uma cadeia de caracteres de parâmetro de consulta às informações de roteamento. A cadeia de caracteres é do formulário ?astroName=astroBodyToDisplay.

   btnComet.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=comet");
   btnEarth.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=earth");
   btnMoon.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=moon");
   btnSun.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=sun");
   

3. Para receber os dados em AstronomicalBodyPage, crie uma propriedade de nível de classe para armazenar os dados de entrada. Nomeie-o como AstroName.

   string astroName;
   public string AstroName
   {
       get => astroName;
       set
       {
           astroName = value;
   
           // this is a custom function to update the UI immediately
           UpdateAstroBodyUI(astroName);
       } 
   }
   

   Aqui, UpdateAstroBodyUI(astroName) é uma função auxiliar usada para atualizar a interface do usuário imediatamente quando a propriedade AstroName for definida.

4. Depois você precisa decorar a classe com uma anotação que mapeia o parâmetro de consulta de entrada para a propriedade que você criou.

   [QueryProperty(nameof(AstroName), "astroName")]
   public partial class AstronomicalBodyPage
   { 
       ...
   }
   

5. Inicie o aplicativo e selecione a guia intitulada: Corpos.

6. Clique no botão Sol. Os detalhes do Sol devem aparecer. A barra de navegação deve conter uma seta para voltar que permite que o usuário retorne à lista de corpos. As guias restantes ainda estão visíveis e ativas:

   

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