Partilhar via

Abas do Shell MAUI do .NET

Procurar exemplo. Procurar o exemplo

A experiência de navegação fornecida pelo .NET Multi-platform App UI Shell (.NET MAUI) baseia-se em flyouts e separadores. O nível superior de navegação numa aplicação Shell pode ser um flyout ou uma barra de separadores inferior, dependendo dos requisitos de navegação da aplicação. Quando a experiência de navegação de uma aplicação começa com abas inferiores, o filho do objeto subclassificado Shell deve ser um objeto TabBar, que representa a barra de abas inferior.

Um objeto TabBar pode conter um ou mais objetos Tab, com cada objeto Tab representando uma aba na barra inferior de guias. Cada Tab objeto pode conter um ou mais ShellContent objetos, com cada ShellContent objeto a exibir um único ContentPage. Quando há mais de um objeto ShellContent presente num objeto Tab, os objetos ContentPage podem ser navegados através de abas superiores. Dentro de um separador, pode navegar até outros ContentPage objetos conhecidos como páginas de detalhe.

Importante

O TabBar tipo desativa o flyout.

Sugestão

Os separadores podem ser exibidos com um flyout ao adicionar múltiplos objetos ShellContent a um objeto FlyoutItem ou objetos Tab. Para mais informações, consulte o flyout do .NET MAUI Shell.

Página única

Uma aplicação Shell de página única pode ser criada 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 na seguinte aplicação de página única:

Captura de ecrã de uma aplicação Shell de página única.

O Shell possui operadores de conversão implícita que permitem simplificar a hierarquia visual do Shell sem introduzir mais vistas na árvore visual. Esta simplificação é possível porque um objeto de Shell subclasse só pode conter FlyoutItem objetos ou um TabBar objeto, que só pode conter Tab objetos, que só pode conter ShellContent objetos. Estes 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>

Esta conversão implícita envolve automaticamente o ShellContent objeto num Tab objeto, que está envolto num TabBar objeto.

Importante

Numa aplicação Shell, as páginas são criadas a pedido em resposta à navegação. Isto é conseguido usando a DataTemplate extensão de marcação para definir a ContentTemplate propriedade de cada ShellContent objeto para um ContentPage objeto.

Separadores inferiores

Se houver vários Tab objetos num único TabBar objeto, os Tab objetos sã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 do separador. A Icon propriedade, do tipo ImageSource, define o ícone de tabulação:

Captura de ecrã de uma aplicação Shell com duas páginas e separadores inferiores.

Quando existem mais de cinco separadores num TabBar, aparece um separador Mais , que pode ser usado para aceder aos outros separadores:

Captura de ecrã de uma aplicação Shell com um separador Mais.

Além disso, os operadores de conversão implícita do Shell podem ser usados para remover os ShellContent objetos e Tab 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>

Esta conversão implícita envolve automaticamente cada ShellContent objeto num Tab objeto.

Importante

Numa aplicação Shell, as páginas são criadas a pedido em resposta à navegação. Atinge-se isto ao usar a extensão de marcação DataTemplate para definir a propriedade ContentTemplate de cada objeto ShellContent como um objeto ContentPage.

Abas inferiores e superiores

Quando há mais do que um ShellContent objeto presente num Tab objeto, uma barra de separador superior é adicionada ao separador inferior, através 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>

Este código resulta no layout mostrado na seguinte captura de ecrã:

Captura de ecrã de um aplicativo Shell com duas páginas, com separadores no topo e na parte 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>

Esta conversão implícita envolve automaticamente o terceiro ShellContent objeto num Tab objeto.

Aparência das abas

