AppTheme-Ressourcen

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.

Die AppThemeObject- und AppThemeColor-Objekte sind designabhängige Ressourcen, die die Arbeit mit Farben, Bildern und anderen Ressourcen erleichtern, die sich je nach aktuellem Design der App ändern. Diese Objekte basieren auf den Konzepten des in .NET MAUI verfügbaren AppThemeBinding 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"

Daher Folgendes:

<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 geändert werden, um xmlns wie folgt einzufügen:

<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 designabhängiges Objekt, mit dem Sie für die Light-, Dark- und Default-Eigenschaften ein beliebiges object festlegen können. Da AppThemeObject nicht stark typisiert ist, werden die Werte für jede Eigenschaft zur Laufzeit ausgewertet und typkonvertiert.

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 spezialisierte designabhängige Color, mit der Sie eine Color für die Light-, Dark- und Default-Eigenschaften festlegen können.

Das folgende Beispiel zeigt, wie Sie AppThemeColor ü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:AppThemeColor Light="Red" Dark="Green" x:Key="LabelTextColor" />
    </ContentPage.Resources>

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

Verwenden von AppThemeColor und AppThemeResource mittels Stilen

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 Style 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: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>

Erweiterbarkeit

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.

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.