Prostředky AppTheme

Článek
11/11/2023

Pomocí AppThemeObject a AppThemeColor můžete vytvořit prostředky s podporou motivu pro vaši aplikaci, které se automaticky aktualizují při aktualizaci motivu zařízení.

Tyto AppThemeObject prostředky a AppThemeColor objekty jsou prostředky podporující motivy, které usnadňují práci s barvami, obrázky a dalšími prostředky, které je potřeba změnit v závislosti na aktuálním motivu aplikace. Tyto objekty vycházejí z konceptů AppThemeBinding , které jsou k dispozici v rozhraní .NET MAUI, a usnadní práci s těmito typy prostředků v nástroji ResourceDictionary.

Z tohoto důvodu byste tato rozhraní API obvykle měli používat prostřednictvím ThemeResource rozšíření značek v XAML.

Syntaxe

Zahrnutí oboru názvů XAML

Pokud chcete použít sadu nástrojů v XAML, musíte do stránky nebo zobrazení přidat následující xmlns položky:

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

Proto platí následující:

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

Bylo by změněno tak, aby zahrnovalo xmlns následující:

<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

Jedná se AppThemeObject o obecný objekt s podporou motivu, který umožňuje nastavit libovolný object objekt pro LightDark a Default vlastnosti . Vzhledem k tomu AppThemeObject , že není silného typu, budou hodnoty pro každou vlastnost vyhodnoceny a přetypovány za běhu.

Upozorňující

Pokud je přetypování neplatné, může to vést k výjimce za běhu.

Následující příklad ukazuje, jak použít prostřednictvím AppThemeObject 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

Jedná se AppThemeColor o specializovaný motivColor, který umožňuje nastavit Color pro LightDark objekty a Default vlastnosti.

Následující příklad ukazuje, jak použít prostřednictvím AppThemeColor 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>

Využívání AppThemeColor a AppThemeResource prostřednictvím stylů

Vzhledem k tomu, že tyto prostředky s ohledem na motivy můžeme použít v , ResourceDictionarycož znamená, že je můžeme také využívat prostřednictvím .Style

Následující příklad ukazuje, jak použít prostřednictvím AppThemeColor 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>

Rozšiřitelnost

Obě AppThemeObject a AppThemeColor dědí z abstraktní třídy AppThemeObject<T>. Pokud potřebujete prostředek se silnějším typem, který není k dispozici v komunitní sadě nástrojů .NET MAUI, můžete vytvořit vlastní dědičnost.

Vlastnosti

Následující tabulka popisuje vlastnosti pro AppThemeObject a AppThemeColor. Pro AppThemeColor, typy každé vlastnosti budou Color místo object.

Vlastnost	Type	Popis
Tmavý	`object`	Hodnota použitá u vlastnosti, na kterou se tento prostředek použije, když aplikace používá tmavý motiv.
Výchozí	`object`	Hodnota použitá u vlastnosti, na kterou se tento prostředek použije, když aplikace používá světlý nebo tmavý motiv a pro odpovídající vlastnost tohoto motivu není zadaná žádná hodnota.
Světlý	`object`	Hodnota použitá u vlastnosti, na kterou se tento prostředek použije, když aplikace použije světlý motiv.

Příklady

Příklad AppThemeResource akce najdete v ukázkové aplikaci .NET MAUI Community Toolkit.

rozhraní API

Zdrojový kód AppThemeResource najdete v úložišti .NET MAUI Community Toolkit na GitHubu.

Sdílet prostřednictvím