UWP App Theme

Eine durchaus häufigere Anforderung, ist es Apps durch den Benutzer oder Entwickler mit unterschiedlichen Style Vorlagen versehen zu können. Auch bekannt als themeable. Ein handfester Grund ist Apps für unterschiedliche Lichtverhältnisse zu optimieren. Eine App für Navigation soll nachts vor allem in schwarz gehalten sein um nicht zu blenden und Tags in Weiß um beste Lesbarkeit zu gewährleisten.

Jedes UI Element besitzt die Eigenschaft RequestedTheme, den aus einer ElementTheme Auflistung Dark, Light und Standard zugewiesen werden kann. In der Praxis wird man auf das oberste UI Element (z.B. ein Grid Layout Control) das Theme anwenden.

   1:   root.RequestedTheme = ElementTheme.Light

Damit erfolgt eine alternierende Darstellung von Button, Textbox und weiteren bewirkt, Ein Button wird je nachdem mit schwarz oder weißer Schrift  versehen. Dazu wird auch ein passender Hintergrund benötigt, der nicht automatisch gewechselt wird. Die Definition der Hintergrundfarben erfolgt am sinnvollsten als Resource in app.xaml.

   1:    <ResourceDictionary>
   2:              <ResourceDictionary.ThemeDictionaries>
   3:                  <ResourceDictionary x:Key="Default">
   4:                      <SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" 
Color="black" />
   5:                  </ResourceDictionary>
   6:   
   7:                  <ResourceDictionary x:Key="Light">
   8:                      <SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" 
Color="Silver" />
   9:                  </ResourceDictionary>

Die Ressource wird per speziellen Binding an die Background Eigenschaft des Layout Control gebunden. Im folgenden Beispiel wird zusätzlich das Theme voreingestellt auf “Dark”.

   1:  <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" 
   2:          Name="root" RequestedTheme="Dark">
   3:      

Der ThemeResource Code aus Zeile 1 wird von Visual Studio  in einem Universal Windows Projekt ganz automatisch angelegt. Außerdem wird in der Datei App.xaml das Attribut RequestedTheme auf “Light” gesetzt.

image

Kommentare sind geschlossen