TabbedPage

La interfaz de usuario de la aplicación multiplataforma de .NET (.NET MAUI) TabbedPage mantiene una colección de elementos secundarios de tipo Page, solo uno de los cuales es totalmente visible a la 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á y ContentPage , cuando se selecciona su pestaña, se muestra 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 fichas.
• 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 con 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 un elemento TabbedPage, cada objeto Page se crea cuando se construye TabbedPage. Esto puede provocar una experiencia de usuario deficiente, especialmente si es la TabbedPage 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 de Shell de MAUI de .NET y se producirá una excepción si intenta 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 obtener más información, vea Rellenar un tabbedPage con una colección Page.
• 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 obtener más información, vea Rellenar un tabbedPage con dataTemplate.

Importante

Solo TabbedPage se debe rellenar con NavigationPage objetos 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 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 se muestra a continuación. Cada pestaña consta de 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 obtener información sobre cómo mover las pestañas a la parte inferior de la pantalla, vea 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 está formada por un título.

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

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

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 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 un tabbedPage con dataTemplate

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

En el ejemplo siguiente se muestra cómo generar TabbedPage elementos secundarios dinámicamente:

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

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

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 elemento se puede colocar en , TabbedPageno se recomienda colocar un TabbedPage en un NavigationPageobjeto .