プラットフォームとデバイスの表現形式に基づいて UI の外観をカスタマイズする

サンプルを参照する

.NET Multi-Platform App UI (.NET MAUI) アプリでは、特定のプラットフォームやデバイス用に UI をカスタマイズできます。 これにより、アプリでは次のことができます。

• スペースを最大限に活用します。 モバイル デバイスで見栄えがするようにアプリを設計する場合、そのアプリはデスクトップ デバイスでも使用できますが、ほとんどの場合、無駄なスペースがあります。 画面が一定のサイズを超える場合は、より多くのコンテンツを表示するように、アプリをカスタマイズできます。 たとえば、ショッピング アプリでは、モバイル デバイスに一度に 1 つの品目が表示されますが、デスクトップ デバイスには複数の品目が表示される場合があります。 さらに、より多くのコンテンツを画面に表示すると、ユーザーが実行する必要があるナビゲーションの量を減らすことができます。
• デバイスの機能を活用します。 特定のデバイスは、特定のデバイス機能を持つ傾向があります。 たとえば、モバイル デバイスには、位置センサーとカメラが付属している可能性が高く、デスクトップ デバイスには、どちらも付属していない可能性が高くなります。 アプリでは、利用できる機能を検出し、それを使用するコントロールを有効にすることができます。
• 入力を最適化します。 UI 要素を再配置して、特定の入力の種類に合わせて最適化できます。 たとえば、アプリの下部にナビゲーション要素を配置すると、モバイル ユーザーがアクセスしやすくなります。 ただし、デスクトップ ユーザーは多くの場合、アプリの上部にナビゲーション要素が表示されることを期待しています。

アプリの UI を特定のプラットフォームやデバイスのイディオムに合わせて最適化すると、レスポンシブな UI になります。 .NET MAUI でレスポンシブな UI を作成するための主なアプローチでは、OnPlatform マークアップ拡張機能と OnIdiom マークアップ拡張機能を使用する必要があります。

プラットフォームに基づいて UI の外観をカスタマイズする

OnPlatform マークアップ拡張では、プラットフォームごとに UI の外観をカスタマイズできます。 これは、OnPlatform<T> および On クラスと同じ機能を提供しますが、表現がより簡潔になっています。

OnPlatform マークアップ拡張機能は、次のプロパティを定義する OnPlatformExtension クラスによってサポートされています。

• Default (object 型): プラットフォームを表すプロパティに適用される既定値に設定します。
• Android (object 型): Android で適用される値に設定します。
• iOS (object 型): iOS で適用される値に設定します。
• MacCatalyst (object 型): Mac Catalyst で適用される値に設定します。
• Tizen (object 型): Tizen プラットフォームで適用される値に設定します。
• WinUI (object 型): WinUI で適用される値に設定します。
• Converter (IValueConverter 型): IValueConverter 実装に設定できます。
• object 型の ConverterParameter は、IValueConverter 実装に渡す値に設定できます。

Default プロパティは、OnPlatformExtension のコンテンツ プロパティです。 そのため、中かっこで囲まれた XAML マークアップ式では、最初の引数であれば、式の Default= 部分を削除できます。 Default プロパティが設定されていない場合は、マークアップ拡張機能のターゲットが BindableProperty であれば、BindableProperty.DefaultValue プロパティ値が既定値になります。

OnPlatform デモ ページでは、OnPlatform マークアップ拡張機能の使用方法を示しています。

<BoxView Color="{OnPlatform Yellow, iOS=Red, Android=Green}"
         WidthRequest="{OnPlatform 250, iOS=200, Android=300}"
         HeightRequest="{OnPlatform 250, iOS=200, Android=300}"
         HorizontalOptions="Center" />

この例では、3 つの OnPlatform 式はすべて、OnPlatformExtension クラス名の省略形を使用しています。 3 つの OnPlatform マークアップ拡張機能では、BoxView の xref:Microsoft.Maui.Graphics.Color、WidthRequest、HeightRequest の各プロパティを、iOS と Android で異なる値に設定しています。 このマークアップ拡張機能では、明示されていないプラットフォーム上のこれらのプロパティの既定値も指定されていますが、式の Default= 部分は省略されています。

デバイスのイディオムに基づいて UI の外観をカスタマイズする

OnIdiom マークアップ拡張機能を使用すると、アプリが実行されているデバイスのイディオムに基づいて UI の外観をカスタマイズできます。 これは、次のプロパティを定義する OnIdiomExtension クラスでサポートされています。

• object 型の Default は、デバイスのイディオムを表すプロパティに適用する既定値に設定します。
• object 型の Phone は、電話に適用する値に設定します。
• object 型の Tablet は、タブレットに適用する値に設定します。 このプロパティは、Android および iOS プラットフォーム専用のものではありません。
• object 型の Desktop は、デスクトップ プラットフォームに適用する値に設定します。 一部のラップトップは、Tablet プロパティを使用して分類される場合があることに注意してください。
• object 型の TV は、TV プラットフォームに適用する値に設定します。
• object 型の Watch は、Watch プラットフォームに適用する値に設定します。
• IValueConverter 型の Converter は、IValueConverter 実装に設定できます。
• object 型の ConverterParameter は、IValueConverter 実装に渡す値に設定できます。

Default プロパティは、OnIdiomExtension のコンテンツ プロパティです。 そのため、中かっこで囲まれた XAML マークアップ式では、最初の引数であれば、式の Default= 部分を削除できます。

次の XAML の例では、OnIdiom マークアップ拡張機能を使用する方法を示します。

<BoxView Color="{OnIdiom Yellow, Phone=Red, Tablet=Green, Desktop=Blue}"
         WidthRequest="{OnIdiom 100, Phone=200, Tablet=300, Desktop=400}"
         HeightRequest="{OnIdiom 100, Phone=200, Tablet=300, Desktop=400}"
         HorizontalOptions="Center" />

この例では、3 つの OnIdiom 式はすべて、OnIdiomExtension クラス名の省略形を使用します。 3 つの OnIdiom マークアップ拡張機能は、BoxView の Color、WidthRequest、HeightRequest の各プロパティを、電話、タブレット、デスクトップのイディオムで異なる値に設定します。 マークアップ拡張機能は、指定されていないイディオムでもこれらのプロパティの既定値を設定します。また、式の Default= 部分を削除します。