Utiliser et modifier les couleurs de thèmes sous Windows Phone 7
28 septembre 2010 Laisser un commentaire
Dans un précédent article, j’ai décrit comment utiliser les ressources de Windows Phone 7 pour accorder les polices en tailles, graisse, et couleur avec le reste du système. Dans cet article je vais me focaliser plus particulièrement sur les couleurs. Nous verrons ainsi comment utiliser les couleurs du système dans ses applications et comment les surcharger.
Utiliser les couleurs
Comme les tailles de police, les couleurs et brushes sont mises dans des fichiers de ressources présents dans le téléphone. Elles sont toutes définies par des clés pour y accéder en XAML via l’extension Propriete= »{StaticResource CléDeRessource} » ou en code via la propriété Application.Current.Resources[« CléDeRessource »].
Pour rappelle une Brush peut être une couleur, un dégradé ou bien une image. Toutes ces Brush sont de simples couleurs car les dégradés ne sont pas conseillés dans les guidelines de Metro étant donné les limitations des écrans 16bpp. Voici une liste non exhaustive de brushes qui peuvent être utilisées dans vos applications.
|
Clé de ressource
|
Utilisation
|
|
PhoneAccentBrush
|
Brush d’accentuation définie par le thème.
|
|
PhoneForegroundBrush
|
Brush utilisée pour les éléments de premier plan tels que le texte ou les icônes.
|
|
PhoneBackgroundBrush
|
Brush utilisée pour les éléments d’arrière-plan.
|
|
PhoneContrastBackgroundBrush
|
Brush de fond utilisée pour les éléments à mettre en contraste. Par exemple le fond des menus contextuels.
|
|
PhoneContrastForegroundBrush
|
Brush de premier plan utilisée pour les éléments à mettre en contraste. Par exemple les textes des menus contextuels.
|
|
PhoneDisabledBrush
|
Brush des éléments désactivés (par exemple un bouton désactivé)
|
|
PhoneSubtleBrush
|
Brush partiellement transparente qui permet de mettre en retrait des éléments visuels moins importants.
|
|
PhoneBorderBrush
|
Brush de bordure des contrôles TextBox, CheckBox, PasswordBox, et RadioButton.
|
|
PhoneSemitransparentBrush
|
Brush presque transparente permettant de faire ressortir des éléments de couleurs similaires (par exemple du texte blanc sur une image claire).
|
Ces brushes permettent d’une part de pouvoir faire des variations de couleurs tout en restant dans l’univers de l’utilisateur. Elles permettent également, si vous créez des contrôles personnalisés de conserver la cohérence visuelle avec le reste de votre application.
Modifier localement les ressources
Un autre aspect très intéressant de ces ressources est qu’elles sont naturellement utilisées par l’ensemble des contrôles Silverlight. On peut donc créer des applications cohérentes visuellement, en ne changeant que très peu de chose. Suivez le guide :
- Allez dans %ProgramFiles%\Microsoft SDKs\Windows Phone\v7.0\Design
- Copier le fichier ThemeResources.xaml dans votre projet
- Aller dans votre App.xaml
- Ajouter un ResourceDictionary dans les ressources de votre Application :
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Themes/ThemeResources.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
Vous pouvez à présent modifier localement les brushes afin de changer les couleurs de tous les éléments déjà présents. Par exemple le changement des ressources PhoneForegroundBrush, PhoneBackgroundBrush et et PhoneSubtleBrush permettent d’avoir une infinité de variations.
Accorder les images au thème
Pouvoir changer les couleurs du texte et du fond est une chose, mais dans une application avec des logos, cela ne suffit pas. J’ai vu pas plus tard qu’aujourd’hui une technique très intéressantes permettant d’accorder également les icônes aux couleurs système, que je me permets de reprendre. Source: http://advertboy.wordpress.com/2010/09/25/using-an-image-as-a-mask-so-that-wp7-themes-are-honoured/
Pour faire simple cette technique consiste à mettre un contrôle, par exemple un bouton si on veut un déclencher une action, ou un Border si on ne veut pas d’interaction. On va mettre tout d’abord sa couleur de fond à la couleur souhaité, disons PhoneForegroundBrush. On va ensuite créer une ImageBrush avec notre logo. On va enfin mettre cette ImageBrush comme OpacityMask de notre premier élément.
<Border
Background="{StaticResource PhoneForegroundBrush}"
Width="30"
Height="30"
VerticalAlignment="Center">
<Border.OpacityMask>
<ImageBrush Stretch="Uniform" ImageSource="restaurant.png"/>
</Border.OpacityMask>
</Border>
Résultat, nous avons créé un icône dont la couleur dépend du thème choisi. En action cela donne ça :
Ce que j’aime particulièrement dans cette technique est que cela peut marcher avec n’importe quelle couleur, y compris celles d’un thème modifié comme dans l’exemple précédent ou de la couleur d’accent par exemple.
Seul problème qui subsiste : admettons que vous avez une image qui n’est pas monochrome mais que voulez quand même changer selon que l’utilisateur utilise votre application en thème clair ou sombre. C’est là que vont servir les ressources PhoneDarkThemeVisibility et PhoneLightThemeVisibility (ainsi que PhoneDarkThemeOpacity et PhoneLightThemeOpacity). On va grâce à ses objets, pouvoir mettre deux images l’une sur l’autre. La visibilité de chaque image sera liée à la ressource qui lui correspond, à l’aide d’un converter qui affichera l’une ou l’autre selon le thème.
Les thèmes sont donc particulièrement pratiques et utiles sous WP7. Par défaut ils permettent de garder une cohérence visuelle au sein du système et quand on les surcharge, ils peuvent permettre de respecter une charte graphique pour une cohérence visuelle au sein de l’application elle-même.
Pour avoir une Tile plus native
Pour terminer, une astuce toute fraiche pour que les Tiles de vos application utilisent la couleur de thème que vos utilisateurs ont choisi : au lieu de mettre un fond, mettez un fond transparent et sauvegarder votre image en png avec support de la transparence. Et voilà, votre application n’a jamais paru aussi native !
Sebastien Mornas's Blog 