Auf Änderungen des Systemthemas reagieren

Durchsuchen Sie das Beispiel

Geräte enthalten in der Regel helle und dunkle Designs, die jeweils auf eine breite Palette von Darstellungseinstellungen verweisen, die auf Betriebssystemebene festgelegt werden können. Apps sollten diese Systemdesigns berücksichtigen und sofort reagieren, wenn sich das Systemdesign ändert.

Das Systemdesign kann sich je nach Gerätekonfiguration aus verschiedenen Gründen ändern. Dies schließt das Systemdesign ein, das explizit vom Benutzer geändert wird, es ändert sich aufgrund der Tageszeit und aufgrund von Umgebungsfaktoren wie geringem Licht.

.NET Multi-Platform App UI (.NET MAUI)-Apps können auf Systemdesignänderungen reagieren, indem Ressourcen mit der AppThemeBinding-Markuperweiterung und den SetAppThemeColor- und SetAppTheme<T>-Erweiterungsmethoden verwendet werden.

Der folgende Screenshot zeigt Themenseiten für das Helle Systemdesign unter iOS und das dunkle Systemdesign unter Android:

Themenressourcen definieren und nutzen

Ressourcen für helle und dunkle Designs können mit der Markup-Erweiterung AppThemeBinding sowie den Erweiterungsmethoden SetAppThemeColor und SetAppTheme<T> genutzt werden. Bei diesen Ansätzen werden Ressourcen automatisch auf Grundlage des Werts des aktuellen Systemthemas angewendet. Darüber hinaus werden Objekte, die diese Ressourcen verbrauchen, automatisch aktualisiert, wenn sich das Systemdesign ändert, während eine App ausgeführt wird.

AppThemeBinding-Markuperweiterung

Mit der AppThemeBinding Markuperweiterung können Sie eine Ressource, z. B. ein Bild oder eine Farbe, basierend auf dem aktuellen Systemdesign nutzen.

Die AppThemeBinding Markuperweiterung wird von der AppThemeBindingExtension Klasse unterstützt, die die folgenden Eigenschaften definiert:

• Default, vom Typ object, den Sie für die Standardmäßige Verwendung der Ressource festgelegt haben.
• Light, vom Typ object, den Sie auf die Ressource festlegen, die verwendet werden soll, wenn das Gerät sein helles Design verwendet.
• Dark, vom Typ object, den Sie für die Ressource festlegen, die verwendet werden soll, wenn das Gerät sein dunklen Design verwendet.
• Value, vom Typ object, das die Ressource zurückgibt, die derzeit von der Markup-Erweiterung verwendet wird.

Die Default-Eigenschaft ist die Inhaltseigenschaft von AppThemeBindingExtension. Daher können Sie für XAML-Markupausdrücke, die mit geschweiften Klammern ausgedrückt werden, den Ausdrucksteil Default= beseitigen, sofern es sich um das erste Argument handelt.

Das folgende XAML-Beispiel zeigt, wie die AppThemeBinding-Markuperweiterung verwendet wird:

<StackLayout>
    <Label Text="This text is green in light mode, and red in dark mode."
           TextColor="{AppThemeBinding Light=Green, Dark=Red}" />
    <Image Source="{AppThemeBinding Light=lightlogo.png, Dark=darklogo.png}" />
</StackLayout>

In diesem Beispiel wird die Textfarbe des ersten Label auf Grün festgelegt, wenn das Gerät sein helles Design verwendet und auf Rot festgelegt wird, wenn das Gerät das dunkle Design verwendet. Entsprechend zeigt die Image Anzeige eine andere Bilddatei basierend auf dem aktuellen Systemdesign an.

Ressourcen, die in einer ResourceDictionary definiert sind, können in einer AppThemeBinding mit der Markuperweiterung StaticResource verwendet werden:

<ContentPage ...>
    <ContentPage.Resources>

        <!-- Light colors -->
        <Color x:Key="LightPrimaryColor">WhiteSmoke</Color>
        <Color x:Key="LightSecondaryColor">Black</Color>

        <!-- Dark colors -->
        <Color x:Key="DarkPrimaryColor">Teal</Color>
        <Color x:Key="DarkSecondaryColor">White</Color>

        <Style x:Key="ButtonStyle"
               TargetType="Button">
            <Setter Property="BackgroundColor"
                    Value="{AppThemeBinding Light={StaticResource LightPrimaryColor}, Dark={StaticResource DarkPrimaryColor}}" />
            <Setter Property="TextColor"
                    Value="{AppThemeBinding Light={StaticResource LightSecondaryColor}, Dark={StaticResource DarkSecondaryColor}}" />
        </Style>

    </ContentPage.Resources>

    <Grid BackgroundColor="{AppThemeBinding Light={StaticResource LightPrimaryColor}, Dark={StaticResource DarkPrimaryColor}}">
      <Button Text="MORE INFO"
              Style="{StaticResource ButtonStyle}" />
    </Grid>    
