[WP7] Support du thème dans une application Silverlight
Parmi les problématiques qui peuvent se poser lors du développement pour Windows Phone 7 figure en bonne position la gestion du thème. En effet, le système permet à l’utilisateur de choisir entre plusieurs palettes de couleur, et notamment de choisir entre un arrière-plan foncé ou clair.
En quoi cela nous impacte-t-il ? Prenons l’exemple du tutoriel sur Snake.
Tout d’abord, changeons la couleur du thème dans l’émulateur (ou sur votre téléphone de développement). Petit rappel, cette option se trouve dans les paramètres –> thème –> Arrière-plan.
Maintenant que nous avons réglé les couleurs sur le blanc qui pique les yeux, lançons notre application et observons le résultat.
Première page, rien à signaler, tout s’affiche correctement.
Un petit clic sur “Start a new game” pour lancer la partie, et nous atterrissons sur notre page de jeu.
Le titre et le score s’affichent correctement, ainsi que la belle pomme bleue, mais le serpent et les murs ne sont visibles nulle part. Alors, que se passe-t-il ?
C’est assez simple. Pour les boutons et les zones de texte, nous avons à chaque fois utilisé soit un des styles fournis dans WP7, soit aucun style du tout. Dans ce dernier cas, le style par défaut de WP7 est sélectionné.
1: <TextBlock Text="Your score: " Style="{StaticResource PhoneTextLargeStyle}" />
2: <TextBlock x:Name="TextScore" Style="{StaticResource PhoneTextLargeStyle}" />
Nous sommes dans la configuration idéale : les styles fournis sont automatiquement changés lorsque l’utilisateur change de thème, et notre application s’adapte donc sans effort de notre part.
En revanche, les éléments de notre jeu proprement dit, à savoir le serpent, les murs, et la pomme, sont dessinés à l’écran en utilisant une couleur spécifiée en dur. La pomme reste visible, bleu sur fond blanc, mais nous ne pouvons pas en dire autant des autres éléments, blanc sur fond blanc.
Alors que faire ? Deux solutions s’offre à nous. La première solution est de forcer la couleur de l’arrière-plan (par exemple : noir). Solution qui a pour inconvénient de nous obliger à redéfinir la couleur de tous les éléments (le texte noir sur fond noir n’est pas un exemple de lisibilité), et nous nous retrouvons avec une application qui brise la charte graphique du système, ce qui est dommage. La seconde solution est tout simplement d’utiliser les couleurs définies dans les thèmes du système.
Cela se fait de manière simple, il suffit de puiser directement dans les ressources de l’application. Ainsi, au lieu d’écrire :
1: var rectangle = new Rectangle
2: {
3: Fill = new SolidColorBrush(Colors.White),
4: Height = Height,
5: Width = Width
6: };
Nous écrirons :
1: var rectangle = new Rectangle
2: {
3: Fill = new SolidColorBrush((Color)App.Current.Resources["PhoneForegroundColor"]),
4: Height = Height,
5: Width = Width
6: };
… et c’est tout !
Ce serait presque trivial, mais c’est un problème qu’il faut garder en permanence en tête lors de la création de l’interface d’une application, sous peine d’avoir en suite à repasser derrière pour revoir chacun des styles appliqués aux éléments.
Pour consulter l’ensemble des styles définis dans WP7, il suffit d’aller chercher dans le répertoire %ProgramFiles%\Microsoft SDKs\Windows Phone\v7.0\Design (ou %ProgramFiles(x86)%\Microsoft SDKs\Windows Phone\v7.0\Design sur un système 64 bits), et d’ouvrir le fichier ThemeResources.xaml avec un éditeur de texte.
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
