AppTheme Resources

[アーティクル]
03/19/2024

AppThemeObject と AppThemeColor を使用すると、デバイステーマの更新時に自動的に更新されるアプリケーションのテーマ認識リソースを作成できます。

AppThemeObject および AppThemeColor オブジェクトは、アプリの現在のテーマに応じて変更する必要がある色、画像、その他のリソースを簡単に操作できるようにするテーマ認識リソースです。これらのオブジェクトは、.NET MAUI で利用できる AppThemeBinding という概念に基づいて構築され、ResourceDictionary 内のこれらの種類のリソースを簡単に操作できるようにします。

このため、通常は XAML の ThemeResource マークアップ拡張機能を通じてこれらの API を使用するべきです。

構文

XAML 名前空間を含める

XAML でこのツールキットを使用するには、次の xmlns をページまたはビューに追加する必要があります。

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

したがって、以下のコードは、

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

次のように、xmlns を含むように変更されます。

<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 は汎用的なテーマ認識オブジェクトであり、任意の object を Light、Dark、Default プロパティに設定できるようにします。 AppThemeObject は厳密に型指定されていないため、各プロパティの値は実行時に評価されキャストされます。

警告

キャストが無効な場合は、ランタイム例外が発生する可能性があります。

次の例は、ResourceDictionary を通して AppThemeObject を使用する方法を示しています。

<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 は、特殊なテーマ認識 Color であり、これを使用すると Color を Light、Dark、Default プロパティに設定できます。

次の例は、ResourceDictionary を通して AppThemeColor を使用する方法を示しています。

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

スタイルを通した AppThemeColor と AppThemeResource の使用

ResourceDictionary でこれらのテーマ認識リソースを使用できるということは、Style を通してこれらを使用することもできることを意味します。

次の例は、Style を通して AppThemeColor を使用する方法を示しています。

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

拡張性

AppThemeObject と AppThemeColor は両方とも抽象クラスである AppThemeObject<T> を継承します。 .NET MAUI Community Toolkit で利用できない、より厳密に型指定されたリソースが必要な場合は、独自の継承を作成できます。

プロパティ

以下の表は、AppThemeObject および AppThemeColor のプロパティを示しています。 AppThemeColor に関しては、各プロパティの型は object ではなく Color になります。

プロパティ	タイプ	説明
暗い	`object`	アプリがダークテーマを使用するときに、このリソースが適用されるプロパティに適用される値。
既定値	`object`	アプリがライトテーマまたはダークテーマを使用し、そのテーマの対応するプロパティに値が指定されていない場合に、このリソースが適用されるプロパティに適用される値。
"ライト"	`object`	アプリがライトテーマを使用するときに、このリソースが適用されるプロパティに適用される値。

例

AppThemeResource の動作の例は、「.NET MAUI Community Toolkit サンプルアプリケーション」で確認できます。

API

AppThemeResource のソースコードは、.NET MAUI Community Toolkit の GitHub リポジトリにあります。

次の方法で共有