Dot.Blog

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

Xamarin.Forms : Lier un Style par binding ?

Refléter l’état du ViewModel dans l’UI peut se faire via le Visual State Manager, mais est-il possible de le faire par des Styles bindés au ViewModel ? Oui, avec un peu de ruse… Découvrez la réponse dans Dot.Vlog épisode 18 !

Dot.Vlog Episode 18

2019-03-21 22_23_34-TechSmith Camtasia 2018Déjà le 18ème épisode de Dot.Vlog le complément vidéo de Dot.Blog !

Dot.Vlog permet d’échapper aux longs articles bourrés de captures d’écran en proposant une vidéo parlante, dynamique et visuelle par essence. Certains articles se prêtent ainsi mieux à l’image qu’à l’écrit.

Né en septembre 2018 Dot.Vlog n’a que 8 mois environ mais a déjà 18 vidéos à son palmarès ! Si certains épisodes au départ ont pu atteindre voire dépasser l’heure, le format qui s’est dégagé est désormais de respecter une durée de 20 à 30 minutes en moyenne. Sans être des face cam, j’apparais dans ces vidéos pour un contact plus humain, plus direct et plus vivant qu’une simple capture écran avec une voix off.

Préparer une vidéo même de 30 minutes demande plusieurs heures, préparation du “studio”, de l’écran vert, des prises différentes, du micro, puis du montage, des effets jusqu’au long upload sur YouTube, sa fiche d’information… sans compter le temps de préparer le plus important : le sujet et la réalisation parfois longue du code de la démo, les tests et le debug inévitable, la connexion du Mac pour les captures iOS, … bref c’est du taf !

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 à rameuter tous les fous du cross-plateforme avec les Xamarin.Forms Winking smile

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 les Xamarin.Forms 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 des Xamarin.Forms…

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 !

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 l’épisode 18 de Dot.Vlog reste le moyen le plus simple d’avoir la réponse. Bon visionnage !

Lien direct YouTube : https://youtu.be/RrzRpI4zXZs

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, mais parfois il peut être intéressant de manipuler directement un style. Dans quels cas ? Peu importe, il en existe de nombreux forcément. 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 !

blog comments powered by Disqus