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 elemento secundario 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 color de 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 de la barra de pestañas.
• SelectedTabColor de tipo Color, indica el color de una pestaña cuando está seleccionada.
• UnselectedTabColor de tipo Color, representa el color de una pestaña cuando no está seleccionada.

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y con estilo.

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

En un elemento TabbedPage, cada objeto Page se crea cuando se construye TabbedPage. Esto puede dar lugar a una experiencia de usuario deficiente, especialmente si TabbedPage es la página raíz de la aplicación. Sin embargo, .NET MAUI Shell permite que las páginas a las que se accede mediante una barra de pestañas se creen a petición, en respuesta a la navegación. Para obtener más información sobre las aplicaciones Shell, consulta Shell.

Advertencia

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

Creación de TabbedPage

Para crear una instancia de TabbedPage se pueden usar dos métodos:

• Rellene el elemento TabbedPage con una colección de objetos Page secundarios, por ejemplo, objetos ContentPage. Para más información, consulta Rellenar una TabbedPage con una colección de páginas.
• Asigne una colección a la propiedad ItemsSource y asigne un elemento DataTemplate a la propiedad ItemTemplate para devolver páginas para los objetos de la colección. Para más información, consulta Rellenar una TabbedPage con una DataTemplate.

Importante

TabbedPage solo se debe rellenar con objetos NavigationPage y ContentPage.

Independientemente del enfoque adoptado, la ubicación de la barra de pestañas de TabbedPage 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 está formada por 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 orientación horizontal, los iconos y los títulos aparecen unos al lado de otros. Además, se puede mostrar una barra de pestañas normal o compacta, dependiendo del dispositivo y la orientación. Si hay más de cinco pestañas, aparece una pestaña Más que puede usarse para acceder a las demás pestañas.
• En Android, la lista de pestañas aparece en la parte superior de la pantalla y el contenido de la página está debajo. Cada pestaña está formada por un título y un icono. Sin embargo, se pueden mover las pestañas a la parte inferior de la pantalla con una plataforma específica. Si hay más de cinco pestañas, y la lista de pestañas está en la parte inferior de la pantalla, aparece una pestaña Más que puede usarse para acceder a las demás pestañas. Para información sobre cómo mover las pestañas a la parte inferior de la pantalla, consulta Colocació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 área de detalles está debajo. Cada pestaña está formada por un título.

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

TabbedPage se puede rellenar con una colección de objetos secundarios Page, que normalmente serán objetos ContentPage. Esto se logra agregando objetos ContentPage como elementos secundarios de 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>

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

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 una TabbedPage con una DataTemplate

TabbedPage hereda las propiedades enlazables ItemsSource, ItemTemplate y SelectedItem 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}">
    <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 objeto ContentPage que usa objetos Image y Label para mostrar los datos de la pestaña:

Navegación en una pestaña

La navegación se puede realizar dentro de una pestaña, siempre y cuando el objeto ContentPage esté encapsulado en un objeto NavigationPage:

<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 elemento secundario es un objeto ContentPage y el segundo es un objeto NavigationPage que contiene un objeto ContentPage.

Cuando se encapsula ContentPage en NavigationPage, se puede navegar hacia delante por las páginas llamando al método PushAsync en la propiedad Navigation del objeto ContentPage:

await Navigation.PushAsync(new UpcomingAppointmentsPage());

Para obtener más información sobre la navegación usando la clase NavigationPage, consulta NavigationPage.

Advertencia

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