XAML のプラットフォーム固有の値

  • 5 分

アプリの視覚エクスペリエンスは、プラットフォームによって異なります。 多くの場合、使用するビジュアル要素に基づいてプラットフォームごとに UI を微調整する必要があります。 .NET MAUI を使用すると、これらのデバイス プロパティに基づいてアプリのレイアウトを管理できます。

このユニットでは、アプリが実行されようとしているプラットフォームに応じてアプリの UI を調整できるようにするために .NET MAUI に用意されている機能について説明します。

Device クラスの使用

DeviceInfo クラスは、アプリを実行中のデバイスについてデバイス固有の情報を提供するユーティリティ クラスです。 この情報は、一連のプロパティを通じて公開されます。 最も重要なプロパティは DeviceInfo.Platform で、現在使用されているデバイスの種類を示す文字列 (Android、iOS、WinUI、macOS のいずれか) を返します。

この機能を使用する可能性がある場合の例として、次のシナリオについて考えてください。 .NET MAUI iOS アプリでは、ページに追加されたコンテンツが画面上部にある iOS ステータス バーの中に入るのが既定の動作です。 この動作を変更する必要があります。 最も簡単な解決策は、ページ内でコンテンツを下に移すことです。 前の演習で作成した Notes ソリューションでは、コンテンツを 60 ポイント下に移動するように VerticalStackLayout コントロールの Padding プロパティを設定することで、この問題に対処しています。

<VerticalStackLayout x:Name="MyStackLayout" Padding="30,60,30,30">
    ...
</VerticalStackLayout>

課題は、この問題が当てはまるのは iOS のみであることです。 Android と WinUI でコンテンツをこれほど下に下げることは、ページ上部の画面スペースの無駄となります。

DeviceInfo.Platform プロパティに対してクエリを実行し、この表示の問題を解決できます。 次のコードをアプリのページ コンストラクターに追加して、ページ上部でのパディングを拡張できます。しかし、有効なのは iOS の場合のみです。

MyStackLayout.Padding = 
    DeviceInfo.Platform == DevicePlatform.iOS
        ? new Thickness(30, 60, 30, 30) // Shift down by 60 points on iOS only
        : new Thickness(30); // Set the default margin to be 30 points

Note

DevicePlatform.iOS は、文字列値 iOS を返す DevicePlatform 構造体です。 サポートされているその他のプラットフォーム用に、同等のプロパティが存在します。 ハードコーディングされた文字列と比較するのではなく、これらのプロパティを使用するべきです。これは良いプラクティスで、将来、これらの文字列値の一部が変更されたとしても、コードを使い続けられるようにします。

このコードは動作しますが、これはページの分離コード ファイル内にあります。 このパディングは、ユーザー インターフェイス固有の値です。 これは分離コードからではなく、XAML から行う方がほぼ間違いなく適切で便利です。

OnPlatform マークアップ拡張の使用

.NET MAUI XAML には、XAML コード内からランタイム プラットフォームを検出することを可能とする OnPlatform マークアップ拡張が用意されています。 このマークアップ拡張は、プロパティ値を設定する XAML コードの一部として適用できます。 この拡張では、プラットフォームに従ってプロパティ値を設定する一連の On Platform ブロックと一緒にプロパティの種類を指定する必要があります。

Note

OnPlatform マークアップ拡張はジェネリックであり、型パラメーターを受け取ります。 TypeArguments 属性で指定される型によって、正しい型の拡張子が確実に使用されます。

このような Padding プロパティを設定できます。 Padding プロパティの型は Thickness であることに注目してください。

<VerticalStackLayout>
    <VerticalStackLayout.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="30,60,30,30" />
        </OnPlatform>
    </VerticalStackLayout.Padding>
    <!--XAML for other controls goes here -->
    ...
</VerticalStackLayout>

iOS 以外のプラットフォームの場合、パディングは既定値の "0,0,0,0" に設定されたままになります。 WinUI と Android の場合、次のような追加の OnPlatform ブロックを使用してパディングを 30 ポイントに設定できます。

<VerticalStackLayout>
    <VerticalStackLayout.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="30,60,30,30" />
            <On Platform="Android" Value="30" />
            <On Platform="WinUI" Value="30" />
        </OnPlatform>
    </VerticalStackLayout.Padding>
    ...
</VerticalStackLayout>

これと同じ手法を他のプロパティに適用できます。 次の例では、ページ上のスタック レイアウトの背景色を、iOS では銀、Android では緑、Windows では黄色に変更しています。

<VerticalStackLayout>
    ...
    <VerticalStackLayout.BackgroundColor>
        <OnPlatform x:TypeArguments="Color">
            <On Platform="iOS" Value="Silver" />
            <On Platform="Android" Value="Green" />
            <On Platform="WinUI" Value="Yellow" />
        </OnPlatform>
    </VerticalStackLayout.BackgroundColor>
    ...
</VerticalStackLayout>

この構文は少し冗長ですが、OnPlatform 拡張機能で使用できる、単純化した構文があります。 パディングを設定する例を、次のように簡略化できます。

<VerticalStackLayout Padding="{OnPlatform iOS='30,60,30,30', Default='30'}">
    <!--XAML for other controls goes here -->
</VerticalStackLayout>

任意のプラットフォーム固有の値と一緒に、プロパティの既定値を指定できます。 この形式では、OnPlatform 属性が適用されるプロパティから型パラメーターが推論されます。

背景色を設定するために、上記の 2 番目の例の代わりに、次の XAML フラグメントを使用できます。

<VerticalStackLayout BackgroundColor="{OnPlatform WinUI=Yellow, iOS=Silver, Android=Green}">
    ...
</VerticalStackLayout>

知識チェック

1.

アプリが実行中であるプラットフォームを検出するために XAML コードで使用できるマークアップ拡張はどれですか?

2.

OnPlatform 拡張機能の TypeArguments 属性の目的は何ですか?