Partager via

TabbedPage

  • Article

.NET MAUI TabbedPage.

L’interface utilisateur de l’application multiplateforme .NET (.NET MAUI) TabbedPage gère une collection d’enfants de type Page, dont une seule est entièrement visible à la fois. Chaque enfant est identifié par une série d’onglets en haut ou en bas de la page. En règle générale, chaque enfant est un ContentPage et quand son onglet est sélectionné, le contenu de la page s’affiche.

TabbedPage définit les propriétés suivantes :

  • BarBackground, de type Brush, définit l’arrière-plan de la barre d’onglets.
  • BarBackgroundColor, de type Color, définit la couleur d’arrière-plan de la barre d’onglets.
  • BarTextColor, de type Color, représente la couleur du texte dans la barre d’onglets.
  • SelectedTabColor, de type Color, indique la couleur d’un onglet lorsqu’il est sélectionné.
  • UnselectedTabColor, de type Color, représente la couleur d’un onglet lorsqu’il n’est pas sélectionné.

Ces propriétés sont sauvegardées par BindableProperty des objets, ce qui signifie qu’elles peuvent être des cibles de liaisons de données et mises en forme.

Le titre d’un onglet est défini par la Page.Title propriété de la page enfant, et l’icône d’onglet est définie par la Page.IconImageSource propriété de la page enfant.

Dans un TabbedPage, chaque Page objet est créé lors de la TabbedPage construction. Cela peut entraîner une expérience utilisateur médiocre, en particulier si la TabbedPage page racine de votre application est la page racine de votre application. Toutefois, .NET MAUI Shell permet aux pages accessibles via une barre d’onglets d’être créées à la demande, en réponse à la navigation. Pour plus d’informations sur les applications Shell, consultez Shell.

Avertissement

TabbedPage est incompatible avec les applications .NET MAUI Shell et une exception est levée si vous tentez d’utiliser TabbedPage dans une application Shell.

Créer un TabbedPage

Deux approches peuvent être adoptées pour créer un TabbedPage :

Important

Un TabbedPage doit uniquement être rempli avec et ContentPage des NavigationPage objets.

Quelle que soit l’approche adoptée, l’emplacement de la barre d’onglets dans une TabbedPage plateforme dépend de la plateforme :

  • Sur iOS, la liste des onglets apparaît en bas de l’écran et le contenu de la page est ci-dessus. Chaque onglet se compose d’un titre et d’une icône. Dans l’orientation portrait, les icônes de barre de tabulation apparaissent au-dessus des titres des onglets. Dans l’orientation paysage, les icônes et les titres apparaissent côte à côte. En outre, une barre d’onglets standard ou compacte peut être affichée, en fonction de l’appareil et de l’orientation. S’il y a plus de cinq onglets, un onglet Plus s’affiche et permet d’accéder aux onglets supplémentaires.
  • Sur Android, la liste des onglets apparaît en haut de l’écran et le contenu de la page est ci-dessous. Chaque onglet se compose d’un titre et d’une icône. Toutefois, les onglets peuvent être déplacés vers le bas de l’écran avec une plateforme spécifique à la plateforme. S’il existe plus de cinq onglets et que la liste des onglets se trouve en bas de l’écran, un onglet Plus s’affiche pour accéder aux onglets supplémentaires. Pour plus d’informations sur le déplacement des onglets en bas de l’écran, consultez l’emplacement de la barre d’outils TabbedPage sur Android.
  • Sur Windows, la liste des onglets apparaît en haut de l’écran, et le contenu de la page est ci-dessous. Chaque onglet se compose d’un titre.

Remplir un TabbedPage avec une collection Page

Un TabbedPage peut être rempli avec une collection d’objets enfants Page , qui seront généralement ContentPage des objets. Pour ce faire, ajoutez des ContentPage objets en tant qu’enfants du 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 objets ajoutés en tant qu’éléments enfants de TabbedPage la Children collection. La Children propriété de la MultiPage<T> classe, à partir de laquelle TabbedPage dérive, est la ContentProperty propriété de MultiPage<T>. Par conséquent, en XAML, il n’est pas nécessaire d’affecter explicitement les Page objets à la Children propriété.

La capture d’écran suivante montre l’apparence de la barre d’onglets obtenue sur :TabbedPage

.NET MAUI tab bar on a TabbedPage.

Le contenu de la page d’un onglet s’affiche lorsque l’onglet est sélectionné.

Remplir un TabbedPage avec un DataTemplate

TabbedPagehérite , et les ItemsSourcepropriétés pouvant être liées de la MultiPage<T> SelectedItem classe. ItemTemplate Ces propriétés vous permettent de générer dynamiquement des TabbedPage enfants, en définissant la ItemsSource propriété sur une IEnumerable collection d’objets avec des propriétés publiques adaptées aux liaisons de données, et en définissant la ItemTemplate propriété sur un DataTemplate type de page comme élément racine.

L’exemple suivant montre la génération dynamique d’enfants TabbedPage :

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

Dans cet exemple, chaque onglet se compose d’un ContentPage objet qui utilise Image et Label d’objets pour afficher les données de l’onglet :

Screenshot of a .NET MAUI TabbedPage.

La navigation peut être effectuée dans un onglet, à condition que l’objet ContentPage soit encapsulé dans un NavigationPage objet :

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

Dans cet exemple, le TabbedPage remplissage est rempli avec deux Page objets. Le premier enfant est un ContentPage objet, et le deuxième enfant est un NavigationPage objet contenant un ContentPage objet.

Lorsqu’un ContentPage élément est encapsulé dans un NavigationPage, la navigation vers la page de transfert peut être effectuée en appelant la PushAsync méthode sur la Navigation propriété de l’objet ContentPage :

await Navigation.PushAsync(new UpcomingAppointmentsPage());

Pour plus d’informations sur l’exécution de la navigation à l’aide de la NavigationPage classe, consultez NavigationPage.

Avertissement

Bien qu’un NavigationPage peut être placé dans un TabbedPage, il n’est pas recommandé de placer un TabbedPage dans un NavigationPage.