Telerik TabView pour.NET MAUI : interface utilisateur à onglets avec look natif

Quelle que soit la plate-forme sur laquelle votre application .NET MAUI sera affichée, créez une vue par onglets native avec Telerik TabView.

Rencontrez-vous des difficultés à recréer une interface utilisateur avec vue par onglets qui s’affiche bien sur toutes les plateformes ? Création de Progress Telerik TabView pour .NET MAUI pour répondre à ce besoin, et cet article passera en revue ses fonctionnalités.

Telerik TabView fait partie de Interface utilisateur Telerik pour .NET MAUI et il est livré avec :

• Look natif sur chaque plateforme
• Fonctionnalité de sélection d’articles
• Quatre options de position d’en-tête
• Prise en charge du défilement et des gestes
• API riche pour personnaliser et styliser l’interface utilisateur

Commençons et ajoutons Telerik .NET MAUI TabView à une application .NET MAUI.

Premièrement, nous devons téléchargez et installez l’interface utilisateur Telerik pour .NET MAUI.

Note! Appel UseTelerik();! N’oubliez pas d’appeler le UseTelerik() méthode dans le fichier MauiProgram.cs de votre projet .NET MAUI. Ceci est nécessaire pour que tous les composants Telerik UI pour .NET MAUI enregistrent tous les gestionnaires intégrés ou créés en plus sur les composants Telerik.

Ensuite, nous pouvons créer le composant en C# ou en XAML comme ceci :

XAML

Xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
<telerik:RadTabView x:Name="tabView"></telerik:RadTabView>

C#

using Telerik.Maui.Controls;
RadTabView tabView = new RadTabView();

Ajout d’onglets

Pour afficher quelque chose dans l’onglet, vous pouvez définir des éléments TabViewItem dans son Items collection et définir les TabViewItems’ HeaderText propriété comme indiqué ci-dessous :

<telerik:RadTabView x:Name="tabView">
    <telerik:TabViewItem HeaderText="Home" />
    <telerik:TabViewItem HeaderText="Folder" />
    <telerik:TabViewItem HeaderText="View" />
</telerik:RadTabView>

RadTabView tabView = new RadTabView();
Telerik.Maui.Controls.TabViewItem homeTab = new Telerik.Maui.Controls.TabViewItem()
{
     HeaderText = "Home",
};
Telerik.Maui.Controls.TabViewItem folderTab = new Telerik.Maui.Controls.TabViewItem()
{
     HeaderText = "Folder"
};
Telerik.Maui.Controls.TabViewItem viewTab = new Telerik.Maui.Controls.TabViewItem()
{
     HeaderText = "View"
};
tabView.Items.Add(homeTab);
tabView.Items.Add(folderTab);
tabView.Items.Add(viewTab);

Chaque élément TabView propose également plusieurs propriétés booléennes avec lesquelles manipuler. Nous pouvons contrôler si IsVisible, IsSelected ou IsDisabled.

Lors du premier chargement (si nous ne l’avons pas modifié), le premier élément sera sélectionné et son isSelected la propriété reviendra true, IsVisible sera trueet isDisabled FAUX. Cela affichera une interface utilisateur comme celle-ci :

Nous avons maintenant la configuration initiale. Mais pourquoi aurions-nous besoin d’onglets sans contenu qui leur est lié, n’est-ce pas ? Avant de continuer, jouons un peu plus avec l’en-tête pour voir quelles sont ses possibilités.

Premièrement, nous pouvons changer le HeadersPosition propriété de Telerik TabView pour .NET MAUI pour Bottom, Left, Right ou laissez-le par défaut Top.

Dispositions des onglets superposés et défilants

Le contrôle TabView vous permet de faire défiler les onglets à l’intérieur de l’en-tête TabView. Vous pouvez contrôler cela avec le IsHeaderScrollable (bool) propriété. La valeur par défaut est True.

Avec IsHeaderOverlaid (bool), vous pouvez contrôler si la zone d’en-tête est superposée au-dessus de la zone de contenu. Quand le IsHeaderOverlaid est réglé sur Truela zone d’en-tête est centrée et chevauche partiellement l’une des bordures de la zone de contenu, en fonction de la valeur de HeaderPosition propriété. Le remplissage de la zone de contenu est ajusté en conséquence, pour éviter tout chevauchement avec la zone d’en-tête.

Quand le IsHeaderOverlaid est réglé sur Falsela zone d’en-tête est placée à côté de la zone de contenu sans aucun chevauchement, en fonction de la valeur de HeaderPosition propriété.

Maintenant, configurons le contenu des onglets !

Contenu de l’onglet

Chaque élément de l’onglet a un Content propriété prête à être peuplée. Vous pouvez le faire directement en XAML ou en C# :

XAML

