TabView

Nous pouvons avoir des onglets en utilisant Shell. Cependant, que se passe-t-il si nous voulons avoir des onglets imbriqués dans une section spécifique (Exemple : Grille) ?, _Et si nous voulons personnaliser entièrement chaque onglet ?_. Dans ces cas, nous aurions besoin d'un moteur de rendu personnalisé jusqu'à présent...

Le TabView est un moyen d'afficher un ensemble d'onglets et leur contenu respectif. TabView est utile pour afficher plusieurs contenus tout en donnant à un utilisateur la possibilité de personnaliser presque tout.

REMARQUE : TabView est une vue multiplateforme qui prend le relais lorsque les onglets natifs atteignent leurs limites, telles que le positionnement avec des mises en page, un style et un style non uniforme comme un bouton en relief.

API

Ensuite, une liste avec les propriétés TabView, les événements et les états visuels.

Propriétés

Propriétés TabView

| Propriété | Type | Descriptif |
|----------|:-------------:|:-------------:|
| TabItemsSource | IEnumerable | Une collection utilisée pour générer les éléments d'onglet de TabView. |
| TabViewItemDataTemplate | Modèle de données | le modèle que la vue d'onglet utilise pour générer l'en-tête des éléments d'onglet. |
| TabContentDataTemplate | Modèle de données | Le modèle que la vue d'onglet utilise pour générer le contenu des éléments d'onglet. |
| EstCyclique | Bool | Activez ou désactivez la navigation cyclique dans les onglets. |
| IsLazy | Bool | Activez ou désactivez le chargement paresseux des onglets. |
| SelectedIndex | Int | Obtient ou définit l'onglet actuellement sélectionné. La valeur par défaut est 0. |
| TabStripPlacement | TabStripPlacement | Le placement TabStrip (en haut ou en bas). |
| TabStripBackground | Brosse | L'arrière-plan TabStrip. |
| TabIndicatorBrush | Brosse | L'arrière-plan de TabIndicator. |
| TabIndicatorHeight | double | La hauteur de TabIndicator. |
| TabIndicatorWidth | double | La largeur de TabIndicator. |
| TabIndicatorPlacement | TabIndicatorPlacement | |
| TabIndicatorView | Voir | Le contenu de TabIndicator. |
| TabContentBackground | Brosse | L'arrière-plan du contenu de l'onglet. |
| TabContentHeight | Double | La hauteur du contenu de l'onglet. |
| TabStripHeight | Double | La hauteur de TabStrip. |
| TabContentHeight | Double | La hauteur du contenu de l'onglet. |
| HasTabStripShadow | Bool | Affichez ou masquez l'effet d'ombre TabStrip. |
| IsTabTransitionEnabled | Bool | Activez ou désactivez la transition entre les onglets. |
| IsSwipeEnabled | Bool | Activez ou désactivez le geste de balayage. |

Propriétés TabViewItem

| Propriété | Type | Descriptif |
|----------|:-------------:|:-------------:|
| Texte | Chaîne | Le texte de l'onglet. |
| CouleurTexte | Couleur | La couleur du texte de l'onglet. |
| TextColorSelected | Couleur | La couleur du texte de l'onglet sélectionné. |
| Taille de police | Taille de police | La taille de la police utilisée dans le texte de l'onglet. |
| FontSizeSelected | Taille de police | La taille de police utilisée dans l'onglet sélectionné. |
| FontFamily | Chaîne | La famille de polices utilisée dans l'onglet. |
| FontFamilySelected | Chaîne | La famille de polices utilisée dans l'onglet sélectionné. |
| Attributs de police | Attributs de police | Les attributs de police utilisés dans l'onglet. |
| FontAttributesSelected | Attributs de police | Les attributs de police utilisés dans l'onglet sélectionné. |
| Icône | Source de l'image | L'icône de l'onglet. |
| IcôneSélectionné | Source de l'image | L'ImageSource utilisée comme icône dans l'onglet sélectionné. |
| Contenu | Voir | Le contenu de l'onglet. Is View, peut utiliser n'importe quoi comme contenu. |
| BadgeTexte | Bool | Le texte du badge utilisé dans l'onglet. |
| BadgeTextColor | Couleur | La couleur du texte du badge utilisé dans l'onglet. |
| BadgeTextColorSelected | Couleur | La couleur du texte du badge utilisé dans l'onglet sélectionné. |
| BadgeContexteCouleur | Couleur | La couleur du badge utilisé dans l'onglet. |
| BadgeArrière-planCouleurSélectionné | Couleur | La couleur du badge utilisé dans l'onglet sélectionné. |
| EstSélectionné | Bool | un booléen qui indique si l'onglet est sélectionné ou non. |
| TapCommand | ICommande | Commande exécutée lorsque l'utilisateur appuie sur un onglet. |
| TapCommandParameter | objet | Le paramètre de commande tap. |

Événements

Événements TabView

| Événement | Descriptif |
|----------|:-------------:|
| SélectionChangé | Événement qui est déclenché lorsque l'onglet sélectionné a changé. |
| Défilé | Événement déclenché lors du passage d'un onglet à l'autre. |

Événements TabViewItem

| Événement | Descriptif |
|----------|:-------------:|
| TabTappé | Événement déclenché lorsque l'utilisateur appuie sur un onglet. |

VisualStates

