Windows 8.1 Theme Ressourcen und Templates

Wenn Ihr in Visual Studio eine Windows Store Applikation mit dem ‘Blank App (XAML)’ Template erstellt, dann habt Ihr eine Page (MainPage.xaml) zur Verfügung, die dank Microsoft schon recht nett (mit dem Hintergrund schwarz, genauer Color="#FF1D1D1D" ) aussieht.

ABER….woher kommt der Hintergrund für das Grid Control?
Öffnen wir dazu einmal die MainPage.xaml, dort sehen wir dann, dass dem Backgrond eine markup extension zugewiesen wird.

In Visual Studio 2012 (Store 8.0 App) sieht das so aus:

In Visual Studio 2013 (Store 8.1) sieht das nun so aus:

Egal, welche Version ihr habt, das Problem bleibt das Gleiche: Welchen Wert hat ApplicationPageBackgroundThemeBrush?
In Visual Studio 2012 kommen wir der Sache noch etwas näher, da haben wir im Verzeichnis Common die Datei StandardStyles.xaml.
Nur, da werden wir auch nicht fündig….und in Visual Studio 2013 (bzw. Windows 8.1 Projekten) gibt es diese Datei nicht mehr (Tipp: falls Ihr nun die Liste der verfügbaren Buttons sucht für den Segoe UI Symbol font, diese findet ihr hier), da die IDE euch kräftig unterstützt und die Ressourcen nun eher versteckt. Mit Visual Studio 2013 könnt Ihr die Styles nun so hinzufügen:

Rechte Maustaste im Designer und Edit Style, danach Apply Ressource – es werden euch alle vorhandenen Ressourcen angezeigt). Als Beispiel habe ich einen TextBlock in meinem Grid eingefügt, dann sieht das so aus wie in dem Bild rechts

ThemeResources

Des Rätsels Lösung ist, dass ApplicationPageBackgroundThemeBrush einer der  System Brush Ressourzen, das bedeutet, dass wir die Definition hier finden:
"c:\Program Files (x86)\Windows Kits\8.0\Include\winrt\xaml\design\themeresources.xaml"
bzw. für Windows 8.1 hier:
"c:\Program Files (x86)\Windows Kits\8.1\Include\winrt\xaml\design\themeresources.xaml"
ThemeResources.xaml enthält die resource dictionaries für den Dark (Default), Light und HighContrast Theme.
Die Datei Generic.xaml (die Ihr auch in dem Verzeichnis findet) enthält die default styles und Templates für die Meisten der XAML Controls.
Wenn Ihr in dieser Datei nach ApplicationPageBackgroundThemeBrush sucht, dann findet Ihr die System Ressouce:
<SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" Color="#FF1D1D1D" />

Eigene Ressoucen

Ein kleiner Tipp, falls Ihr noch nicht so fit seit mit der XAML Syntax, versucht einmal eine eigene Definition anzulegen.

• Geht dazu zu den Eigenschaften des Grid Controls und sucht die BAckground Eigenschaft.
• Dort klickt Ihr auf das kleine Rechteck auf der rechten Seite und wählt Convert to New Resouce…
• In dem neuen Dialog vergebt einen sinnvollen Namen (z. B. NewBackgroundBrush) und klickt OK.
• Ändert nun den Wert für die Color von #FF1D1D1D auf z. B. #FF1DFF1D (das ergibt einen hellgrünen Hintergrund)

Das Resultat sieht dann so aus:

Aber zurück zu unseren System Ressourcen. Wir wissen nun, wo diese zu finden sind, aber wie kann man sich diese Liste vernünftig ansehen (wenn ReSharper nicht installiert ist, der im XAML Bereich großartige Unterstützung leistet)?

System Ressourcen in Blend

Hier kommt Expression Blend in’s Spiel. Öffnet Expression Blend und lassen wir uns die Liste anzeigen, das geht folgendermaßen:

• Rechstklick auf der Mainpage.xaml und Open in Blend...
• Achtet darauf, dass das Grid Control angewählt ist in Blend – am Besten Ihr klickt es einmal an
  (in "Objects and timeline" sollte das "[Grid]" aktiv (hellgrauer Hintergrund) sein.)
• Rechts oben im Properties-Fenster solltet Ihr bereits auf Brush stehen.
• Darunter steht "Background: No brush"
• Darunter sind 5 Buttons.
• Dort sollte der Button ganz rechts angewählt sein ("Brush resources").

Voila, hier ist die Liste mit den zugehörigen Farben zu sehen:

Zusammenfassung

Ich hoffe mit diesem Blog-Eintrag euch ein klein wenig weiter geholfen zu haben und euch ist nun etwas klarer, was die XAML System Ressourcen sind und wo diese zu finden sind aber vor allem auch, welche Einträge es gibt, damit Ihr diese effektiv in euren Windows 8.1 Applikationen anwenden könnt.