TabbedPage

.NET Multi-platform App UI (.NET MAUI) TabbedPage mantiene una colección de elementos secundarios de tipo Page, solo uno de los cuales es totalmente visible cada vez. Cada niño se identifica mediante una serie de pestañas en la parte superior o inferior de la página. Normalmente, cada elemento secundario será ContentPage y cuando se seleccione su pestaña, se mostrará el contenido de la página.

TabbedPage define las siguientes propiedades:

• BarBackground, de tipo Brush, define el fondo de la barra de pestañas.
• BarBackgroundColor, de tipo Color, define el color de fondo de la barra de pestañas.
• BarTextColor, de tipo Color, representa el color del texto en la barra de pestañas.
• SelectedTabColor, de tipo Color, indica el color de una pestaña cuando está seleccionado.
• UnselectedTabColor, de tipo Color, representa el color de una pestaña cuando no está seleccionado.

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y que se les puede aplicar un estilo.

El título de una pestaña se define mediante la Page.Title propiedad de la página secundaria y el icono de pestaña se define mediante la Page.IconImageSource propiedad de la página secundaria.

En TabbedPage, cada objeto Page se crea cuando se construye TabbedPage. Esto puede provocar una experiencia de usuario deficiente, especialmente si la TabbedPage es la página raíz de la aplicación. Sin embargo, el shell de MAUI de .NET permite crear páginas a través de una barra de pestañas a petición, en respuesta a la navegación. Para obtener más información sobre las aplicaciones de Shell, consulte shell.

Advertencia

TabbedPage no es compatible con las aplicaciones Shell de .NET MAUI y se producirá una excepción si intenta usar TabbedPage en una aplicación Shell.

Crear un TabbedPage

Se pueden usar dos enfoques para crear un TabbedPage:

• Rellene el TabbedPage con una colección de objetos secundarios Page, como una colección de objetos ContentPage. Para más información, consulta Rellenar una TabbedPage con una colección de páginas.
• Asigne una colección a la ItemsSource propiedad y asigne un DataTemplate a la ItemTemplate propiedad, para proporcionar páginas relacionadas con los objetos de la colección. Para obtener más información, vea Rellenar un tabbedPage con una clase DataTemplate.

Importante

Un TabbedPage solo debe llenarse con objetos NavigationPage y ContentPage.

Independientemente del enfoque adoptado, la ubicación de la barra de pestañas de un TabbedPage elemento depende de la plataforma:

• En iOS, la lista de pestañas aparece en la parte inferior de la pantalla y el contenido de la página está encima. Cada pestaña consta de un título y un icono. En orientación vertical, los iconos de la barra de pestañas aparecen encima de los títulos de pestañas. En la orientación horizontal, los iconos y los títulos aparecen en paralelo. Además, se puede mostrar una barra de pestañas normal o compacta, en función del dispositivo y la orientación. Si hay más de cinco pestañas, aparecerá una pestaña Más , que se puede usar para acceder a las pestañas adicionales.
• En Android, la lista de pestañas aparece en la parte superior de la pantalla y el contenido de la página está a continuación. Cada pestaña consta de un título y un icono. Sin embargo, las pestañas se pueden mover a la parte inferior de la pantalla con una propiedad específica de la plataforma. Si hay más de cinco pestañas y la lista de pestañas está en la parte inferior de la pantalla, aparecerá una pestaña Más que se puede usar para acceder a las pestañas adicionales. Para obtener información sobre cómo mover las pestañas a la parte inferior de la pantalla, consulte Ubicación de la barra de herramientas tabbedPage en Android.
• En Windows, la lista de pestañas aparece en la parte superior de la pantalla y el contenido de la página está a continuación. Cada pestaña consta de un título.

Relleno de un elemento TabbedPage con una colección de páginas

Un TabbedPage puede ser rellenado con una colección de objetos hijo Page, que normalmente serán objetos ContentPage. Esto se logra agregando ContentPage objetos como hijos del TabbedPage.

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:TabbedPageWithNavigationPage"
            x:Class="TabbedPageWithNavigationPage.MainPage">
    <local:TodayPage />
    <local:SchedulePage />
    <local:SettingsPage />
</TabbedPage>

