AppTheme-resurser

Med AppThemeObject och AppThemeColor kan du skapa temamedvetna resurser för ditt program som uppdateras automatiskt när enhetstemat uppdateras.

Objekten AppThemeObject och AppThemeColor är temamedvetna resurser som gör det enklare att arbeta med färger, bilder och andra resurser som behöver ändras beroende på appens aktuella tema. Dessa objekt bygger på begreppen i AppThemeBinding som finns i .NET MAUI och gör det enklare att arbeta med dessa typer av resurser i en ResourceDictionary.

Därför bör du vanligtvis använda dessa API:er via markeringstillägget ThemeResource i XAML.

Syntax

Inklusive XAML-namnområdet

För att kunna använda verktygslådan i XAML måste följande xmlns läggas till på sidan eller vyn:

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

Därför följande:

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

Skulle ändras för att inkludera xmlns på följande sätt:

<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 är ett allmänt temamedvetent objekt som gör att du kan ange valfritt object för Lightegenskaperna och DarkDefault . Eftersom AppThemeObject det inte är starkt skrivet utvärderas och castas värdena för varje egenskap vid körning.

I följande exempel visas hur du använder AppThemeObject via en 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 är en specialiserad temamedveten Color som låter dig ange en Color för egenskaperna Light, Dark och Default.

I följande exempel visas hur du använder AppThemeColor via en 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>

Använda AppThemeColor och AppThemeResource via formatmallar

Eftersom vi kan använda dessa temamedvetna resurser i en ResourceDictionaryinnebär det att vi också kan använda dem via en Style.

I följande exempel visas hur du använder AppThemeColor via en 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>

Utökningsbarhet

Både AppThemeObject och AppThemeColor ärver från den abstrakta klassen AppThemeObject<T>. Om du behöver en mer starkt typad resurs som inte är tillgänglig i .NET MAUI Community Toolkit kan du skapa ett eget arv.

Egenskaper

Tabellen nedan beskriver egenskaperna för AppThemeObject och AppThemeColor. För AppThemeColor blir typen för varje egenskap Color i stället för object.

Exempel

Du hittar ett exempel på AppThemeResource i praktiken i .NET MAUI Community Toolkit-exempelprogrammet.

API

Källkoden för AppThemeResource finns på lagringsplatsen .NET MAUI Community Toolkit GitHub.