<telerik:RadTabView x:Name="tabView" >
    <telerik:TabViewItem HeaderText="Home">
        <Label Margin="10" Text="This is the content of the Home tab" />
    </telerik:TabViewItem>
    <telerik:TabViewItem HeaderText="Folder">
        <Label Margin="10" Text="This is the content of the Folder tab" />
    </telerik:TabViewItem>
    <telerik:TabViewItem HeaderText="View">
        <Label Margin="10" Text="This is the content of the View tab" />
    </telerik:TabViewItem>
</telerik:RadTabView>

C#

  Telerik.Maui.Controls.TabViewItem homeTab = new Telerik.Maui.Controls.TabViewItem()
  {
      HeaderText = "Home",
      Content = new Label() { Text = "This is the content of the Home tab", Margin = new Thickness(10) },
  };
  Telerik.Maui.Controls.TabViewItem folderTab = new Telerik.Maui.Controls.TabViewItem()
  {
      HeaderText = "Folder",
      Content = new Label() { Text = "This is the content of the Folder tab", Margin = new Thickness(10) },
  };
  Telerik.Maui.Controls.TabViewItem viewTab = new Telerik.Maui.Controls.TabViewItem()
  {
      HeaderText = "View",
      Content = new Label() { Text = "This is the content of the View tab", Margin = new Thickness(10) },
  };

Zone de contenu : Swipe ou aucun balayage

Comme vous pouvez le voir sur l’image, TabView affiche uniquement le contenu d’un élément à la fois, celui qui est sélectionné. Le reste peut être vu en modifiant la sélection d’un simple geste de glissement.

Si vous souhaitez empêcher cette fonctionnalité, vous devrez définir le IsContentSwipingEnabled (bool) propriété à False. La valeur par défaut est True.

En savoir plus sur la sélection

Vous avez accès à l’élément sélectionné via deux propriétés :SelectedItem et SelectedIndex. En les utilisant, vous pouvez modifier la sélection par programme comme ceci :

tabView.SelectedItem = tabView.Items[1];

Une autre API importante qui mérite d’être mentionnée est la SelectionChanged événement qui est utilisé pour des scénarios plus avancés. L’événement est déclenché lorsque le SelectedItem est modifié par l’utilisateur final ou par programme :

private void tabView_SelectionChanged(object sender, System.EventArgs e)
{
    
}

Maintenant, jouons avec l’apparence et la convivialité du contrôle

TabView est livré avec un ensemble d’API que vous pouvez utiliser pour contrôler l’apparence générale en modifiant les modèles de l’en-tête, de l’élément d’en-tête ou du contenu de TabView. Vous pouvez également conserver les modèles par défaut mais améliorer leur style. La liste complète des propriétés est ci-dessous :

• Modèle d’en-tête (ControlTemplate) – Définit le modèle de toute la zone d’en-tête. Cela inclut les onglets de l’en-tête (zone d’en-tête + éléments d’en-tête).
• Modèle d’élément d’en-tête (ControlTemplate) – Définit le modèle des éléments d’en-tête individuels.
• Modèle de contenu (ControlTemplate) – Définit le modèle de toute la zone de contenu.
• Style d’en-tête – Spécifie le style de toute la zone d’en-tête (bordure, couleur d’arrière-plan, etc.).
• Style d’élément d’en-tête – Spécifie le style des éléments d’en-tête individuels (police, couleur du texte, etc.).
• Style de contenu – Spécifie le style de toute la zone de contenu (bordures, couleur d’arrière-plan, etc.).

Par exemple, si vous souhaitez reproduire un peu la vue traditionnelle des onglets de Windows, nous pouvons combiner des modèles et des styles :

1. Nous allons d’abord définir le HeaderItemTemplate propriété pour ajouter un bouton :

<telerik:RadTabView.HeaderItemTemplate>

 <ControlTemplate>
  <telerik:RadBorder CornerRadius="10,10,0,0" BorderColor="{TemplateBinding BorderColor}"  	                                        BackgroundColor="LightGray" BorderThickness="2">
       <HorizontalStackLayout BackgroundColor="LightGray" HorizontalOptions="StartAndExpand"  >
       <Label Text="{TemplateBinding Text}" TextColor="{TemplateBinding TextColor}" HeightRequest="20"               Margin="10" VerticalTextAlignment="Center" HorizontalOptions="Center" WidthRequest="130"/>
       <telerik:RadButton BackgroundColor="{TemplateBinding BorderColor}"  Margin="0,0,10,0" WidthRequest="30" HeightRequest="30" Text="x" VerticalContentAlignment="Center" HorizontalOptions="End"/>
    </HorizontalStackLayout>
   </telerik:RadBorder>
 </ControlTemplate>
</telerik:RadTabView.HeaderItemTemplate>

Note: Pour conserver la liaison des propriétés de l’élément d’en-tête, utilisez TemplateBinding aux propriétés que vous définirez dans Styles—BorderBackground,
BackgroundColoretc.

2. Utilisez le HeaderStyle pour supprimer la bordure extérieure :

