AppTheme Resources
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 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 ü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 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>
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.
.NET MAUI Community Toolkit