Refléter l’état du ViewModel dans l’UI peut se faire via le Visual State Manager ou même le StateContainer du Toolkit MAUI, mais est-il possible de le faire par des Styles bindés au ViewModel ? Oui, avec un peu de ruse typiquement XAML… Découvrez la réponse dans Dot.Vlog épisode 18 !
Dot.Vlog
A la différence de Dot.Blog dont le rythme des articles est très soutenu (au minimum un article tous les vendredi à 14:00 et bientôt à 12h00), Dot.Vlog n'est "activé" que pour les sujets où la démonstration visuelle apporte réellement un plus pédagogique. La vidéo d'aujourd'hui n'échappe pas à cet ligne éditoriale, c'est une vidéo et pas un article car cela serait moins efficace à lire, là où une vidéo rendra justice au sujet du jour.
La chaîne n’est pas monétisée, le seul salaire : mettre des pouces bleus et vous abonner, mais aussi partager, commenter (sur YouTube pas ici) afin que la chaîne soit proposée plus souvent et que son audience grandisse… Faire une vidéo c’est un peu comme organiser une fête d’enfer, s’il n’y a que 2 personnes qui viennent c’est triste… Plus on est de fous plus on rit ! Alors aider Dot.Vlog et Dot.Blog à rameuter tous les fous du cross-plateforme 
Style et Binding
Refléter les états du ViewModel peut se faire de nombreuses façons. Un simple Label lié par Binding à une propriété de ce dernier est déjà en soi une façon de présenter à l’utilisateur via l’UI un état particulier du ViewModel dont l’existence se passe dans l’ombre sinon… Mais il faut avouer qu’il s’agit ici du niveau zéro de la représentation visuelle des états du ViewModel ! On peut faire tellement mieux, tellement plus interactif…
Pour cela XAML au travers de MAUI offrent de nombreuses solutions que je ne listerai pas ici car finalement c’est le sujet de Dot.Blog tout entier : comment tirer le meilleur de XAML, C# et de MAUI…
Mais on peut au moins citer parmi les moyens les plus évolués pour représenter les états du ViewModel la technique du Visual State Manager, un outil XAML d’une grande puissance auquel j’ai consacré une série de trois vidéos que je vous encourage à visionner si ce n’est pas déjà fait ! La vidéo a été tournée avec le support des Xamarin.Forms, c'est exactement la même chose sous MAUI donc n'hésitez pas à visualiser cette série !
Entre un simple Label dont le Text est bindé à une propriété du ViewModel et la machinerie sophistiquée du VSM il existe des tas d’autres moyens de rendre l’UI plus parlante, de mieux exposer l’état de l’application. Parmi tous ces moyens on pourrait se demander s’il ne serait pas possible de lier le Style d’un élément de l’UI à une propriété String du ViewModel indiquant le nom du style à appliquer, rendant ainsi le visuel dynamique.
Cela n’est pas possible directement pour deux raisons. La première est que la propriété Style des éléments d’UI est de type … Style et non String. Donc cela ne marchera pas de façon aussi simple. La seconde je vous arrête tout de suite, n’y pensez même pas, il n’est absolument pas raisonnable d’exposer une propriété de type Style dans un ViewModel. Jamais de manipulation directe de l’UI dans un ViewModel, l’essence même du découplage de MVVM se trouve dans ce principe !
Alors comment faire ?
Regarder cette video reste le moyen le plus simple d’avoir la réponse. Bon visionnage !
Lien direct YouTube : https://youtu.be/5Zb-f35vmQ8
Conclusion
Binder des styles n’est pas forcément l’idée la meilleure à appliquer partout et tout le temps, le VSM est là pour centraliser les représentations visuelles des états du ViewModel et le StateContainer du Toolkit dont je vous ai déjà parlé peut aussi être une solution intermédiaire, mais parfois il peut être intéressant de manipuler directement un style. Dans quels cas ? Peu importe, il en existe de nombreux forcément car une Vue n'a de sens que de refléter les états d'un ViewModel et ce dernier n'a de sens que celui de gérer des états ! Et connaître la technique à utiliser est une corde de plus à votre arc… Dot.Blog et Dot.Vlog sont là pour vous aider à ajouter de nouvelles cordes à chaque nouveau billet, à chaque nouvel épisode… alors…
Stay Tuned !