Page Los objetos que se agregan como elementos secundarios de TabbedPage se agregan a la Children colección. La propiedad Children de la clase MultiPage<T>, de la cual TabbedPage deriva, es el ContentProperty de MultiPage<T>. Por lo tanto, en XAML no es necesario asignar explícitamente los Page objetos a la Children propiedad .

En la captura de pantalla siguiente se muestra la apariencia de la barra de pestañas resultante en :TabbedPage

El contenido de la página de una pestaña aparece cuando se selecciona la pestaña.

Rellenar un TabbedPage con un DataTemplate

TabbedPage ItemsSource hereda ItemTemplate, SelectedItem y las propiedades enlazables de la clase MultiPage<T>. Estas propiedades permiten generar elementos TabbedPage secundarios dinámicamente estableciendo la propiedad ItemsSource en una colección IEnumerable de objetos con propiedades públicas adecuadas para enlaces de datos y estableciendo la propiedad ItemTemplate en DataTemplate con un tipo de página como elemento raíz.

En el ejemplo siguiente se muestra la generación dinámica de elementos TabbedPage secundarios:

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:TabbedPageDemo"
            x:Class="TabbedPageDemo.MainPage"
            ItemsSource="{x:Static local:MonkeyDataModel.All}"
            x:DataType="local:Monkey">
    <TabbedPage.ItemTemplate>
        <DataTemplate>
            <ContentPage Title="{Binding Name}"
                         IconImageSource="monkeyicon.png">
                <StackLayout Padding="5, 25">
                    <Label Text="{Binding Name}"
                           FontAttributes="Bold"
                           FontSize="18"
                           HorizontalOptions="Center" />
                    <Image Source="{Binding PhotoUrl}"
                           HorizontalOptions="Center"
                           WidthRequest="200"
                           HeightRequest="200" />
                    <StackLayout Padding="50, 10">
                        <StackLayout Orientation="Horizontal">
                            <Label Text="Family: "
                                   FontAttributes="Bold" />
                            <Label Text="{Binding Family}" />
                        </StackLayout>
                        ...
                    </StackLayout>
                </StackLayout>
            </ContentPage>
        </DataTemplate>
    </TabbedPage.ItemTemplate>
</TabbedPage>

En este ejemplo, cada pestaña consta de un ContentPage objeto que usa Image y Label objetos para mostrar datos en la pestaña.

Mostrar distintivos en pestañas

En .NET 11, se puede mostrar un distintivo en cada página secundaria de un TabbedPage. Establece las siguientes propiedades adjuntas en la página secundaria:

• TabbedPage.BadgeText, de tipo string, es el texto que se muestra en el distintivo. Configúrelo con un valor no vacío para mostrar texto, con una cadena vacía para mostrar un punto o con null para ocultar la insignia. El valor por defecto es null.
• TabbedPage.BadgeColor, de tipo Color, es el color de fondo del distintivo. Cuando esta propiedad es null, se usa el color predeterminado de la plataforma.
• TabbedPage.BadgeTextColor, de tipo Color, es el color del texto de la insignia. Cuando esta propiedad es null, se usa el color predeterminado de la plataforma.

En el ejemplo siguiente se muestra un distintivo en la pestaña Bandeja de entrada :

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="TabbedPageDemo.MainPage">
    <ContentPage x:Name="inboxPage"
                 Title="Inbox"
                 IconImageSource="inbox.png"
                 TabbedPage.BadgeText="3"
                 TabbedPage.BadgeColor="Red"
                 TabbedPage.BadgeTextColor="White" />
    <ContentPage Title="Sent"
                 IconImageSource="sent.png" />
</TabbedPage>

Estas propiedades están respaldadas por BindableProperty objetos . Por lo tanto, pueden estar enlazados a datos y actualizarse en tiempo de ejecución. También puede actualizarlos con los SetBadgeTextmétodos , SetBadgeColory SetBadgeTextColor :

TabbedPage.SetBadgeText(inboxPage, "4");
TabbedPage.SetBadgeColor(inboxPage, Colors.Orange);
TabbedPage.SetBadgeTextColor(inboxPage, Colors.Black);

Establezca el texto del distintivo en null para quitar el distintivo:

