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

  • [アーティクル]

Browse sample.サンプルを表示する

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

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

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

Note

デバイスの向きが変わるなど、特定のシナリオで UI の外観をカスタマイズするために使用できるトリガーのカテゴリ (状態トリガーと呼ばれます) があります。 詳細については、「状態トリガー」をご覧ください。

プラットフォームに基づいて 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 実装に設定できます。
  • ConverterParameter (object 型): IValueConverter 実装に渡す値に設定できます。

Note

XAML パーサーでは、OnPlatformExtension クラスを OnPlatform に短縮できます。

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

重要

XAML パーサーでは、OnPlatform マークアップ拡張機能を使用するプロパティに正しい型の値が指定されることを想定しています。 型変換が必要な場合、 OnPlatform マークアップ拡張機能は、.NET MAUI に用意されている既定のコンバーターを使用して変換を試みます。 ただし、既定のコンバーターでは実行できない型変換がいくつかあります。その場合、Converter プロパティを IValueConverter 実装に設定する必要があります。

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 は、タブレットに適用する値に設定します。
  • object 型の Desktop は、デスクトップ プラットフォームに適用する値に設定します。
  • object 型の TV は、TV プラットフォームに適用する値に設定します。
  • object 型の Watch は、Watch プラットフォームに適用する値に設定します。
  • IValueConverter 型の Converter は、IValueConverter 実装に設定できます。
  • object 型の ConverterParameter は、IValueConverter 実装に渡す値に設定できます。

Note

XAML パーサーでは、OnIdiomExtension クラスを OnIdiom に短縮できます。

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

重要

XAML パーサーは、OnIdiom マークアップ拡張機能を使用するプロパティに正しい型の値が提供されることを想定しています。 型変換が必要な場合、OnIdiom マークアップ拡張機能は、.NET MAUI によって提供される既定のコンバーターを使用して実行を試みます。 ただし、既定のコンバーターでは実行できない型変換がいくつかあります。その場合、Converter プロパティを IValueConverter 実装に設定する必要があります。

次の 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= 部分を削除します。