Stylisez votre Silverlight comme du CSS en utilisant les styles implicites

Comme vous le savez probablement, Silverlight 4 nous arrive avec son lot de nouveautés.  Loin de moi l’intention de vous en faire une liste, ce sujet a déjà été couvert par un grand nombre de sites.  Cependant, je souhaite attirer votre attention sur une nouveauté de Silverlight 4 qui existait déjà en WPF : le Implicit Styling.  Ça simplifie grandement le skinning d’une application Silverlight.

Bon, ce n’est pas une révélation, ça permet de changer globalement l’apparence d’un contrôle sans être obligé de toujours relier ce dernier à un style en utilisant un lien de ressource du type <Button Style=”{StaticResource BasicButtonStyle}”>…</Button>.

Le web sémantique, ça vous dit quelque chose ?

C’est une expression bien à la mode dans les agences web, surtout depuis l’avènement du Web 2.0.  Hormis le buzzword, l’aspect sémantique permet de séparer à peu près totalement le contenu de la présentation.  Un peu à la manière de ce blog, il n’y a aucune indication dans le texte qui indique de quelle couleur le texte doit s’afficher, de quelle grandeur doit être un titre, etc.…  c’est le CSS qui décide comment ça s’affiche.

Comment ça marche ?  C’est simple : c’est l’aspect sémantique qui détermine comment (et où) s’affiche un élément dans une page.  Quand un mot est dans une balise <p> dans la zone centrale, il a une certaine apparence.  Si le même mot se retrouvait dans une balise <p> de manière identique, mais que ce dernier soit dans une barre latérale (par exemple), il peut s’afficher de manière totalement différente.  Ce n’est donc pas le contenu qui détermine son style, mais plutôt sa position ou, plus précisément, sa signification.  D’où l’appellation généraliste web sémantique pour désigner cette technique.

Comment fait-on du sémantique en Silverlight ?

Avant l’introduction des Implicit Styles dans Silverlight 4, ce n’était pas possible.  Mais depuis, on peut s’inspirer du CSS pour créer des zones et appliquer des style sur ce zones.

Voyons tout d’abord un bout de xaml qui va servir d’exemple :

Ce qui donne le rendu suivant :

Supposons maintenant que nous plaçions ce code dans un UserControl appelé UnstyledContent, car on va le réutiliser plusieurs fois.  Maintenant, si on l’utilise, on peut styliser le contenu en appliquant des styles implicites sur un contenant parent.  Voici un exemple :

Le résultat sera alors ainsi :

Comme vous pouvez voir, il est possible de changer l’apparence du contenu de manière localisée sans toutefois changer le style global.

Maintenant, comment je gère ça ?

Il est également possible de mettre les styles dans un dictionnaire et le référencer dans le contentant parent.  Voici comment l’on fait :

Et voilà!!!  C’est tout.  Ainsi, le style utilisé est défini dans un dictionnaire.  Attention cependant si vous utilisez Microsoft Expression Blend pour créer le dictionnaire : ce dernier va ajouter une référence vers le nouveau dictionnaire dans le App.xaml, vous devrez l’enlever manuellement.  Je n’ai pas trouvé comment l’empêcher.

Vous pouvez également téléchargez mon projet test pour mieux comprendre la technique : SemanticStyling