Implementar navegação por guias com o Shell do .NET MAUI

A navegação em guias é um padrão de navegação no qual uma faixa de guias (uma linha de controles tocáveis) é permanentemente exibida na parte superior ou inferior da tela. A navegação por guias fornece um mecanismo para um usuário selecionar entre páginas em um aplicativo de várias páginas.

Nesta unidade, você aprende como criar um aplicativo que implementa a navegação por guia.

O que é navegação por guias?

Em um aplicativo que usa a navegação por guias, cada guia representa uma seção ou página específica do aplicativo. Os usuários selecionam as guias na faixa de guias para navegar pelo conteúdo do aplicativo. Por exemplo, a ilustração a seguir mostra o uso da navegação em guias no aplicativo Relógio do iOS. Os ícones realçados na parte inferior da página permitem você a alternar entre diferentes exibições. Esses ícones correspondem a guias, e os modos de exibição são páginas com guias:

Como a faixa de guias fica sempre visível, a navegação em guias permite aos usuários alternar rapidamente entre o conteúdo de um aplicativo. A navegação em guias é ideal quando um aplicativo tem várias seções que um usuário provavelmente usará com frequência. Os aplicativos de relógio são um ótimo exemplo. As seções relógio, alarme e cronômetro provavelmente serão usadas com frequência.

Em dispositivos móveis, a faixa de guias normalmente tem uma quantidade limitada de espaço e pode exibir apenas um número fixo de guias, dependendo do tamanho e da orientação do dispositivo. A recomendação é usar apenas de três a quatro guias. Se você incluir mais guias, não terá a garantia de ter espaço suficiente para mostrar todas as guias em todos os dispositivos. Os sistemas operacionais compatíveis com o .NET MAUI permitem uma área de excedentes. Essa área fornece mais áreas para acessar guias que não se ajustam à tela. No entanto, a navegação para essas guias de estouro exige etapas extras pelo usuário. Essas seções são menos detectáveis.

Caso você precise de mais de quatro guias, considere o uso de outro padrão de navegação, como a navegação do item do submenu. Além disso, a navegação por guia não será a melhor opção se os dados formarem uma hierarquia natural de detalhes mestre. Nesses casos, você deve considerar a navegação por pilha.

Navegação por guia em um aplicativo .NET MAUI

Você usa o objeto TabBar para implementar a navegação por guia em um aplicativo Shell .NET MAUI. O objeto TabBar exibe um conjunto de guias e alterna automaticamente o conteúdo exibido quando o usuário seleciona uma guia. A ilustração a seguir mostra as áreas da interface do usuário.

Para usar guias em um aplicativo Shell do .NET MAUI, crie uma instância da classe TabBarcomo um filho da classe Shell. Adicione objetos Tab ao TabBar. Dentro do objeto Tab, um objeto ShellContent deve ser definido como um objeto ContentPage.

Criar uma TabbedPage

Você pode criar uma instância TabBar como um filho da classe Shell. Adicione objetos Tab como filhos ao TabBar, conforme necessário. Dentro do objeto Tab, um objeto ShellContent deve ser definido como um objeto ContentPage.

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <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>

Guias em um menu de submenu

Um item de submenu pode abrir uma página com uma barra de guias que exibe uma ou mais guias.

Para implementar esse design, adicione um item <ShellContent> dentro do <FlyoutItem> para cada guia que você deseja exibir.

Defina Title e Icon no <ShellContent> para controlar o título e o ícone da guia.

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