UWP Apps Theme wechseln

Anwender haben manchmal den Wunsch das Theme ihrer Anwendung zur Laufzeit zu wechseln. Gerade wechselnde Lichtverhältnisse lassen den Wunsch nach einen schnellen Switch zwischen dark und light aufkommen. Mit den Staticresources war das bisher nicht möglich. Windows 10 und seine UWP Apps bringen da was Neues.

Wer einen neue XAML Datei anlegt wird ganz automatisch über die neue Markup Extension ThemeResource stolpern.

   1:  <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

 

Die Details zu den vordefinierten Styles findet man in der Datei themeresources.xaml im Verzeichnis C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic

In der App.Xaml wird zwischen den Theme dark oder light so gewechselt.

   1:  <Application
   2:      x:Class="App6.App"
   3:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   4:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   5:      xmlns:local="using:App6"
   6:      RequestedTheme="Light"

Allerdings lässt sich das nach wie vor (auch WinRT Windows 8) nicht per Code zur Laufzeit auf diese Art umstellen.

   1:     App.Current.RequestedTheme = ApplicationTheme.Light

Das ergibt dann eine schöne System.NotSupportedException {"Specified method is not supported."}

Allerdings kann man auch in jeder Page oder jedem UI Element das Theme indivduell ändern.

   1:    <Grid RequestedTheme="Dark"

Deswegen wird nun ein ToggleSwitch verwendet um zwischen den zwei Themes umzuschalten. Die Eigenschaft kommt aber aus der Enumeration ElementTheme und nicht aus ApplicationTheme.

   1:   Private Sub toggleSwitch_Toggled(sender As System.Object, e As RoutedEventArgs) 
Handles toggleSwitch.Toggled
   2:          If sender.ison Then
   3:              root.RequestedTheme = ElementTheme.Light
   4:          Else
   5:              root.RequestedTheme = ElementTheme.Dark
   6:          End If
   7:  End Sub

Damit hat der Benutzer die Kontrolle über das genutzte Theme zur Laufzeit.

In der nächsten Ausbaustufe werden die Styles der Themes noch angepasst. Dies geschieht in der app.xaml und folgt der Struktur aus dem Dokument themeresources.xaml. Es lassen sich die Styles selektiv überschreiben, wie hier rein der Hintergrund.

   1:  <Application
   2:      x:Class="App6.App"
   3:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   4:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   5:      xmlns:local="using:App6"
   6:      RequestedTheme="Light"
   7:      >
   8:      <Application.Resources>
   9:          <ResourceDictionary>
  10:              <ResourceDictionary.ThemeDictionaries>
  11:                  <ResourceDictionary x:Key="Default">
  12:                      <SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" 
Color="green" />
  13:                  </ResourceDictionary>
  14:                  <ResourceDictionary x:Key="Light">
  15:                      <SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" 
Color="yellow" />
  16:                  </ResourceDictionary>
  17:                  <ResourceDictionary x:Key="HighContrast">
  18:                  </ResourceDictionary>
  19:              </ResourceDictionary.ThemeDictionaries>
  20:          </ResourceDictionary>
  21:      </Application.Resources>
  22:  </Application>
Kommentare sind geschlossen