Pestañas de shell de MAUI de .NET

Examinar el ejemplo

La experiencia de navegación proporcionada por .NET MAUI Shell está basada en menús desplegables y pestañas. El nivel superior de navegación en una aplicación de Shell es un menú desplegable o una barra de pestañas inferior, dependiendo de los requisitos de navegación de la aplicación. Cuando la experiencia de navegación de una aplicación comienza con pestañas inferiores, el elemento secundario del objeto con subclases Shell debe ser un TabBar objeto , que representa la barra de pestañas inferior.

Un TabBar objeto puede contener uno o varios Tab objetos, con cada Tab objeto que representa una pestaña en la barra de pestañas inferior. Cada Tab objeto puede contener uno o varios ShellContent objetos, donde cada ShellContent objeto muestra un solo ContentPage. Cuando hay más de un ShellContent objeto en un Tab objeto, los ContentPage objetos son navegables mediante las pestañas de la parte superior. Dentro de una pestaña, puede navegar a otros ContentPage objetos que se conocen como páginas de detalles.

Una página

Se puede crear una aplicación shell de página única agregando un Tab objeto a un TabBar objeto . Dentro del Tab objeto , un ShellContent objeto debe establecerse en un 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 ejemplo da como resultado la siguiente aplicación de página única:

Shell tiene operadores de conversión implícita que permiten simplificar la jerarquía visual de Shell sin introducir más vistas en el árbol visual. Esta simplificación es posible porque un objeto con subclases Shell solo puede contener FlyoutItem objetos o un TabBar objeto, que solo puede contener Tab objetos, que solo pueden contener ShellContent objetos. Estos operadores de conversión implícita se pueden usar para quitar los Tab objetos del ejemplo 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 conversión implícita envuelve automáticamente el ShellContent objeto en un Tab objeto, que se envuelve en un TabBar objeto.

Barra de pestañas inferior

Si hay varios Tab objetos en un único TabBar objeto, Tab los objetos se representan como pestañas 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>

La Title propiedad , de tipo string, define el título de la pestaña. La Icon propiedad , de tipo ImageSource, define el icono de pestaña:

Cuando hay más de cinco pestañas en un TabBar, aparece una pestaña Más , que se puede usar para acceder a las otras pestañas:

Además, los operadores de conversión implícita de Shell se pueden usar para quitar los ShellContent objetos y Tab del ejemplo 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 conversión implícita envuelve automáticamente cada objeto ShellContent dentro de un objeto Tab.

Pestañas inferiores y superiores

Cuando hay más de un ShellContent objeto en un Tab objeto, se agrega una barra de tabulación superior a la pestaña inferior, a través de la cual los ContentPage objetos se pueden navegar:

<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 da como resultado el diseño que se muestra en la captura de pantalla siguiente:

Además, los operadores de conversión implícita de Shell se pueden usar para quitar el segundo Tab objeto del ejemplo 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 conversión implícita envuelve automáticamente el tercer objeto ShellContent en un objeto Tab.

Apariencia de la pestaña

La Shell clase define las siguientes propiedades adjuntas que controlan la apariencia de las pestañas:

• TabBarBackgroundColor, de tipo Color, que define el color de fondo de la barra de pestañas. Si la propiedad no se establece, se usa el valor de la propiedad BackgroundColor.
• TabBarDisabledColor, de tipo Color, que define el color deshabilitado para la barra de pestañas. Si la propiedad no se establece, se usa el valor de la propiedad DisabledColor.
• TabBarForegroundColor, de tipo Color, que define el color de primer plano de la barra de pestañas. Si la propiedad no se establece, se usa el valor de la ForegroundColor propiedad.
• TabBarTitleColor, de tipo Color, que define el color del título de la barra de pestañas. Si la propiedad no está establecida, se utiliza el valor de la propiedad TitleColor.
• TabBarUnselectedColor, de tipo Color, que define el color no seleccionado para la barra de pestañas. Si la propiedad no se establece, se utiliza el valor de la propiedad UnselectedColor.

Todas estas propiedades están respaldadas por BindableProperty objetos, lo que significa que las propiedades pueden ser objetivos de vinculaciones de datos y pueden ser estilizadas.

