Dot.Blog

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

Xamarin.Forms : Enfin un Picker Bindable !

C’était une lacune qu’on pouvait certes contourner (un exemple se trouve dans mon livre sur les XF) mais un Picker non bindable ce n’était pas raisonnable, la raison a enfin gagnée !

Le Picker

Le Picker fait partie des Collection Views, les contrôles gérant des collections d’objets. Dans son expression la plus simple le Picker permet de choisir entre plusieurs options comme une ComboBox standard (sans la possibilité de saisir la valeur). La présentation diffère bien entendu selon les plateformes.

Le Picker des Xamarin.Forms a deux curiosités un peu gênantes, sa liste d’items ne peut être exprimée qu’en String et cette liste n’est pas bindable et ne peut donc pas être fournie par un ViewModel.

Forcément un tel contrôle, fonctionnellement identique à la ComboBox, nécessite une liste de choix et tient à jour la sélection de l’utilisateur. Pour ces deux actions (lister les choix et faire une sélection) il faut se référer à des données normalement mise à disposition de la Vue par le ViewModel. Coder en dur la liste de choix est un no-go, la liste n’est pas modifiable sans recompiler, elle est figée, et je ne parle pas des problèmes de traduction. Quant à la sélection s’il faut bricoler en code-behind pour répercuter et suivre les changements dans le ViewModel c’est du bricolage plus que du développement.

Le Picker, jusqu’à maintenant, expose un titre, une liste d’Items non bindable et l’index de l’item courant SelectedIndex. Un événement SelectedIndexChanged permet de gérer le changement de choix par l’utilisateur.

Tout cela est assez frustre hélas. Le Picker est difficilement utilisable en MVVM puisque la liste ne peut pas être reliée à une propriété du ViewModel. Cette liste est donc soit figée dans le code XAML, ce qui n’est pas une bonne idée et qui n’est pas applicable tout le temps (listes changeantes par exemple), ou bien être construire en code-behind ce qui n’est guère mieux. Et il n’est pas possible de gérer des objets plus complexes que des String sachant que la seule information retournée est l’index et non l’objet sélectionné.

Les XLabs proposaient bien un BindablePicker mais le code des XLabs est assez peu découplé et installer tous les XLabs pour un contrôle n’est pas forcément souhaitable. 

La version DIY vs Nouveau Picker

Page 352 et suivantes de mon livre je vous propose de réaliser un BindablePicker très efficace et ne dépendant d’aucune librairie de code encombrante. C’est la méthode en kit…

Elle reste toujours valable, mais il y a peut-être mieux désormais puisque la version 2.3.4 des Xamarin.Forms propose un Picker plus évolué, de base, enfin !

Pour l’instant les nouvelles propriétés bindables sont les suivantes :

  • ItemsSource
  • SelectedIndex
  • SelectedItem
  • TextColor
  • Title

Il devient donc possible de binder au ViewModel la liste des choix et le SelectedItem de la façon la plus traditionnelle possible en MVVM. Le titre et la couleur sont aussi bindables ce qui peut, surtout pour le titre, être intéressant dans un contexte multilingue ou dans le cas où la signification de la liste change dynamiquement.

Rien ne sert de vous montrer un exemple d’un tel binding rudimentaire, en revanche je reviendrai sur la version proposée dans mon livre pour la comparer au nouveau Picker des Xamarin.Forms. Car il existe encore quelques différences qui font que “ma” version reste plus intéressante…

Par exemple dans le code que je propose il existe une propriété DisplayProperty, bindable d’ailleurs aussi, qui permet de choisir le nom du champs à afficher lorsque la source de données n’est pas constituée uniquement de chaînes de caractères, ce qui est un cas de figure très courant. De même dans la version du livre il existe deux propriétés supplémentaires bien pratiques, EnableNullOption et EnableNullOptionTitle. La première permet de faire apparaître automatiquement un choix supplémentaire pour “rien” (null) ce qui s’avère bien plus pratique que d’ajouter une croix à côté de la zone pour la vider. Pouvoir saisir “rien” est souvent indispensable… La seconde propriété permet de fixer le nom qui est affiché dans la liste pour la propriété “null”. Ce qui permet d’avoir une UI compréhensible par l’utilisateur.

image

 

Tiré du livre vous voyez ci-dessus le BindablePicker que je propose en action sous iOS et Android.

Conclusion

Les Xamarin.Forms s’améliorent avec le temps, mais on peut vouloir encore mieux, et c’est là, comme pour toute librairie standard, que commence le travail du concepteur de contrôles personnalisés ! Comme vous le remarquez bien qu’agrémenté du minimum syndical le nouveau Picker est loin de se plier aux principaux cas de figure (choix de null par exemple ou nom du champ à afficher si la source est un objet plus complexe qu’une string).

Finalement c’est heureux, cela laisse de la place pour les auteurs qui proposent d’aller plus loin … et pour les lecteurs exigeants qui veulent proposer de meilleures UX à l’utilisateurs !

 

Stay Tuned !

blog comments powered by Disqus