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

参照サンプル。サンプル を参照

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

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

特定のプラットフォームとデバイスのイディオムに合わせてアプリの UI を最適化すると、応答性の高い UI が作成されます。 .NET MAUI で応答性の高い UI を作成するための主なアプローチは、OnPlatform<T> クラスと OnIdiom<T> クラスの使用です。 別の方法として、OnPlatform と OnIdiom XAML マークアップ拡張機能を使用します。 ただし、これらのマークアップ拡張機能はトリミングに安全ではありません。 マークアップ拡張機能の詳細については、「マークアップ拡張機能を使用して UI の外観をカスタマイズする」を参照してください。

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

OnPlatform<T> クラスと On クラスを使用すると、プラットフォームごとに UI の外観をカスタマイズできます。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="0,20,0,0" />
            <On Platform="Android" Value="10,20,20,10" />
        </OnPlatform>
    </ContentPage.Padding>
    ...
</ContentPage>

OnPlatform<T> はジェネリック クラスであるため、ジェネリック型引数 (この場合はプロパティの型である Thickness) Padding 指定する必要があります。 これは、x:TypeArguments XAML 属性を使用して実現されます。 OnPlatform<T> クラスは、すべてのプラットフォームに適用される値に設定できる Default プロパティを定義します。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" Default="20">
            <On Platform="iOS" Value="0,20,0,0" />
            <On Platform="Android" Value="10,20,20,10" />
        </OnPlatform>
    </ContentPage.Padding>
    ...
</ContentPage>

この例では、Padding プロパティは iOS と Android で異なる値に設定され、他のプラットフォームは既定値に設定されています。

OnPlatform<T> クラスは、On オブジェクトの IList である Platforms プロパティも定義します。 各 On オブジェクトは、特定のプラットフォームの Thickness 値を定義する Platform と Value プロパティを設定できます。 さらに、On.Platform プロパティは IList<string>型であるため、値が同じ場合は、複数のコンマ区切りプラットフォームを含めることができます。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" Default="20">
            <On Platform="iOS, Android" Value="10,20,20,10" />
        </OnPlatform>
    </ContentPage.Padding>
    ...
</ContentPage>

正しくない Platform 値を指定しても、エラーは発生しません。 代わりに、プラットフォーム固有の値が適用されずに XAML が実行されます。

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

OnIdiom<T> クラスを使用すると、アプリが実行されているデバイスのイディオムに基づいて UI の外観をカスタマイズできます。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Margin>
        <OnIdiom x:TypeArguments="Thickness">
            <OnIdiom.Phone>0,20,0,0</OnIdiom.Phone>
            <OnIdiom.Tablet>0,40,0,0</OnIdiom.Tablet>
            <OnIdiom.Desktop>0,60,0,0</OnIdiom.Desktop>
        </OnIdiom>
    </ContentPage.Margin>
    ...
</ContentPage>

OnIdiom<T> はジェネリック クラスであるため、ジェネリック型引数 (この場合はプロパティの型である Thickness) Margin 指定する必要があります。 これは、x:TypeArguments XAML 属性を使用して実現されます。 OnIdiom<T> クラスは、すべてのプラットフォームに適用される値に設定できる Default プロパティを定義します。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Margin>
        <OnIdiom x:TypeArguments="Thickness" Default="20">
            <OnIdiom.Desktop>0,60,0,0</OnIdiom.Desktop>
        </OnIdiom>
    </ContentPage.Margin>
    ...
</ContentPage>

この例では、Margin プロパティはデスクトップのイディオムの特定の値に設定され、他のイディオムは既定値に設定されています。

マークアップ拡張機能を使用して UI の外観をカスタマイズする

UI の外観は、OnPlatform と OnIdiom マークアップ拡張機能を使用してカスタマイズすることもできます。 ただし、これらのマークアップ拡張機能はトリミングには適しません。

プラットフォームに基づいてマークアップ拡張機能を使用して UI の外観をカスタマイズする

OnPlatform マークアップ拡張機能を使用すると、プラットフォームごとに UI の外観をカスタマイズできます。 OnPlatform<T> クラスや On クラスと同じ機能を提供しますが、より簡潔に表現できます。

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

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

Default プロパティは、OnPlatformExtensionの content プロパティです。 そのため、中かっこで表現された XAML マークアップ式の場合、式の Default= 部分が最初の引数である場合は削除できます。 Default プロパティが設定されていない場合、マークアップ拡張機能が BindablePropertyを対象としている場合は、既定で BindableProperty.DefaultValue プロパティ値になります。

次の XAML の例は、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 の Color、WidthRequest、および HeightRequest プロパティを iOS と Android 上の異なる値に設定します。 マークアップ拡張では、指定されていないプラットフォーム上のこれらのプロパティの既定値も提供されますが、式の Default= 部分は除外されます。

デバイスのイディオムに基づいてマークアップ拡張機能を使用して UI の外観をカスタマイズする

OnIdiom マークアップ拡張機能を使用すると、アプリが実行されているデバイスの慣用句に基づいて UI の外観をカスタマイズできます。 OnIdiom<T> クラスと同じ機能を提供しますが、より簡潔に表現できます。

OnIdiom マークアップ拡張は、次のプロパティを定義する OnIdiomExtension クラスでサポートされています。

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

Default プロパティは、OnIdiomExtensionの content プロパティです。 そのため、中かっこで表現された 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= 部分は除外されます。