</ContentPage>    

In diesem Beispiel ändert sich die Hintergrundfarbe des Grid und der Button Stil basierend darauf, ob das Gerät sein helles oder dunkles Thema verwendet.

Darüber hinaus können Ressourcen, die in einem ResourceDictionary definiert sind, auch in einem AppThemeBinding mit der DynamicResource Markup-Erweiterung genutzt werden:

<ContentPage ...>
    <ContentPage.Resources>
        <Color x:Key="Primary">DarkGray</Color>
        <Color x:Key="Secondary">HotPink</Color>
        <Color x:Key="Tertiary">Yellow</Color>
        <Style x:Key="labelStyle" TargetType="Label">
            <Setter Property="Padding" Value="5"/>
            <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Secondary}, Dark={StaticResource Primary}}" />
            <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={DynamicResource Primary}, Dark={DynamicResource Secondary}}" />
        </Style>
    </ContentPage.Resources>
    <Label x:Name="myLabel"
           Style="{StaticResource labelStyle}"/>
</ContentPage>

Erweiterungsmethoden

.NET MAUI enthält SetAppThemeColor und SetAppTheme<T> Erweiterungsmethoden, mit denen VisualElement Objekte auf Änderungen des Systemthemas reagieren können.

Mit der SetAppThemeColor-Methode können Color-Objekte angegeben werden, die basierend auf dem aktuellen Systemthema auf einer Zieleigenschaft festgelegt werden.

Label label = new Label();
label.SetAppThemeColor(Label.TextColorProperty, Colors.Green, Colors.Red);

In diesem Beispiel wird die Textfarbe des Steuerelements Label auf Grün festgelegt, wenn das Gerät das helle Design verwendet und auf Rot festgelegt, wenn das Gerät das dunkle Design verwendet.

Mit der SetAppTheme<T> Methode können Objekte vom Typ T angegeben werden, die basierend auf dem aktuellen Systemdesign für eine Zieleigenschaft festgelegt werden:

Image image = new Image();
image.SetAppTheme<FileImageSource>(Image.SourceProperty, "lightlogo.png", "darklogo.png");

In diesem Beispiel zeigt die Imagelightlogo.png an, wenn das Gerät das helle Thema verwendet, und darklogo.png, wenn das Gerät das dunkle Thema verwendet.

Ermitteln Sie das aktuelle Systemthema

Das aktuelle Systemdesign kann erkannt werden, indem der Wert der Application.RequestedTheme Eigenschaft abgerufen wird:

AppTheme currentTheme = Application.Current.RequestedTheme;

Die RequestedTheme Eigenschaft gibt ein Enumerationselement AppTheme zurück. Die AppTheme-Aufzählung definiert die folgenden Elemente:

• Unspecified, der angibt, dass das Gerät ein nicht spezifiziertes Thema verwendet.
• Light, der angibt, dass das Gerät sein helles Design verwendet.
• Dark, das angibt, dass das Gerät sein dunkles Thema verwendet.

Festlegen des aktuellen Benutzerdesigns

Das von der App verwendete Design kann mit der Application.UserAppTheme Eigenschaft festgelegt werden, die vom Typ ist AppTheme, unabhängig davon, welches Systemdesign derzeit betriebsbereit ist:

Application.Current.UserAppTheme = AppTheme.Dark;

In diesem Beispiel wird die App so eingestellt, dass das für den dunklen Systemmodus definierte Design verwendet wird, unabhängig davon, welches Systemdesign derzeit betriebsbereit ist.

Auf Themenänderungen reagieren

Das Systemdesign auf einem Gerät kann sich aus verschiedenen Gründen ändern, je nachdem, wie das Gerät konfiguriert ist. .NET MAUI-Apps können benachrichtigt werden, wenn sich das Systemthema ändert, indem das Application.RequestedThemeChanged Event behandelt wird.

Application.Current.RequestedThemeChanged += (s, a) =>
{
    // Respond to the theme change
};

Das AppThemeChangedEventArgs Objekt, das das RequestedThemeChanged Ereignis begleitet, weist eine einzelne Eigenschaft mit dem Namen RequestedThemedes Typs AppThemeauf. Diese Eigenschaft kann untersucht werden, um das angeforderte Systemthema zu erkennen.