Le gestionnaire d'état visuel (VSM) fournit un moyen structuré d'apporter des modifications visuelles à l'interface utilisateur à partir du code.
Le VSM introduit le concept d'états visuels. TabView peut avoir plusieurs apparences visuelles différentes selon son état sous-jacent.

TabView a quatre VisualStates spécifiques :

• CurrentTabVisualState
• NextTabVisualState
• Onglet PrécédentÉtatVisuel
• DefaultTabVisualState

Scénarios

Voyons quelques exemples couvrant des scénarios courants.

Onglets de base

Voyons un exemple basique :

<TabView 
    TabStripPlacement="Bottom"
    TabStripBackgroundColor="Blue">
    <TabViewItem
        Icon="triangle.png"
        Text="Tab 1">
        <Grid 
            BackgroundColor="Gray">
            <Label
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent1" />
        </Grid>
    </TabViewItem>
    <TabViewItem
        Icon="circle.png"
        Text="Tab 2">
        <Grid>
            <Label    
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent2" />
        </Grid>
    </TabViewItem>
</TabView>

OngletObjetsSource

Utilisation de TabItemsSource (onglets dynamiques) :

<TabView
    TabItemsSource="{Binding Monkeys}"
    TabViewItemDataTemplate="{StaticResource TabViewItemTemplate}"
    TabContentDataTemplate="{StaticResource TabContentTemplate}" />

Onglets personnalisés

L'apparence de chaque onglet peut être personnalisée :

<ControlTemplate
    x:Key="TabItemTemplate">
    <Grid>
    ...
    </Grid>
</ControlTemplate>

<TabView>
    <TabViewItem
        Text="Tab 1"
        ControlTemplate="{StaticResource TabItemTemplate}">
    </TabViewItem>
</TabView>

Onglets cycliques

Voulez-vous naviguer entre les onglets de manière cyclique ?

<TabView
    IsCyclical="True">
    ...
</TabView>

Chargement paresseux

Chargement paresseux de l'onglet :

<TabView
    IsLazy="True">
    ...
</TabView>

Transitions d'onglets et animations TabViewItem

Peut utiliser les animations Xamarin.Forms pour personnaliser la transition entre chaque onglet, animer l'onglet lorsqu'il apparaît ou disparaît, ou même animer le badge lorsqu'il apparaît ou disparaît.

<TabView>
    <TabView.TabTransition>
        <local:CustomTabTransition />
    </TabView.TabTransition>
    <TabViewItem
        Text="Tab 1">      
            <TabViewItem.TabAnimation>
                <local:CustomTabViewItemAnimation />
            </TabViewItem.TabAnimation>
        <Grid 
            BackgroundColor="LawnGreen">
            <Label
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent1" />
        </Grid>
    </TabViewItem>
    ...
</TabView>

Utilisation de VisualStates

Peut utiliser différents états visuels pour personnaliser l'onglet actuel, l'onglet suivant, etc.

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="TabViewStates">
            <VisualState x:Name="CurrentTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="1" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="PreviousTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.7" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="NextTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.7" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="DefaultTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.9" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Label Text="{Binding Index}" HorizontalOptions="Center" VerticalOptions="End" />
</Grid>

Créer des onglets en utilisant C

Vous pouvez utiliser XAML ou C# pour créer l'interface utilisateur dans Xamarin.Forms. Voyons comment nous créerions des onglets en utilisant C#.

var tabView = new Tabs
{
    TabStripPlacement = TabStripPlacement.Bottom,
    TabStripBackgroundColor = Color.Blue,
    TabStripHeight = 60,
    TabIndicatorColor = Color.Yellow,
    TabContentBackgroundColor = Color.Yellow
};

var tabViewItem1 = new TabViewItem
{
    Icon = "triangle.png",
    Text = "Tab 1",
    TextColor = Color.White,
    TextColorSelected = Color.Yellow,
};

var tabViewItem1Content = new Grid
{
    BackgroundColor = Color.Gray
};

var label1 = new Label
{
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Text = "TabContent1"
};

tabViewItem1Content.Children.Add(label1);

tabViewItem1.Content = tabViewItem1Content;

tabView.TabItems.Add(tabViewItem1);

var tabViewItem2 = new TabViewItem
{
    Icon = "circle.png",
    Text = "Tab 2",
    TextColor = Color.White,
    TextColorSelected = Color.Yellow
};

var tabViewItem2Content = new Grid
{
    BackgroundColor = Color.OrangeRed
};

var label2 = new Label
{
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Text = "TabContent2"
};

tabViewItem2Content.Children.Add(label2);

tabViewItem2.Content = tabViewItem2Content;

tabView.TabItems.Add(tabViewItem2);

Utilisation des styles

Peut personnaliser l'apparence du contenu de l'onglet, de la bande d'onglet, de l'élément d'onglet, etc. à l'aide de styles XAML ou CSS .

Utilisation de XAML :

<Style
    x:Key="TabItemStyle"
    TargetType="TabViewItem">
    <Setter
        Property="FontSize"
        Value="12" />
    <Setter
        Property="TextColor"
        Value="#979797" />
</Style>

Utilisation de CSS :

.customTabItem {
    font-size: medium;
    text-color: red;
}

Difficulté : Moyenne

Plus d'information

Basé sur https://github.com/xamarin/Xamarin.Forms/issues/10773