リソースの定義と使用

リソースは、プログラミング言語からのシンボリック定数のようなものです。 1 か所でこれを定義し、必要な場所がどこであれ、これを参照します。 "マジック" 値ではなく、わかりやすい名前を使用するため、コードは読みやすくなります。 値を変更しなければならないときは、定義を更新する必要があるだけです。

このモジュールでは、リソースを使用して、.NET Multi-Platform App UI (MAUI) で使用する Extensible Application Markup Language (XAML) からハードコーディングされた値を排除する方法について説明します。

リソースとは

リソースは、ご利用の UI 全体で共有できるすべてのオブジェクトです。 最も一般的な例は、フォント、色、サイズです。 ただし、リソースとして Style や OnPlatform のインスタンスなど複雑なオブジェクトも格納できます。

XAML またはコードのいずれかでリソースを定義します。 次に、XAML またはコードのいずれかでこれを適用します。 通常、XAML ですべての作業を行いますが、コードが便利ないくつかのケースも後で確認します。

例を考えてみましょう。 ページ上のコントロール全体で同じ TextColor 値を使用するとします。 ハードコーディングされた値を使用する場合、XAML は次のようになります。 2 つのコントロールでどのようにテキストの色の値が繰り返されているかに注意してください。

<Label TextColor="Blue" FontSize="14">
<Button TextColor="Blue" FontSize="14">

テキストの色を繰り返す代わりに、これをリソースとして定義できます。 定義はこの XAML のようになります。

<Color x:Key="PageControlTextColor">Blue</Color>

リソースに名前を付ける x:Key プロパティが、定義済みの要素にどのように含まれているかに注意してください。 このキーを使用して、XAML でリソースを検索します。

リソースを使用する前に、リソース ディクショナリに格納する必要があります。

ResourceDictionary とは

ResourceDictionary とは、UI リソースで使用するようにカスタマイズされた .NET MAUI ライブラリ クラスです。 これはディクショナリであるため、キーと値のペアが格納されます。 キーの型は String に制限されますが、値は任意のオブジェクトにすることができます。

すべての .NET MAUI XAML ページには、ResourceDictionary オブジェクトを保持できる Resources という名前のプロパティがあります。 このプロパティは既定では null であるため、これを使用する前にディクショナリのインスタンスを作成する必要があります。 次のコードは、ResourceDictionary オブジェクトを作成し、それを ContentPage の Resources プロパティに割り当てる方法を示しています。

<ContentPage.Resources>
    <ResourceDictionary>
        ...
    </ResourceDictionary>
</ContentPage.Resources>

.NET MAUI XAML には、Resources プロパティの使用を開始するたびに、ディクショナリのインスタンスを自動的に作成する、便利な機能が組み込まれています。 前の例を次のコードに簡略化できます。

<ContentPage.Resources>
    ...
</ContentPage.Resources>

アプリ内のすべてのページには、独自のディクショナリを含めることができます。 これらのページに固有のディクショナリを使用して、そのページにのみ使用されるリソースを格納します。

<Label Text="Hello, World!"
        ...
        <Label.Resources>
           ...
        </Label.Resources>
</Label>

リソースの作成

リソースを作成するには、ページの Resources プロパティ内でリソースを宣言します。 次の例では、前に説明したテキストカラー リソースを作成します

<ContentPage.Resources>
    <Color x:Key="PageControlTextColor">Blue</Color>
</ContentPage.Resources>

リソースのキーを選択するときは、リソースの値ではなく、使用を反映する名前を選択します。 たとえば、ラベルの背景を赤に設定するには、キーとして RedColor を使用しないで、代わりに BackgroundColor を使用します。

StaticResource を使用してリソースを適用する

StaticResource は、リソース ディクショナリ内のリソースを検索するためのマークアップ拡張です。 リソースのキーを指定すると、マークアップ拡張によって対応する値が返されます。 次の XAML マークアップは、Color という名前の リソースを作成して使用する例を示しています。 この例のラベル コントロールの XAML マークアップでは、StaticResource マークアップ拡張機能を使用して値を取得します。

<ContentPage.Resources>
    <Color x:Key="PageControlTextColor">Blue</Color>
</ContentPage.Resources>

...

<Label TextColor="{StaticResource PageControlTextColor}" ... />

拡張機能は 1 回のみ評価されるため、この拡張機能は StaticResource と呼ばれます。 ディクショナリの検索は、ターゲット オブジェクトが作成されるときに発生します。 ディクショナリ内のリソース値が変更された場合、ターゲット プロパティは更新されません。

XAML の組み込み型

このユニットの冒頭に示した元の例では、TextColor プロパティと FontSize プロパティを設定します。

<Label TextColor="Blue" FontSize="14">
<Button TextColor="Blue" FontSize="14">

FontSize プロパティには Double 型があります。 この値のリソースを作成するには、XAML 仕様で定義されている XAML 組み込み型のいずれかを使用します。 XAML 仕様により、C# 単純型の多くの型名が定義されています。 次のコードは、組み込み型のそれぞれのリソース例を示しています。

<ContentPage.Resources>
    <x:String x:Key="...">Hello</x:String>
    <x:Char x:Key="...">X</x:Char>
    <x:Single x:Key="...">31.4</x:Single>
    <x:Double x:Key="...">27.1</x:Double>
    <x:Byte x:Key="...">8</x:Byte>
    <x:Int16 x:Key="...">16</x:Int16>
    <x:Int32 x:Key="...">32</x:Int32>
    <x:Int64 x:Key="...">64</x:Int64>
    <x:Decimal x:Key="...">12345</x:Decimal>
    <x:TimeSpan x:Key="...">1.23:5959</x:TimeSpan>
    <x:Boolean x:Key="...">True</x:Boolean>
</ContentPage.Resources>

リソースのプラットフォーム固有の値を設定する

プラットフォーム間でアプリの UI を若干調整する必要があることは一般的なことです。 プラットフォーム固有の値を定義する標準的な方法は、リソースを定義するときに OnPlatform オブジェクトを使用することです。 たとえば、次のコードは、iOS、Android、macOS (Mac Catalyst)、Windows (WinUI) のさまざまなテキストの色を参照するリソースを作成する方法を示しています。

<ContentPage.Resources>
    <OnPlatform x:Key="textColor" x:TypeArguments="Color">
        <On Platform="iOS" Value="Silver" />
        <On Platform="Android" Value="Green" />
        <On Platform="WinUI" Value="Yellow" />
        <On Platform="MacCatalyst" Value="Pink" />
    </OnPlatform> 
</ContentPage.Resources>
...

<Label TextColor="{StaticResource textColor}" ... />