Compartilhar via

Abas do .NET MAUI Shell

Navegar na amostra. Navegar na amostra

A experiência de navegação fornecida pelo Shell da interface do usuário de aplicativo multiplataforma do .NET (.NET MAUI) é baseada em submenus e guias. O nível superior de navegação em um app Shell é um menu deslizante ou uma barra de guias inferior, dependendo dos requisitos de navegação do app. Quando a experiência de navegação de um aplicativo começa com guias inferiores, o filho do objeto subclasse Shell deve ser um TabBar objeto, que representa a barra de guias inferior.

Um TabBar objeto pode conter um ou mais Tab objetos, com cada Tab objeto representando uma guia na barra de guias inferior. Cada Tab objeto pode conter um ou mais ShellContent objetos, com cada ShellContent objeto exibindo um único ContentPage. Quando há mais de um ShellContent objeto presente em um Tab objeto, os ContentPage objetos são navegáveis por meio de abas superiores. Em uma guia, você pode navegar até outros ContentPage objetos que são conhecidos como páginas de detalhes.

Importante

O tipo TabBar desativa o flyout.

Dica

As guias podem ser exibidas com um painel suspenso ao adicionar vários objetos ShellContent a um objeto FlyoutItem ou Tab. Para obter mais informações, consulte o flyout do .NET MAUI Shell.

Página única

Um aplicativo Shell de página única pode ser criado adicionando um Tab objeto a um TabBar objeto. Dentro do Tab objeto, um ShellContent objeto deve ser definido como um ContentPage objeto:

<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>
           <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
       </Tab>
    </TabBar>
</Shell>

Este exemplo resulta no seguinte aplicativo de página única:

Captura de tela de um aplicativo de página única do Shell.

O Shell tem operadores de conversão implícita que permitem que a hierarquia visual do Shell seja simplificada sem introduzir mais exibições na árvore visual. Essa simplificação é possível porque um objeto subclasse Shell só pode conter FlyoutItem objetos ou um TabBar objeto, que só pode conter Tab objetos, que só podem conter ShellContent objetos. Esses operadores de conversão implícita podem ser usados para remover os Tab objetos do exemplo anterior:

<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">
    <Tab>
        <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
    </Tab>
</Shell>

Essa conversão implícita encapsula automaticamente o ShellContent objeto em um Tab objeto, que é encapsulado em um TabBar objeto.

Importante

Em um aplicativo Shell, as páginas são criadas sob demanda em resposta à navegação. Isso é realizado utilizando a extensão de marcação DataTemplate para configurar a propriedade ContentTemplate de cada objeto ShellContent para um objeto do tipo ContentPage.

Abas inferiores

Se houver vários Tab objetos em um único TabBar objeto, Tab objetos serão renderizados como abas inferiores:

<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="Cats"
            Icon="cat.png">
           <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
       </Tab>
       <Tab Title="Dogs"
            Icon="dog.png">
           <ShellContent ContentTemplate="{DataTemplate views:DogsPage}" />
       </Tab>
    </TabBar>
</Shell>

A Title propriedade, do tipo string, define o título da guia. A Icon propriedade, do tipo ImageSource, define o ícone de guia:

Captura de tela de um aplicativo Shell de duas páginas com guias inferiores.

Quando há mais de cinco guias em uma TabBar, uma guia Mais é exibida, que pode ser usada para acessar as outras guias:

Captura de tela de um aplicativo Shell com uma aba Mais.

Além disso, os operadores de conversão implícita do Shell podem ser usados para remover o ShellContent e Tab os objetos do exemplo anterior:

<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>
       <ShellContent Title="Cats"
                     Icon="cat.png"
                     ContentTemplate="{DataTemplate views:CatsPage}" />
       <ShellContent Title="Dogs"
                     Icon="dog.png"
                     ContentTemplate="{DataTemplate views:DogsPage}" />
    </TabBar>
</Shell>

Essa conversão implícita encapsula automaticamente cada ShellContent objeto em um Tab objeto.

Importante

Em um aplicativo Shell, as páginas são criadas sob demanda em resposta à navegação. Isso é feito usando a extensão de marcação DataTemplate para configurar a propriedade ContentTemplate de cada objeto ShellContent como um objeto ContentPage.

