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

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

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

Device クラスの使用

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

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

<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

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

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

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

このような 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>