juin 18, 2021

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 !

1	IndicatorsShape	Il nous permet de modifier la forme des éléments de la vue de l'indicateur.	Cercle (Valeur par défaut) ou Carré.
2	IndicatorSize	Cette propriété gère la taille de l'indicateur en unités indépendantes du périphérique.	Double (0.6 comme valeur par défaut)
3	MaximumVisible	C'est responsable de la détermination du nombre maximum d'indicateurs visibles.	Int
4	Position	Il indique l'indice d'indicateur actuellement sélectionné.	Int
5	IndicatorColor	Il détermine la couleur de l'indicateur.	Color
6	SelectedIndicatorColor	C'est la couleur de l'indicateur qui représente l'élément actuel dans la `CarouselView`.	Color

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>