Ils existent mais ne semblent pas très connus, qui sont-ils ? Les Bindable Layouts ..
Bindable Layouts
D’après le nom on comprend que cela va parler de Layout, comme le StackLayout par exemple, et de binding… Deux sujets importants. Le premier est une des briques de base utilisée dans presque toute mise en page MAUI et XAML de façon plus générale, et le second est carrément l’âme de XAML, de WPF, UWP, de MVVM et de MAUI ! Enlevez le binding et c’est tout cet édifice qui s’écroule.
Donc à la base c’est du lourd… Mais encore…
Les Bindable Layouts dérivent d'une propriété, une interface, supportée par la classe Layout dont dérivent les conteneurs MAUI comme la Grid ou le StackLayout.
Un Layout qui supporte une liste d’Items, on connait déjà ça, ça s’appelle une ListView !
C’est vrai. Mais une ListView n'est pas vraiment un conteneur au sens des Layout, c'est un contrôle particulier optimisé pour la gestion de listes d'items, elle peut en gérer des centaines, elle gère le scrolling, et plein d’autres choses. Mais elle est unique et ne sert qu'à afficher des listes (même si avec un peu de ruse on peut lui trouver d'autres usages).
Parfois on aurait besoin d’une solution plus simple. D’autres fois on aimerait dans une ListView qu’un item puisse afficher une courte liste de sous-items. Mais n’essayez pas de mettre des ListView dans une ListView… Y’en a qui ont essayé, ils ont eu des problèmes… En réalité la façon dont la ListView gère le scrolling fait qu’il est impossible de faire la différence entre votre doigt qui se déplace pour faire défiler la liste principale ou la liste secondaire.. Donc ça ne marche pas. Pourtant une petite liste de sous-items dans un item cela n’a rien de farfelu. Mais surtout, ne nous laissons pas aveugler par cette notion de "liste d'items" qui fait forcément penser à une ListView, c'est un piège ! En réalité on parle ici de tous les Layouts de MAUI (FlexLayout, Grid, StackLayout, etc) et de leur conférer la possibilité de gérer du contenu dynamique mais avec leurs spécificités de mise en page propres... C'est en réalité vertigineux et n'a rien à voir avec de simples listes d'items.
Vous l’avez compris les Bindable Layouts sont tout simplement des Layout qui vont – par un procédé que je vais vous expliquer – supporter par “magie” la création automatique d’items comme s’ils étaient des ListView (en moins sophistiqué pour gérer des listes mais en bien plus puissants par leurs capacités à gérer leurs enfants visuels de façon très particulière).
Ces Layouts, comme le StackLayout qui s’y prête très bien, une fois branché à un BindableLayout, vont ainsi devenir des conteneurs de liste capables d’afficher automatiquement des items selon les capacités qui leurs sont propres. Le procédé n’est pas fait pour en afficher des centaines d'items, pas de scrolling notamment, mais il est parfait pour imbriquer des listes dans des listes, ou créer des mise en page dynamiques (les items sont des templates complets).
Une liste de client avec sous chaque nom de client la liste des 5 dernières commandes par exemple. C'est tout bête, pas farfelu du tout. Et pourquoi pas pour chaque commande la liste des 2 articles les plus chers ? etc. Mais surtout, un affichage propre à chaque type de Layout. Imaginez une présentation utilisant des HorizontalStackLayout dynamiques dans un VerticalStackLayout lui aussi dynamique...
Les bindable Layouts permettent ainsi, bien plus qu'afficher des listes, des fantaisies de mise en page créatives !
Bien que présents depuis longtemps, les BindableLayout ne me semblent pas être utilisés aussi souvent qu'ils le méritent. Pourquoi ? Parce qu'à mon avis on n'y pense pas. Mais pourquoi ? Parce qu'on les connait mal ou peu, voire pas du tout. Une sorte de feature qui passe sous les radars car elle n'appartient qu'à MAUI et aucun autre XAML.
D'où l'idée de vous en parler.
Les Layouts
Un bref rappel de ce que sont les Layouts et leur généalogie (par ordre d'héritage) :
La classe Layout définit une spécialisation de View qui expose une collection de vues enfants. On peut ainsi ajouter ou supprimer ou même remplacer des vues enfants pour coller au design de la page.
Avec un StackLayout on peut écrire en C# le code suivant qui met en évidence cette propriété Children :
myStackLayout.Children.Add(new Label {Text=”un bout de texte”});
Layout se trouve à la base de tous les Layouts que nous utilisons. Le StackLayout ou la Grid sont de bons exemples.
L’idée des Bindable Layouts est juste de se dire que puisque les Layout ont une liste d’enfants pourquoi ne pas la rendre bindable, ce qui ouvre plein de possibilités intéressantes…
Mais comme à la base Layout n’est pas prévu pour cela, c’est par le biais d’une classe particulière qu’on va ajouter cette possibilité de binding… Bien entendu l’effet va dépendre de la capacité du layout de base sur lequel on va greffer le binding. Partir d’un StackLayout ne donnera pas le même résultat qu’avec une Grid aux lignes et colonnes définies spécifiquement. Je vous laisse tester pour voir ce que cela donne !
Mais revenons à cette classe spéciale qui ajoute le binding à Layout qui n’en disposait pas…
BindableLayout
Tout cela fonctionne grâce à une classe principale, BindableLayout qu’on peut voir comme une sorte Behavior ou plus exactement un fournisseur de propriétés attachées qui confère un comportement particulier, celui de supporter une liste d’items.
Les principales propriétés définies par cette classe sont :
ItemsSource, la source des items vous l’aviez comprisItemTemplate, heuu le template des items à afficher (un DataTemplate)ItemTemplateSelector, le sélecteur de template s’il y en a un
Dans la pratique comme cela marche ?
Pour ce petit exemple imaginez qu’on veuille présenter une liste d’objets sans pour autant faire appel à une ListView (même si on peut faire beaucoup mieux mais cet exemple est le plus simple à montrer). Ici l’objet de base venant du Modèle sera un Synthétiseur. On souhaite afficher la liste de quelques synthés de légende de façon dynamique en utilisant les possibilité d'un conteneur particulier, ici un StackLayout qui empile ses enfants horizontalement ou verticalement.
Le Model
Voici la classe unique du Model, la classe Synthesizer :
Rien de spécial donc on passe au provider de données :
Le DataProvider est ici une classe statique qui retourne une liste de synthétiseurs. Dans une App réelle il s'agirait d'un service certainement obtenu par injection de dépendances allant chercher les données sur le Web ou depuis une base de données, mais pour un exemple on conçoit que cela serait un peu lourd.
Le ViewModel
Même pour un petit exemple tout bête il ne faut pas oublier les bonnes manières ! C e ViewModel qui va vous killer :
J’avais prévenu, c’est du ViewModel de haute voltige !
La View
On sent bien que c’est là que tout va se passer …
En cliquant sur les images vous accèderez à la version en 100% plus lisible.
Donc ici nous voyons un StackLayout contenant l’essentiel de la mise en page de cette App. Il contient en effet quelques labels, des BoxView pour tracer des lignes, et un autre StackLayout à la fin.
C’est ici que les choses se passent. A l’intérieur de la balise du StackLayout on voir le premier appel à BindableLayout et sa propriété ItemsSource, en toute logique bindée à la collection exposée par le ViewModel.
A l’intérieur du StackLayout on ouvre d’autres balises permettant de préciser la valeur d’autres propriétés du Bindablelayout, notamment l’ItemTemplate.
S’ensuit un contenu très classique, celui de la définition d’un DataTemplate faisant usage d’une Grid à 3 colonnes pour afficher les 3 champs sur une seule ligne.
On trouve les balises fermantes de tout ce petit monde et c’est tout…
A quoi cela ressemble ?
Une image valant mille mots :
Conclusion
Les Bindable Layouts sont pour les uns une curiosité de MAUI, pour d'autres une astuce bienvenue pour créer des mises en page plus créatives, plus dynamiques. Et pour certains cela sera une découverte... Listes et sous-listes deviennent ainsi bien plus faciles à créer. Mais imaginez surtout les possibilités incroyables que cela ouvre en termes de mise en page avec tous les types de Layouts de MAUI... Attention tout de même à ne pas trop imbriquer de Layouts les uns dans les autres, cela peut être consommateur de ressources. Les Bindable Layouts ne sont pas des ListView, ils ne la remplacent pas et ne cherchent pas à l'imiter, ils sont bien plus que ça. Testez-les et vous verrez que des idées plus incroyables que de simples listes vous viendront...
Stay Tuned !