Vous savez qu’il existe différents types de contrôle, dont certains qu’on a pu découvrir dans le dernier billet.

Utiliser des contrôles c’est bien, mais qu’elle tristesse si toutes les applications devaient avoir la même apparence. Vous l’aurez compris, nous allons apprendre à changer le visuel de nos contrôles.

Afin de designer, de modifier le comportement graphique, Silverlight met à notre disposition les styles et les templates.

Les propriétés

Comme pour les contrôles en ASP.NET il est possible de spécifier une couleur, une taille , un type pour la police utilisée …. Cette méthode est rapide à appliquer, mais non flexible car non réutilisable pour un autre contrôle et ne permet pas d’apporter d’importantes modifications.

Les styles:

En créant un style vous avez la possibilité de changer les propriétés pour un type de contrôle. Cela signifie que vous allez pouvoir réutiliser ces styles pour d’autres contrôles du même type. Pour qu'il soit accessible à l’ensemble des contrôles dans votre usercontrol, le style doit être créé en tant que ressource avec une clé unique assignée à la propriété x:Key. Il ne reste plus qu’à appliquer le style en remplissant la propriété style du contrôle avec le mot clé StaticResource.

Les templates:

Chaque contrôle est constitué d’un template par défaut. L’avantage avec Silverlight est que l’on peut redéfinir entièrement ce template et donc modifier totalement le visuel de notre contrôle en créant un ControlTemplate. Un radiobutton peut par exemple avoir l’aspect d’une image rectangulaire…

Comme pour les styles le nouveau template peut être créé dans les ressources ou localement. On peut également le définir via les styles par la propriété Template. En résumant deux contrôles peuvent avoir un visuel totalement différent, mais la logique applicative n’est pas changée.

Prenons le cas d’un cas d’un contrôle personnalisé (pas un usercontrol). Ce contrôle peut être constitué d’autres contrôles. L’ensemble des styles qui lui sont appliqués sont stockés dans un fichier generic.xaml. Qu’il s’agisse d’un ContentControl, d’un ItemControl ou autres, il hérite de Control et implémente un ensemble de propriétés comme Background, BorderBrush, FontStyle, FontFamily… Ces propriétés peuvent être associées au ControlTemplate via Binding et plus précisément TemplateBinding qui correspondant à un Binding OneWay, c’est à dire à une lecture de la valeur. Ainsi on peut imaginer la réalisation de deux contrôles utilisant le même template mais avec un Background ou un BorderBrush différent, puisque ces derniers sont spécifiés au niveau du contrôle et non dans le ControlTemplate.

Pour les contrôles héritant de ContentControl / ItemsControl l’utilisation  d’un ContentPresenter / ItemsPresenter pourra être faite dans le ControlTemplate pour afficher les données.

Voici quelques exemples pour démontrer ce que nous venons de voir.

Template créé localement:

Template créé dans les ressources et donc réutilisable:

Template créé avec les styles:

Le DataTemplate:

Contrairement au ControlTemplate, le DataTemplate n’a pas vocation à redéfinir  l’ensemble de la structure visuelle du contrôle, mais seulement la partie présentation des données. Comme précédemment on peut le définir localement, en tant  que Ressource  ou dans les styles.

Dans le cas de l’utilisation d’un ContentControl / ItemsControl il sera associé à la propriété ContentTemplate / ItemTemplate. Le ContentPresenter / ItemsPresenter que l’on peut utiliser dans un ControlTemplate est lié par défaut  à ce ContentTemplate / ItemTemplate.

Enfin, la dernière manipulation à réaliser est la liaison du DataTemplate avec le source de données grâce au Binding.

Changer l’état du contrôle:

Vous avez peut être remarqué que l’apparence  d’un contrôle change en fonction  de son état. Si on prend pour exemple un bouton, le style va changer si l’on clique dessus, ou alors au survol de celui-ci.
Pour définir ces différents états on créé des VisualStates qui vont contenir des StoryBoards destinées à modifier l’apparence d’un ou plusieurs éléments du contrôle au cours du temps.
Chaque VisualState est catégorisé dans un VisualStateGroup. Il existe des VisualStateGroups par défaut. Pour le bouton on a CommonStates qui comprend comme VisualState Normal, MouseOver,Pressed….. Pour une checkbox on a également CheckStates avec Checked, Unchecked et Indeterminate.
Si vous souhaitez aller plus loin vous pouvez également regarder du côté des VisualTransitions qui permettent de réaliser une animation durant la transition d’un état à un autre, car un VisualState prend 1 seconde pour se déclencher.
Pour l’instant nous avons vu que le côté interface. Lors de la présentation sur la création d’un contrôle de A à Z nous aborderons la notion de contrat qui contient notamment les VisualStates et qui permet d’appliquer par l’intermédiaire du VisualStateManager et de la méthode GoToState un VisualState déterminé par la logique du contrôle.

Voilà, j’espère que cette présentation sur les styles vous permettra de faire de jolis contrôles :)