AppTheme Resources

Avec AppThemeObject et AppThemeColor, vous pouvez créer pour votre application des ressources sensibles au thème qui sont automatiquement mises à jour lorsque le thème de l’appareil est mis à jour.

Les objets AppThemeObject et AppThemeColor sont des ressources sensibles au thème qui facilitent l’utilisation des couleurs, des images et d’autres ressources devant varier en fonction du thème actuel de l’application. Ces objets reposent sur les concepts de AppThemeBinding, disponible dans .NET MAUI, et facilitent l’utilisation de ces types de ressources dans un ResourceDictionary.

Pour cette raison, vous devez généralement utiliser ces API via l’extension de balisage ThemeResource en XAML.

Syntaxe

Y compris l’espace de noms XAML

Pour utiliser le kit de ressources dans XAML, le xmlns suivant doit être ajouté à votre page ou à votre affichage :

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

Il en résulte ce qui suit :

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

Serait modifié pour inclure le xmlns de la manière suivante :

<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

AppThemeObject est un objet générique sensible au thème qui vous permet de définir n’importe quel object pour les propriétés Light, Dark et Default. Étant donné que AppThemeObject n’est pas fortement typé, au moment de l’exécution, les valeurs de chaque propriété sont évaluées et castées.

Avertissement

Si le cast n’est pas valide, cela peut entraîner une exception d’exécution.

L’exemple suivant montre comment utiliser AppThemeObject au moyen d’un ResourceDictionary :

<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

AppThemeColor est un Color spécialisé sensible au thème qui vous permet de définir n’importe quel Color pour les propriétés Light, Dark et Default.

L’exemple suivant montre comment utiliser AppThemeColor au moyen d’un ResourceDictionary :

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

Consommer AppThemeColor et AppThemeResource avec des styles

Comme nous pouvons utiliser ces ressources sensibles au thème dans un ResourceDictionary, nous pouvons également les consommer avec un Style.

L’exemple suivant montre comment utiliser AppThemeColor au moyen d’un Style :

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

Extensibilité

AppThemeObject et AppThemeColor héritent de la classe abstraite AppThemeObject<T>. Si vous avez besoin d’une ressource plus fortement typée qui n’est pas disponible dans le kit d’outils de la communauté .NET MAUI, vous pouvez créer votre propre héritage.

Propriétés

Le tableau ci-dessous décrit les propriétés de AppThemeObject et de AppThemeColor. Pour AppThemeColor, les types de chaque propriété seront Color au lieu de object.

Propriété	Type	Description
Foncé	object	Valeur appliquée à la propriété à laquelle cette ressource est appliquée quand l’application utilise le thème sombre.
Par défaut	object	Valeur appliquée à la propriété à laquelle cette ressource est appliquée quand l’application utilise le thème clair ou sombre et qu’aucune valeur n’est fournie pour la propriété correspondante de ce thème.
Clair	object	Valeur appliquée à la propriété à laquelle cette ressource est appliquée quand l’application utilise le thème clair.

Exemples

Vous pouvez trouver un exemple de AppThemeResource en action dans l'exemple d'application de la boîte à outils de la communauté .NET MAUI.

API

Vous pouvez trouver le code source deAppThemeResource sur le référentiel du kit de ressources de la communauté .NET MAUI sur GitHub.