Abas inferior e superior

Quando mais de um ShellContent objeto está presente em um Tab objeto, uma barra de tabulação superior é adicionada à guia inferior, por meio da qual os ContentPage objetos são navegáveis:

<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="Domestic"
            Icon="paw.png">
           <ShellContent Title="Cats"
                         ContentTemplate="{DataTemplate views:CatsPage}" />
           <ShellContent Title="Dogs"
                         ContentTemplate="{DataTemplate views:DogsPage}" />
       </Tab>
       <Tab Title="Monkeys"
            Icon="monkey.png">
           <ShellContent ContentTemplate="{DataTemplate views:MonkeysPage}" />
       </Tab>
    </TabBar>
</Shell>

Esse código resulta no layout mostrado na seguinte captura de tela:

Captura de tela de um aplicativo shell de duas páginas com guias superior e inferior.

Além disso, os operadores de conversão implícita do Shell podem ser usados para remover o segundo Tab objeto do exemplo anterior:

<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="Domestic"
            Icon="paw.png">
           <ShellContent Title="Cats"
                         Icon="cat.png"
                         ContentTemplate="{DataTemplate views:CatsPage}" />
           <ShellContent Title="Dogs"
                         Icon="dog.png"
                         ContentTemplate="{DataTemplate views:DogsPage}" />
       </Tab>
       <ShellContent Title="Monkeys"
                     Icon="monkey.png"
                     ContentTemplate="{DataTemplate views:MonkeysPage}" />
    </TabBar>
</Shell>

Essa conversão implícita encapsula automaticamente o terceiro ShellContent objeto em um Tab objeto.

Aparência da guia

A Shell classe define as seguintes propriedades anexadas que controlam a aparência das guias:

  • TabBarBackgroundColor, do tipo Color, que define a cor de fundo para a barra de guias. Se a propriedade não for definida, o valor da propriedade BackgroundColor será usado.
  • TabBarDisabledColor, do tipo Color, que define a cor desabilitada para a barra de guias. Se a propriedade não for definida, o valor da propriedade DisabledColor será usado.
  • TabBarForegroundColor, do tipo Color, que define a cor do primeiro plano para a barra de guias. Se a propriedade não for definida, o valor da propriedade ForegroundColor será usado.
  • TabBarTitleColor, do tipo Color, que define a cor do título da barra de guias. Se a propriedade não for definida, o valor da propriedade TitleColor será usado.
  • TabBarUnselectedColor, do tipo Color, que define a cor não selecionada para a barra de guias. Se a propriedade não for definida, o valor da propriedade UnselectedColor será usado.

Todas essas propriedades são apoiadas por BindableProperty objetos, o que significa que as propriedades podem ser destinos de associações de dados e estilizadas.

As três propriedades que mais influenciam a cor de uma guia são TabBarForegroundColor, TabBarTitleColor e TabBarUnselectedColor:

  • Se apenas a TabBarTitleColor propriedade estiver definida, seu valor será usado para colorir o título e o ícone da guia selecionada. Se TabBarTitleColor não estiver definido, a cor do título corresponderá ao valor da TabBarForegroundColor propriedade.
  • Se a TabBarForegroundColor propriedade estiver definida e a TabBarUnselectedColor propriedade não estiver definida, o valor da TabBarForegroundColor propriedade será usado para colorir o título e o ícone da guia selecionada.
  • Se apenas a TabBarUnselectedColor propriedade estiver definida, seu valor será usado para colorir o título e o ícone da guia não selecionada.

Por exemplo:

  • Quando a TabBarTitleColor propriedade é definida como Green o título e o ícone da guia selecionada é verde e as guias não selecionadas correspondem às cores do sistema.
  • Quando a TabBarForegroundColor propriedade é definida como Blue o título e o ícone da guia selecionada é azul e as guias não selecionadas correspondem às cores do sistema.
  • Quando a TabBarTitleColor propriedade é definida para Green e a TabBarForegroundColor propriedade é definida para Blue, o título é verde e o ícone é azul para a guia selecionada, e as guias não selecionadas correspondem às cores do sistema.
  • Quando a propriedade TabBarTitleColor é definida como Green e a propriedade Shell.ForegroundColor é definida como Blue, o título fica verde e o ícone azul para a aba selecionada, enquanto as abas não selecionadas correspondem às cores do sistema. Isso ocorre porque o valor da Shell.ForegroundColor propriedade se propaga para a TabBarForegroundColor propriedade.
  • Quando a TabBarTitleColor propriedade é definida como Green, a TabBarForegroundColor propriedade é definida como Blue, e a TabBarUnselectedColor propriedade é definida como Red, o título é verde e o ícone é azul para a guia selecionada, e os títulos e ícones da guia não selecionada são vermelhos.