Las tres propiedades que influyen más en el color de una pestaña son TabBarForegroundColor, TabBarTitleColory TabBarUnselectedColor:

• Si solo se establece la TabBarTitleColor propiedad, su valor se usará para colorear el título y el icono de la pestaña seleccionada. Si TabBarTitleColor no se establece, el color del título coincidirá con el valor de la TabBarForegroundColor propiedad .
• Si se establece la TabBarForegroundColor propiedad y la TabBarUnselectedColor propiedad no se establece, el valor de la TabBarForegroundColor propiedad se usará para colorear el título y el icono de la pestaña seleccionada.
• Si solo se establece la TabBarUnselectedColor propiedad, su valor se usará para colorear el título y el icono de la pestaña no seleccionada.

Por ejemplo:

• Cuando la TabBarTitleColor propiedad se establece en Green el título y el icono de la pestaña seleccionada es verde y las pestañas no seleccionadas coinciden con los colores del sistema.
• Cuando la TabBarForegroundColor propiedad se establece en Blue el título y el icono de la pestaña seleccionada es azul y las pestañas no seleccionadas coinciden con los colores del sistema.
• Cuando la TabBarTitleColor propiedad se establece Green en y la TabBarForegroundColor propiedad se establece en Blue el título es verde y el icono es azul para la pestaña seleccionada y las pestañas no seleccionadas coinciden con los colores del sistema.
• Cuando la TabBarTitleColor propiedad se establece Green en y la Shell.ForegroundColor propiedad se establece en Blue el título es verde y el icono es azul para la pestaña seleccionada y las pestañas no seleccionadas coinciden con los colores del sistema. Esto ocurre porque el valor de propiedad Shell.ForegroundColor se propaga a la TabBarForegroundColor propiedad .
• Cuando la TabBarTitleColor propiedad se establece Greenen , la TabBarForegroundColor propiedad se establece Blueen y la TabBarUnselectedColor propiedad se establece Reden , el título es verde y el icono es azul para la pestaña seleccionada y los títulos y los iconos de pestañas no seleccionados son rojos.

En el ejemplo siguiente se muestra un estilo XAML que establece diferentes propiedades de color de la barra de pestañas:

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

Además, las pestañas también se pueden estilizar mediante hojas de estilo en cascada (CSS). Para obtener más información, vea Propiedades específicas del shell maui de .NET.

Selección de pestañas

Cuando se ejecuta una aplicación shell que usa una barra de pestañas por primera vez, la Shell.CurrentItem propiedad se establece en el primer Tab objeto en el objeto de subclase Shell. Sin embargo, la propiedad se puede establecer en otra Tab, como se muestra en el ejemplo siguiente:

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

En este ejemplo se establece la CurrentItem propiedad en el ShellContent objeto denominado dogsItem, que da como resultado que se seleccione y se muestre. En este ejemplo, se usa una conversión implícita para encapsular cada ShellContent objeto en un Tab objeto .

El código de C# equivalente, dado un ShellContent objeto denominado dogsItem, es:

CurrentItem = dogsItem;

En este ejemplo, la CurrentItem propiedad se establece en la clase subclasada Shell . Como alternativa, la CurrentItem propiedad se puede establecer en cualquier clase a través de la Shell.Current propiedad estática:

Shell.Current.CurrentItem = dogsItem;

Visibilidad de TabBar y Pestañas

La barra de pestañas y las pestañas están visibles en las aplicaciones de Shell de forma predeterminada. Sin embargo, la barra de pestañas se puede ocultar estableciendo la Shell.TabBarIsVisible propiedad false adjunta en .

Aunque esta propiedad se puede establecer en un objeto con subclases Shell , normalmente se establece en cualquiera de los ShellContent objetos o ContentPage que quieran hacer invisible la barra de pestañas:

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

En este ejemplo, la barra de pestañas está oculta cuando se selecciona la pestaña Perros superiores.

Además, se pueden ocultar los Tab objetos estableciendo la propiedad enlazable IsVisible en 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>

En este ejemplo, la segunda pestaña está oculta.