Loupe

Le nouveau système de thèmes des Apps Window Store #Xaml de Windows 8.1

 

Vous souvenez-vous de Windows 8 ? Le thème de votre application(sombre ou clair) devait être indiqué une fois pour toute au lancement de votre application. Aussi, ce n’était pas possible de spécifier un contrôle en particulier : c’était particulièrement embêtant pour des contrôles comme les charms de settings où l’on souhaitait souvent qu’ils utilisent le thème opposé de celui de l’application. Il fallait alors tout refaire à la main

 

Tous ces problèmes ont maintenant disparus avec Windows 8.1.

(Ce post est aussi disponible en anglais)

Les thèmes peuvent être changés à l’éxecution

Sur Windows 8 vous deviez utiliser des StaticResource pour lire les valeurs du thème courant. Vous ne pouviez donc pas les mettre à jour dynamiquement car les StaticResources ne vont chercher la valeur qu’une fois : au moment où elles sont parsées.

Sur Windows 8.1 vous pouvez maintenant utiliser une nouvelle MarkupExtension nommée ThemeResource. La syntaxe est la même que celle de StaticResource mais cette ThemeResource va écouter les changements de thème pour mettre à jour le Control ciblé. Vous pouvez aussi le voir comme une DynamicResource de WPF s’abonnant uniquement au changement de thème plutôt qu’au changement de valeur de la resource.

Bien sûr, tous les templates de contrôles du framework utilisent maintenant cette markup extension et vous pouvez (devez!) l’utiliser dans vos propres templates. En réalité, vous pouvez même l’utiliser n’importe où dans votre XAML :

<Border
     RequestedTheme="Light"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

</Border>

Les thèmes peuvent être spécifiés par Control

Sur Windows 8, vous spécifiez la propriété RequestedTheme une fois pour toute sur votre Application (dans son constructeur par exemple) et vous ne pouviez pas l’indiquer pour un contrôle en particulier.

Maintenant, c’est une propriété de la classe FrameworkElement et vous pouvez donc la spécifiée pour chaque contrôle. Cete valeur est héritée par chacun des enfants de ce contrôle (logique car le mécanisme sous-jacent est le système de ressources).

Dans cet exemple, je change deux fois la valeur du thème dans l’arbre visuel :

<StackPanel RequestedTheme="Light"
            Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
       <TextBlock Text="Hello World !" />
       <Border RequestedTheme="Dark"
               Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <TextBlock Text="Another theme" />
       </Border>
</StackPanel>

Voici le rendu de ce XAML (Merci Infinite Square pour cette belle tablette Surface Pro Smile) :

Screenshot (1)

 

Attention, la valeur des resources du thème a une priorité très faible. Si vous spécifiez directement la valeur d’un attribut, utilisez une animation ou un style implicite, la valeur du thème sera négligée.

 

Petites infos supplémentaires

Quelques questions que l’on peut se poser et leur réponses :

  • Est-il possible de se binder sur cette propriété : oui ! Génial non ?
  • Peut-on changer la valeur dans le code ? Oui auss !
  • Quelle valeur de thème ont les enfants d’un contrôles : Ils ont la valeur “Default”. Cela signifie qu’ils vont hériter de la valeur de leur parent et donc pas nécessairement celle de l’application.
  • Peut on créer son propre thème ? Je n’ai rien vu de tel mais XAML est assez puissant pour pouvoir le faire sans cela.

Vous pouvez en savoir plus en téléchageant le sample “XAML requested theme sample (Windows 8.1)” de Microsoft.

Photo de profil

Ces billets pourraient aussi vous intéresser

Vous nous direz ?!

Commentaires

comments powered by Disqus