O exemplo a seguir mostra um estilo XAML que define propriedades de cores de barra de tabulação diferentes:

<Style TargetType="TabBar">
    <Setter Property="Shell.TabBarBackgroundColor"
            Value="CornflowerBlue" />
    <Setter Property="Shell.TabBarTitleColor"
            Value="Black" />
    <Setter Property="Shell.TabBarUnselectedColor"
            Value="AntiqueWhite" />
</Style>

Além disso, as guias também podem ser estilizadas usando CSS (Folhas de Estilo em Cascata). Para obter mais informações, consulte propriedades específicas do Shell do .NET MAUI.

Seleção de aba

Quando um aplicativo Shell que usa uma barra de guias é executado pela primeira vez, a Shell.CurrentItem propriedade é definida como o primeiro Tab objeto no objeto subclasse Shell . No entanto, a propriedade pode ser definida como outra Tab, conforme mostrado no exemplo a seguir:

<Shell ...
       CurrentItem="{x:Reference dogsItem}">
    <TabBar>
        <ShellContent Title="Cats"
                      Icon="cat.png"
                      ContentTemplate="{DataTemplate views:CatsPage}" />
        <ShellContent x:Name="dogsItem"
                      Title="Dogs"
                      Icon="dog.png"
                      ContentTemplate="{DataTemplate views:DogsPage}" />
    </TabBar>
</Shell>

Este exemplo define a propriedade CurrentItem para o objeto ShellContent nomeado dogsItem, o que resulta em sua seleção e exibição. Neste exemplo, uma conversão implícita é usada para encapsular cada ShellContent objeto em um Tab objeto.

O código C# equivalente, dado um ShellContent objeto chamado dogsItem, é:

CurrentItem = dogsItem;

Neste exemplo, a CurrentItem propriedade é definida na classe subclasse Shell . Como alternativa, a CurrentItem propriedade pode ser definida em qualquer classe por meio da Shell.Current propriedade estática:

Shell.Current.CurrentItem = dogsItem;

Visibilidade de TabBar e Tab

A barra de abas e as abas são visíveis por padrão em aplicativos Shell. No entanto, a barra de guias pode ser ocultada definindo a Shell.TabBarIsVisible propriedade anexada como false.

Embora essa propriedade possa ser definida em um objeto subclasse Shell , ela normalmente é definida em qualquer ShellContent objeto ou ContentPage objeto que deseja tornar a barra de tabulação invisível:

<TabBar>
   <Tab Title="Domestic"
        Icon="paw.png">
       <ShellContent Title="Cats"
                     ContentTemplate="{DataTemplate views:CatsPage}" />
       <ShellContent Shell.TabBarIsVisible="false"
                     Title="Dogs"
                     ContentTemplate="{DataTemplate views:DogsPage}" />
   </Tab>
   <Tab Title="Monkeys"
        Icon="monkey.png">
       <ShellContent ContentTemplate="{DataTemplate views:MonkeysPage}" />
   </Tab>
</TabBar>

Neste exemplo, a barra de guias fica oculta quando a guia Cães superiores é selecionada.

Além disso, Tab os objetos podem ser ocultos definindo a IsVisible propriedade associável como false:

<TabBar>
    <ShellContent Title="Cats"
                  Icon="cat.png"
                  ContentTemplate="{DataTemplate views:CatsPage}" />
    <ShellContent Title="Dogs"
                  Icon="dog.png"
                  ContentTemplate="{DataTemplate views:DogsPage}"
                  IsVisible="False" />
    <ShellContent Title="Monkeys"
                  Icon="monkey.png"
                  ContentTemplate="{DataTemplate views:MonkeysPage}" />
</TabBar>

Neste exemplo, a segunda guia está oculta.

  • Last updated on