A Shell classe define as seguintes propriedades associadas que controlam o aspeto das tabulações:

  • TabBarBackgroundColor, do tipo Color, que define a cor de fundo da barra de abas. Se a propriedade estiver desdefinida, o BackgroundColor valor da propriedade é usado.
  • TabBarDisabledColor, do tipo Color, que define a cor desativada para a barra de separador. Se a propriedade estiver desdefinida, o DisabledColor valor da propriedade é usado.
  • TabBarForegroundColor, do tipo Color, que define a cor em primeiro plano para a barra de separador. Se a propriedade estiver desdefinida, o ForegroundColor valor da propriedade é usado.
  • TabBarTitleColor, do tipo Color, que define a cor do título para a barra de separador. Se a propriedade estiver desdefinida, o TitleColor valor da propriedade é usado.
  • TabBarUnselectedColor, do tipo Color, que define a cor não selecionada para a barra de abas. Se a propriedade estiver desdefinida, o UnselectedColor valor da propriedade é usado.

Todas estas propriedades são suportadas por BindableProperty objetos, o que significa que as propriedades podem ser alvo de ligações de dados e estilizadas.

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

  • Se apenas a TabBarTitleColor propriedade estiver definida, o seu valor será usado para colorir o título e o ícone do separador selecionado. Se TabBarTitleColor não estiver definida, então 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, então o valor da TabBarForegroundColor propriedade será usado para colorir o título e o ícone do separador selecionado.
  • Se apenas a TabBarUnselectedColor propriedade estiver definida, o seu valor será usado para colorir o título e o ícone do separador não selecionado.

Por exemplo:

  • Quando a TabBarTitleColor propriedade está definida para Green o título e o ícone do separador selecionado são verdes, e separadores não selecionados coincidem com as cores do sistema.
  • Quando a TabBarForegroundColor propriedade está definida para Blue o título, o ícone do separador selecionado é azul, e os separadores não selecionados coincidem com as cores do sistema.
  • Quando a TabBarTitleColor propriedade está definida para Green e a TabBarForegroundColor propriedade está definida para Blue , o título é verde e o ícone é azul para o separador selecionado, e os separadores não selecionados coincidem com as cores do sistema.
  • Quando a TabBarTitleColor propriedade está definida para Green e a Shell.ForegroundColor propriedade está definida para Blue , o título é verde e o ícone é azul para o separador selecionado, e os separadores não selecionados coincidem com as cores do sistema. Isto ocorre porque o valor da Shell.ForegroundColor propriedade propaga-se para a TabBarForegroundColor propriedade.
  • Quando a TabBarTitleColor propriedade está definida para Green, a TabBarForegroundColor propriedade é definida para Blue, e a TabBarUnselectedColor propriedade está definida para Red, o título é verde e o ícone é azul para o separador selecionado, e os títulos e ícones de separadores não selecionados são vermelhos.

O exemplo seguinte mostra um estilo XAML que define diferentes propriedades de cor na barra de separadores:

<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 tabulações também podem ser estilizadas usando Folhas de Estilo em Cascata (CSS). Para obter mais informações, consulte Propriedades específicas do .NET MAUI Shell.

Seleção de aba

Quando uma aplicação Shell que usa uma barra de separadores é executada pela primeira vez, a Shell.CurrentItem propriedade é definida para o primeiro Tab objeto do objeto subclassado Shell . No entanto, a propriedade pode ser definida para outra Tab, como mostrado no seguinte exemplo:

<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 CurrentItem propriedade para o ShellContent objeto chamado dogsItem, o que resulta na sua seleção e exibição. Neste exemplo, é usada uma conversão implícita para envolver cada ShellContent objeto num Tab objeto.

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

CurrentItem = dogsItem;

Neste exemplo, a CurrentItem propriedade está definida na classe subclassada Shell . Alternativamente, a CurrentItem propriedade pode ser definida em qualquer classe através 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 nas aplicações do Shell por defeito. No entanto, a barra de tabulação pode ser ocultada definindo a Shell.TabBarIsVisible propriedade associada para false.

Embora esta propriedade possa ser definida num objeto subclassado Shell, é geralmente definida em qualquer objeto ShellContent ou ContentPage que queira tornar a barra de separadores 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 separadores fica oculta quando o separador superior Cães está selecionado.

Além disso, Tab os objetos podem ser ocultos ao definir a IsVisible propriedade bindable 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, o segundo separador está oculto.

  • Last updated on