Utilisation d'IndicatorView dans les formulaires Xamarin

IndicatorView s'associe à CarouselView pour indiquer aux utilisateurs sur quelle diapositive d'un carrousel ils se trouvent. Aujourd'hui, apprenons à utiliser cet outil !

Une façon de rendre nos applications plus amusantes et en même temps d'afficher plus d'informations sans avoir besoin d'espace supplémentaire est de les présenter sur la même page dans un carrousel.

L'utilisateur l'expérience dans ce cas serait bien meilleure si on y ajoutait des indicateurs de positionnement. Par exemple, si nous regardons un album d'images, il est très bon pour l'utilisateur de voir des indicateurs qui lui permettent de connaître la position de chaque image qu'il visionne. Donc, dans cet article, nous verrons comment y parvenir avec IndicatorView !

(Image obtenue à partir de la documentation officielle de Microsoft.)

Qu'est-ce que l'IndicatorView ?

Ce contrôle nous permet d'afficher des indicateurs pour représenter le nombre total et le courant position des éléments dans une CarouselView. Il contient des propriétés qui sont soutenues par des objets BindableProperty, qui nous permettent d'utiliser des liaisons de données. Il est important de savoir que ce contrôle est disponible à partir de Xamarin.Forms 4.4 sur les plateformes iOS et Android, et à partir de 4.5 sur la plateforme Windows universelle.

⚠ Si vous souhaitez en savoir plus sur CollectionView, vous pouvez visiter la doc.

✔ Commençons à créer l'IndicatorView

Pour commencer à créer ce contrôle, il est important de connaître la structure requise :

Implémentation du code :

Apprenons certaines de mes propriétés préférées 💖

IndicatorView nous donne de nombreuses propriétés que nous pouvons utiliser pour créer des choses étonnantes. Apprenons quelques-uns de mes favoris !

Et enfin, un exemple d'ajout de ces propriétés :

Définissons l'apparence de l'indicateur

Pour définir les éléments de l'indicateur, il vous suffit de définir la propriété IndicatorView.IndicatorTemplateproperty sur un DataTemplate. Vous pouvez en savoir plus sur DataTemplate ici.

Dans l'exemple suivant, l'image par défaut a été remplacée par une autre appelée Star.jpg.

Pour obtenir une implémentation complète, ajoutez simplement le bloc précédent dans celui-ci :

Ajoutons des états visuels

Les états visuels sont très importants : ils nous aident à identifier graphiquement tout changement apporté par une certaine action. Par exemple, dans notre vue d'indicateur, nous pouvons mettre en évidence lorsqu'un élément est sélectionné, soit au moyen d'une couleur ou d'une taille différente des autres. Cela nous permet d'identifier rapidement où nous en sommes.

Pour développer cet exemple, expliquons étape par étape :

1. Créez un style.

    <Style x:Key="IndicatorsStyle"
           TargetType="Étiquette">
        <Setter Property="VisualStateManager.VisualStateGroups">
            
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Propriété Setter="TextColor"
                                    Valeur="Rose" />
                        </VisualState.Setters>
                    
                    <VisualState x:Name="Sélectionné">
                        <VisualState.Setters>
                            <Propriété Setter="TextColor"
                                    Valeur="Bleu" />
                        </VisualState.Setters>
                    
                
            
        
    </Style>

2. Une fois le style créé, il vous suffit d'ajouter un style simple, comme dans la même structure de base expliquée ci-dessous :

    <IndicatorView x:Name="indicatorView"
                   Margin="0,0,0,40"
                   IndicatorColor="Transparent"
                   SelectedIndicatorColor="Transparent"
                   HorizontalOptions="Center"[19459004>] 
        <IndicatorView.IndicatorTemplate>
            <DataTemplate>
                   <Label Text="- " Style="{StaticResource IndicatorsStyle}" />
            </DataTemplate >
        </IndicatorView.IndicatorTemplate>
    </I ndicatorView>

Et c'est fait ! ✅

J'espère que cet article vous a été utile et que vous appliquez ce que vous avez appris ! 😍

Merci d'avoir lu mon article ! 💚💕

Références :

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/indicatorview