Dot.Blog

C#, XAML, Xamarin, UWP/Android/iOS

Xamarin.Forms : FastScroll et Index de Section pour la ListView

Une astuce rapide pour avoir sous Android ces deux facilités que sont le FastScroll et l’index de section…

Améliorer la ListView

Ceux d'entre vous qui ont joué avec la ListView dans Xamarin.Android sont probablement familiarisés avec les fonctionnalités FastScroll et SectionIndexer. elles permettent essentiellement aux utilisateurs de naviguer facilement dans les longues listes en leur fournissant un petit pointeur leur permettant de glisser rapidement dans ces dernières. Avec SectionIndexer cela leur donne également une jolie petite fenêtre contextuelle indiquant où ils se trouvent dans la liste. C’est super pratique et l’UX s’en trouve améliorée.

Malheureusement, cette fonctionnalité n'est pas disponible directement dans les propriétés des ListView dans Xamarin.Forms même sur Android (ou alors j’ai loupé un truc !).

Le code spécifique à la plateforme à la rescousse !

Toutefois il s’avère que la fonction est accessible via une instruction spécifique à la plate-forme Android sous le nom de SetIsFastScrollEnabled.

Et son utilisation est d’une grande simplicité ! Une seule ligne de code qu’on placera dans le constructeur de la Page (le fameux code behind, et oui c’est autorisé en MVVM tant qu’on ne s’occupe que de l’UI ce qui est le cas ici) :

listView.On<Android>().SetIsFastScrollEnabled(true);

Une fois que vous avez ajouté ce code, vous obtiendrez l’index FastScroll, mais en bonus  si votre ListView est groupée vous obtiendrez également le SectionIndexer.

Le fastScroll donne ce look là :

image


Une chose à prendre en compte est que, pour que le curseur FastScroll soit visible, votre liste doit contenir suffisamment de lignes ce qui est évident mais ça va mieux en le disant… (environ trois fois plus de lignes que vous en avez à l'écran).

Et XAML ?

Vous le savez je préfère ne pas mélanger UI et code C#, sinon Xaml aurait été créé pour rien… Et ce n’est pas le cas heureusement !

Donc bien sûr vous pouvez aussi vous en sortir en XAML de la façon suivante :

image

Tout se joue dans la partie surlignée mais aussi dans la déclaration du namespace qui est tronquée dans la capture ci-dessus. Il faut taper :

xmlns:android=
"clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;
assembly=Xamarin.Forms.Core"

Conlusion

Rien de vraiment méga super extraordinaire là-dedans j’en conviens et j’avais prévenu. Mais quoi que… le FastScroll quand il n’est pas là il manque cruellement, pour moi une App qui n’en a pas en tant qu’utilisateur je base tout de suite. Donc en fait, si, c’est une super astuce !

Et pour d’autres trucs encore plus cool…

Stay Tuned !

blog comments powered by Disqus