Le Caroussel est une vue bien pratique généralement bien aimée des utilisateurs mais il lui manque une petite chose pour être parfaite, un indicateur de position…
Carrousel et indicateur de position
Le Carrousel, Carousel en XAML, est une vue dont je ne vais pas faire le détail ici tellement son utilisation a été banalisée sur les mobiles. On fait glisser avec le doigt une vue vers la droite ou la gauche pour se balader dans un catalogue (photos, fiches diverses et variées…).
Au tout départ des Xamarin.Forms il y a avait une page de type Carousel, l’idée n’était pas saugrenue vue la taille des écrans d’alors. Après tout faire défiler des photos notamment si c’était pour le faire dans un timbre-poste le jeu n’en valait pas la chandelle… Mais très vite la technologie a évolué, les écrans sont devenus nettement plus grand même dans l’entrée de gamme. Et la page dédiée à la vue Carousel est devenue très vite obsolète.
Le plan était alors de transformer le Carousel en View plutôt qu’en Page. Cela pris le temps mais ce fut fait.
Nous pouvons aujourd’hui utiliser la CarouselView qu’on peut retailler comme on le souhaite et faire apparaître n’importe où dans une mise en page. Les grands écrans aidant on peut très bien avoir ainsi une partie fixe dans une page et une partie scrollable contenant des produits, des fiches, des noms, etc, le tout dans une CarouselView.
Toutefois le carrousel très utilisé sur le Web est souvent associé à une quantité limitée d’items et pour s’y retrouver un peu on lui associe un indicateur visuel, généralement des petits points. Il y a autant de petits points que de “pages” à faire défiler et la “page” en cours est matérialisée dans les petits points par un changement de couleur.
C’est tout simple, bien pratique, ça permet d’en “mettre plus” dans le même espace, et grâce à l’indicateur à point l’utilisateur sait s’il veut aller en avant ou en arrière.
Un carrousel simple
Si on prend un carrousel simple avec quelques items cela donne le visuel suivant en imaginant la jolie transition de glissement entre les deux pages :
C’est beau, mais comment savoir “où on se trouve” ?
Regardons d’abord le code de ce premier exemple :
<CarouselView
ItemsSource="{Binding Items}">
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame
BackgroundColor="{Binding Color}">
<Grid
HorizontalOptions="Center"
VerticalOptions="Center">
<Label
Text="{Binding Name}"
FontSize="25" />
</Grid>
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</ContentPage>
Imaginez qu’il y a derrière un ViewModel fournissant une liste appelée Items, List<Person> et qu’il y a cinq personnes définies en dur dans cette liste, chacune ayant une couleur de fond Color et un nom Name. Je ne montrerai pas ce code là sans intérêt ici.
Et les petits points ?
Ils arrivent ! Les voilà !
La CourselView possède une nouvelle propriété (depuis quelques mois) qui s’appelle IndicatorView, de type IndicatorView, ce qui est facile à se rappeler…
Un indicatorView se définie comme tout autre élément XAML et doit pouvoir s’afficher dans la page, il faudra donc un conteneur au-dessus du carrousel s’il était tout seul avant (un StackLayout fera l’affaire). Une définition possible :
<IndicatorView x:Name="indicatorView"
IndicatorColor="DarkGray"
SelectedIndicatorColor="Red"
HorizontalOptions="Center"
VerticalOptions="Center" HeightRequest="40"/>
Ici nous définissons un indicateur de type cercle (c’est la valeur par défaut) avec une couleur de repos et une couleur d’activation, nous précisions aussi où sera afficher l’indicateur (centré horizontalement et verticalement dans une bande de 40 pixels en bas du carrousel ici).
Ne reste plus qu’à lui donner un nom (x:Name=”indicatorView”) puis d’utiliser ce nom dans le code de notre CarouselView, le code complet devenant :
<StackLayout>
<CarouselView
ItemsSource="{Binding Items}"
IndicatorView="indicatorView">
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame
BackgroundColor="{Binding Color}">
<Grid
HorizontalOptions="Center"
VerticalOptions="Center">
<Label
Text="{Binding Name}"
FontSize="25" />
</Grid>
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView x:Name="indicatorView"
IndicatorColor="DarkGray"
SelectedIndicatorColor="Red"
HorizontalOptions="Center"
VerticalOptions="Center" HeightRequest="40"/>
</StackLayout>
Le tout se trouvant dans une ContentPage mais cela n’a pas d’importance.
Visuellement si nous nous plaçons sur la 3ème page nous verrons :
Comme vous le constatez en bas du carrousel se trouve désormais 5 petits points grisés sauf le 3ème en rouge tel que nous l’avons défini…
Et plus ?
Oui, on peut faire plus, notamment choisir des points carrés pourquoi pas… Mais je ne vais pas faire une redite de la doc de l’IndicatorView que vous trouverez sur les sites Microsoft ici : https://docs.microsoft.com/fr-fr/xamarin/xamarin-forms/user-interface/indicatorview
Si on peut changer la forme, on peut aussi limiter le nombre de points affichés, ainsi que changer la taille de ceux-ci. Il est même possible de définir totalement le look des points grâce à du templating. Le plus simple étant par exemple d’utiliser une image…
Niveau placement l’exemple utilisé ici est simpliste avec son StackLayout. On peut bien entendu utiliser une grille ou autre et afficher les points par-dessus le carrousel… ou les mettre ailleurs (mais cela risque d’être confus pour l’utilisateur !).
Conclusion
Ce n’est certes pas un effet spécial qui fera sauter de bonheur vos utilisateurs devant tant d’audace graphique, soyons francs… C’est même l’absence de ces petits points qui pouvait éventuellement provoquer leur stupeur…
Mais maintenant c’est dedans, ça marche, c’est souple, configurable à souhait, bref tout vient à temps pour qui sait attendre, notre attente à été récompensée c’est une bonne chose 
Bon petits points (et ne vous mélangez pas trop entre Carousel en anglais et Carrousel en français, deux “r” mais un seul “s” notre langue est déroutante d’absurdité parfois…).
Stay Tuned !