TabbedPage.SetBadgeText(inboxPage, null);

La representación de distintivos varía según la plataforma:

• iOS y Mac Catalyst usan UITabBarItem.BadgeValue, BadgeColory SetBadgeTextAttributes. En iOS 18 y Mac Catalyst 18 o posterior, la barra de pestañas del sistema puede omitir los colores de distintivo personalizados y, en su lugar, mostrar el fondo rojo del sistema y texto blanco.
• Tizen expone las propiedades adjuntas, pero no muestra distintivos.

Navegar dentro de una pestaña

La navegación se puede realizar dentro de una pestaña, siempre que el ContentPage objeto se encapsula en un NavigationPage objeto :

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:TabbedPageWithNavigationPage"
            x:Class="TabbedPageWithNavigationPage.MainPage">
    <local:TodayPage />
    <NavigationPage Title="Schedule"
                    IconImageSource="schedule.png">
        <x:Arguments>
            <local:SchedulePage />
        </x:Arguments>
    </NavigationPage>
</TabbedPage>

En este ejemplo, el elemento TabbedPage se rellena con dos objetos Page. El primer hijo es un objeto ContentPage y el segundo hijo es un objeto NavigationPage que contiene un objeto ContentPage.

Cuando se encapsula un ContentPage en un NavigationPage, se puede realizar la navegación hacia la página siguiente llamando al método PushAsync de la propiedad Navigation del objeto ContentPage:

await Navigation.PushAsync(new UpcomingAppointmentsPage());

Para obtener más información sobre cómo realizar la navegación mediante la NavigationPage clase , vea NavigationPage.

Advertencia

Aunque un NavigationPage se puede colocar en un TabbedPage, no se recomienda colocar un TabbedPage en un NavigationPage.

TabbedPage en iOS y Mac Catalyst

A partir de .NET 11, TabbedPage usa un controlador en iOS y Mac Catalyst, en lugar del representador de compatibilidad que se usó en versiones anteriores. Esto alinea iOS y Mac Catalyst con Android, Windows y Tizen, que ya usa un controlador, y significa que TabbedPage usa la misma arquitectura de controlador que otros controles de .NET MAUI en cada plataforma.

Este cambio está habilitado de forma predeterminada y no depende de ningún interruptor de función. Otras plataformas no se ven afectadas, ya que ya usaron un controlador para TabbedPage.

Note

El NavigationPage control también se movió de un representador de compatibilidad a un controlador en iOS y Mac Catalyst en .NET 11. Para obtener más información, consulte NavigationPage en iOS y Mac Catalyst.

El controlador conserva la funcionalidad TabbedPage existente, incluida:

• Títulos, iconos y selección de pestañas, y adición o eliminación de páginas secundarias en tiempo de ejecución.
• Las propiedades BarBackground, BarBackgroundColor, BarTextColor, SelectedTabColor y UnselectedTabColor.
• La pestaña Más , que aparece cuando hay más de cinco pestañas.
• TranslucencyMode específico de la plataforma. Para obtener más información, vea Barra de pestañas translúcidas tabbedPage en iOS.

Sin embargo, las aplicaciones que subclase el representador de compatibilidad se ven afectadas. Microsoft.Maui.Controls.Handlers.Compatibility.TabbedRenderer ya no muestra TabbedPage, por lo que un renderizador personalizado que derive de él ya no se utiliza a menos que lo registres explícitamente.

Uso del representador de compatibilidad

Si tu aplicación depende del renderizador de compatibilidad, puedes seguir utilizándolo registrándolo para TabbedPage con ConfigureMauiHandlers en tu clase MauiProgram:

builder.ConfigureMauiHandlers(handlers =>
{
#if IOS || MACCATALYST
    handlers.AddHandler<TabbedPage, Microsoft.Maui.Controls.Handlers.Compatibility.TabbedRenderer>();
#endif
});

Si ha derivado un representador personalizado de TabbedRenderer, registre su propio tipo en su lugar.

Importante

El registro del representador de compatibilidad está pensado como un paso de migración temporal. Debe migrar los representadores personalizados a la arquitectura del controlador. Para obtener más información, consulta Migrar renderizadores de TabbedPage de iOS.