AppTheme Resources

Artikel
03/18/2024

Mit AppThemeObject und AppThemeColor können Sie designfähige Ressourcen für Ihre Anwendung erstellen, die automatisch aktualisiert werden, wenn das Gerätedesign aktualisiert wird.

Bei den AppThemeObject- und AppThemeColor-Objekten handelt es sich um designfähige Ressourcen, die das Arbeiten mit Farben, Bildern und anderen Ressourcen erleichtern, die je nach aktuellem Design der App geändert werden müssen. Diese Objekte bauen auf den Konzepten der in .NET MAUI verfügbaren AppThemeBinding auf und erleichtern die Arbeit mit diesen Ressourcentypen in einer ResourceDictionary.

Aus diesem Grund sollten Sie diese APIs in der Regel über die ThemeResource-Markuperweiterung in XAML verwenden.

Syntax

Einbinden des XAML-Namespace

Um das Toolkit in XAML verwenden zu können, muss der folgende xmlns-Abschnitt zu Ihrer Seite oder Ansicht hinzugefügt werden:

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Der folgende Abschnitt:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

Würde dann geändert werden, um xmlns einzubinden:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

AppThemeResource

Das AppThemeObject ist ein generisches designfähiges Objekt, mit dem Sie jede object auf die Light-, Dark- und Default-Eigenschaften festlegen können. Da AppThemeObject nicht stark typiert ist, werden zur Runtime die Werte für jede Eigenschaft ausgewertet und umgewandelt.

Warnung

Wenn die Umwandlung ungültig ist, kann dies zu einer Runtime-Ausnahme führen.

Das folgende Beispiel zeigt, wie Sie AppThemeObject über eine ResourceDictionary verwenden:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <ContentPage.Resources>
        <toolkit:AppThemeObject Light="dark.png" Dark="light.png" x:Key="MyImageSource" />
    </ContentPage.Resources>

    <VerticalStackLayout>
        <Image Source="{toolkit:AppThemeResource MyImageSource}" />
    </VerticalStackLayout>
</ContentPage>

AppThemeColor

Die AppThemeColor ist eine spezielle designfähige Color, mit der Sie eine Color auf die Light-, Dark- und Default-Eigenschaften festlegen können.

Das folgende Beispiel zeigt, wie Sie AppThemeColor über eine ResourceDictionaryverwenden:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <ContentPage.Resources>
        <toolkit:AppThemeColor Light="Red" Dark="Green" x:Key="LabelTextColor" />
    </ContentPage.Resources>

    <VerticalStackLayout>
        <Label TextColor="{toolkit:AppThemeResource LabelTextColor}" />
    </VerticalStackLayout>
</ContentPage>

Verwenden von AppThemeColor und AppThemeResource über Formatvorlagen

Da wir diese designfähigen Ressourcen in einer ResourceDictionary verwenden können, bedeutet dies, dass wir sie auch über eine Style konsumieren können.

Das folgende Beispiel zeigt, wie Sie AppThemeColor über eine Styleverwenden:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <ContentPage.Resources>
        <toolkit:AppThemeColor Light="Red" Dark="Green" x:Key="LabelTextColor" />

        <Style x:Key="Headline" TargetType="Label">
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="FontSize" Value="10" />
            <Setter Property="TextColor" Value="{toolkit:AppThemeResource LabelTextColor}" />
        </Style>
    </ContentPage.Resources>

    <VerticalStackLayout>
        <Label Style="{StaticResource Headline}" />
    </VerticalStackLayout>
</ContentPage>

Erweiterungen

Sowohl AppThemeObject als auch AppThemeColor erben von der abstrakten Klasse AppThemeObject<T>. Wenn Sie eine stärker typierte Ressource benötigen, die im .NET MAUI Community Toolkit nicht verfügbar ist, können Sie eine eigene Vererbung erstellen.

Eigenschaften

In der folgenden Tabelle werden die Eigenschaften für AppThemeObject und AppThemeColor beschrieben. Für AppThemeColor werden die Typen jeder Eigenschaft Color anstelle von object sein.

Eigenschaft	Typ	Beschreibung
Dunkel	`object`	Der Wert, der auf die Eigenschaft angewendet wird, auf die diese Ressource angewendet wird, wenn die App das dunkle Design verwendet.
Standard	`object`	Der Wert, der auf die Eigenschaft angewendet wird, auf die diese Ressource angewendet wird, wenn die App das helle oder dunkle Design verwendet, und es wird kein Wert für die entsprechende Eigenschaft dieses Designs bereitgestellt.
Hell	`object`	Der Wert, der auf die Eigenschaft angewendet wird, auf die diese Ressource angewendet wird, wenn die App das helle Design verwendet.

Beispiele

Ein konkretes Beispiel für AppThemeResource in Aktion finden Sie in der Beispielanwendung für das .NET MAUI Community Toolkit.

API

Sie finden den Quellcode für AppThemeResource über das GitHub-Repository für das .NET MAUI Community Toolkit.

Freigeben über