<telerik:RadTabView.HeaderStyle>
           <Style TargetType="telerik:TabViewHeader">
               <Setter Property="BackgroundColor" Value="Transparent" />
               <Setter Property="BorderColor" Value="Transparent" />
           </Style>
  </telerik:RadTabView.HeaderStyle>

3. Utiliser HeaderItemStyle et ContentStyle jouer avec les couleurs. Dans le code ci-dessous, nous appliquons différents styles avec Visual State Manager pour avoir des couleurs différentes lorsque les onglets sont sélectionnés.

Le code final et les résultats sont présentés ci-dessous :

   <telerik:RadTabView x:Name="tabView" WidthRequest="600" HeightRequest="600" HeaderSpacing="2">
       <telerik:RadTabView.HeaderItemTemplate>
           <ControlTemplate>
               <telerik:RadBorder CornerRadius="10,10,0,0" BorderColor="{TemplateBinding BorderColor}" BackgroundColor="LightGray" BorderThickness="2">
               <HorizontalStackLayout BackgroundColor="LightGray" HorizontalOptions="StartAndExpand">                       
<Label Text="{TemplateBinding Text}" TextColor="{TemplateBinding TetColor}" HeightRequest="20" Margin="10" VerticalTextAlignment="Center" HorizontalOptions="Center" WidthRequest="130"/>
                 <telerik:RadButton BackgroundColor="{TemplateBinding BorderColor}"  Margin="0,0,10,0" WidthRequest="30" HeightRequest="30" Text="x" VerticalContentAlignment="Center" HorizontalOptions="End"/>
               </HorizontalStackLayout>
             </telerik:RadBorder>
           </ControlTemplate>
       </telerik:RadTabView.HeaderItemTemplate>
       <telerik:RadTabView.HeaderStyle>
           <Style TargetType="telerik:TabViewHeader">
               <Setter Property="BackgroundColor" Value="Transparent" />
               <Setter Property="BorderColor" Value="Transparent" />
           </Style>
       </telerik:RadTabView.HeaderStyle>
       <telerik:RadTabView.HeaderItemStyle>
           <Style TargetType="telerik:TabViewHeaderItem">
               <Setter Property="FontAttributes" Value="Italic"/>
               <Setter Property="TextColor" Value="#99000000" />
               <Setter Property="VisualStateManager.VisualStateGroups">
                   <VisualStateGroupList>
                       <VisualStateGroup Name="CommonStates">
                           <VisualState Name="Normal" >
                               <VisualState.Setters>
                                   <Setter Property="Background" Value="Transparent" />
                                   <Setter Property="BorderColor" Value="DarkGray" />
                                   <Setter Property="BorderThickness" Value="2" />
                                   <Setter Property="CornerRadius" Value="10,10,0,0" />
                               </VisualState.Setters>
                           </VisualState>
                           <VisualState Name="Disabled">
                               <VisualState.Setters>
                                   <Setter Property="TextColor" Value="#61000000" />
                               </VisualState.Setters>
                           </VisualState>
                           <VisualState Name="Selected">
                               <VisualState.Setters>
                                   <Setter Property="TextColor" Value="#e05194" />
                                   <Setter Property="BorderColor" Value="#e05194" />
                                   <Setter Property="BorderThickness" Value="2" />
                                   <Setter Property="CornerRadius" Value="10,10,0,0" />
                               </VisualState.Setters>
                           </VisualState>
                       </VisualStateGroup>
                   </VisualStateGroupList>
               </Setter>
           </Style>
       </telerik:RadTabView.HeaderItemStyle>
       <telerik:RadTabView.ContentStyle>
           <Style TargetType="telerik:TabViewContent">
               <Setter Property="BackgroundColor" Value="WhiteSmoke" />
               <Setter Property="BorderColor" Value="#e05194" />
               <Setter Property="BorderThickness" Value="2" />
               <Setter Property="CornerRadius" Value="10"/>
           </Style>
       </telerik:RadTabView.ContentStyle>
       <telerik:TabViewItem HeaderText="Home">
           <Label Margin="10" Text="This is the content of the Home tab" />
       </telerik:TabViewItem>
       <telerik:TabViewItem HeaderText="Folder">
           <Label Margin="10" Text="This is the content of the Folder tab" />
       </telerik:TabViewItem>
       <telerik:TabViewItem HeaderText="View">
           <Label Margin="10" Text="This is the content of the View tab" />
       </telerik:TabViewItem>
   </telerik:RadTabView>

Essayez-le et partagez vos commentaires

Pour démarrer rapidement Telerik TabView pour .NET MAUIjetez un oeil à documents en ligne et le Exemples de SDK sur GitHub. Essayez-le maintenant, et si vous avez besoin de quelque chose, n’hésitez pas à partager votre retour ou des questions avec l’équipe Progress Telerik.

Essayez l’interface utilisateur Telerik pour .NET MAUI