Personnaliser l’apparence de l’interface utilisateur en fonction de la plateforme et de l’idiome de l’appareil

Parcourir l'exemple

Les applications .NET Multiplateforme App UI (.NET MAUI) peuvent avoir leur interface utilisateur personnalisée pour des plateformes et des appareils spécifiques. Cela permet à votre application de :

• Utilisez l’espace le plus efficace. Si vous concevez une application pour qu’elle soit correcte sur un appareil mobile, l’application sera toujours utilisable sur un appareil de bureau, mais il y aura probablement un espace perdu. Vous pouvez personnaliser votre application pour afficher plus de contenu lorsque l’écran dépasse une certaine taille. Par exemple, une application d’achat peut afficher un élément à la fois sur un appareil mobile, mais peut afficher plusieurs éléments sur un appareil de bureau. En outre, en plaçant davantage de contenu à l’écran, vous pouvez réduire la quantité de navigation que les utilisateurs doivent effectuer.
• Tirez parti des fonctionnalités de l’appareil. Certains appareils sont plus susceptibles d’avoir certaines fonctionnalités. Par exemple, les appareils mobiles sont plus susceptibles d’avoir un capteur d’emplacement et une caméra, tandis que les appareils de bureau peuvent ne pas avoir l’un ou l’autre. Votre application peut détecter les fonctionnalités disponibles et activer les contrôles qui les utilisent.
• Optimisez les données d'entrée. Vous pouvez réorganiser vos éléments d’interface utilisateur pour optimiser les types d’entrée spécifiques. Par exemple, si vous placez des éléments de navigation en bas de l’application, ils seront plus faciles à accéder aux utilisateurs mobiles. Toutefois, les utilisateurs de bureau s’attendent souvent à voir les éléments de navigation vers le haut de l’application.

Lorsque vous optimisez l’interface utilisateur de votre application pour des plateformes et des idiomes d’appareil spécifiques, vous créez une interface utilisateur réactive. L’approche principale pour créer une interface utilisateur réactive dans .NET MAUI implique l’utilisation des classes OnPlatform<T> et OnIdiom<T>. Une autre approche consiste à utiliser les extensions de balisage XAML OnPlatform et OnIdiom. Toutefois, ces extensions de balisage ne sont pas sécurisées pour le découpage. Pour plus d’informations sur les extensions de balisage, consultez Personnaliser l’apparence de l’interface utilisateur avec les extensions de balisage.

Note

Il existe une catégorie de déclencheurs, appelés déclencheurs d’état, qui peuvent être utilisés pour personnaliser l’apparence de l’interface utilisateur dans des scénarios spécifiques tels que lorsque l’orientation d’un appareil change. Pour plus d’informations, consultez Le déclencheur d’état.

Personnaliser l’apparence de l’interface utilisateur en fonction de la plateforme

Les classes OnPlatform<T> et On vous permettent de personnaliser l’apparence de l’interface utilisateur selon la plateforme.

<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> est une classe générique et vous devez donc spécifier l’argument de type générique, dans ce cas, Thicknessqui est le type de Padding propriété. Cela est obtenu avec l’attribut x:TypeArguments XAML. La OnPlatform<T> classe définit une Default propriété qui peut être définie sur une valeur qui sera appliquée à toutes les plateformes :

<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>

Dans cet exemple, la Padding propriété est définie sur différentes valeurs sur iOS et Android, avec les autres plateformes définies sur la valeur par défaut.

La OnPlatform<T> classe définit également une Platforms propriété, qui est une IList de On objets. Chaque objet On peut définir les propriétés Platform et Value pour établir la valeur Thickness d’une plateforme spécifique. En outre, la On.Platform propriété est de type IList<string>, de sorte que vous pouvez inclure plusieurs plateformes délimitées par des virgules si les valeurs sont identiques :

<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>

La fourniture d’une valeur incorrecte Platform n’entraîne pas d’erreur. Au lieu de cela, votre code XAML s’exécute sans que la valeur spécifique à la plateforme soit appliquée.

Note

Si la Value propriété d’un On objet ne peut pas être représentée par une seule chaîne, vous pouvez définir des éléments de propriété pour celui-ci.

Personnaliser l’apparence de l’interface utilisateur en fonction de l’idiome de l’appareil

La OnIdiom<T> classe vous permet de personnaliser l’apparence de l’interface utilisateur en fonction de l’idiome de l’appareil sur lequel l’application s’exécute :

<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> est une classe générique et vous devez donc spécifier l’argument de type générique, dans ce cas, Thicknessqui est le type de Margin propriété. Cela est obtenu avec l’attribut x:TypeArguments XAML. La OnIdiom<T> classe définit une Default propriété qui peut être définie sur une valeur qui sera appliquée à toutes les plateformes :

<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>

Dans cet exemple, la Margin propriété est définie sur une valeur spécifique sur les idiomes de bureau, avec les autres idiomes définis sur la valeur par défaut.

Personnaliser l’apparence de l’interface utilisateur avec les extensions de balisage

L’apparence de l’interface utilisateur peut également être personnalisée avec les extensions de balisage OnPlatform et OnIdiom. Toutefois, ces extensions de balisage ne sont pas sans risque d'élagage.

Personnaliser l’apparence de l’interface utilisateur avec une extension de balisage basée sur la plateforme

L’extension de OnPlatform balisage vous permet de personnaliser l’apparence de l’interface utilisateur par plateforme. Il fournit les mêmes fonctionnalités que les classes OnPlatform<T> et On, mais avec une représentation plus concise.

L’extension de balisage OnPlatform est prise en charge par la classe OnPlatformExtension, qui définit les propriétés suivantes :

• Default, de type object, que vous définissez sur une valeur par défaut à appliquer aux propriétés qui représentent des plateformes.
• Android, de type object, que vous définissez sur une valeur à appliquer sur Android.
• iOS, de type object, que vous définissez sur une valeur à appliquer sur iOS.
• MacCatalyst, de type object, auquel vous attribuez une valeur à appliquer pour Mac Catalyst.
• Tizen, de type object, que vous avez assigné à une valeur pour la plateforme Tizen.
• WinUI, de type object, que vous définissez sur une valeur à appliquer sur WinUI.
• Converter, de type IValueConverter, qui peut être associé à une implémentation IValueConverter.
• ConverterParameter, de type object, qui peut être définie à une valeur à transmettre à l’implémentation IValueConverter.

Note

L’analyseur XAML permet à la classe OnPlatformExtension d’être abrégée comme OnPlatform.

La propriété Default est la propriété de contenu associée à OnPlatformExtension. Par conséquent, pour les expressions de balisage XAML exprimées avec accolades, vous pouvez éliminer la Default= partie de l’expression s’il s’agit du premier argument. Si la Default propriété n’est pas définie, elle est définie par défaut sur la valeur de la BindableProperty.DefaultValue propriété, à condition que l’extension de balisage cible un BindableProperty.

Important

L’analyseur XAML s’attend à ce que les valeurs du type correct soient fournies aux propriétés qui consomment l’extension de balisage OnPlatform. Si la conversion de type est nécessaire, l’extension de OnPlatform balisage tente de l’effectuer à l’aide des convertisseurs par défaut fournis par .NET MAUI. Toutefois, il existe certaines conversions de type qui ne peuvent pas être effectuées par les convertisseurs par défaut et, dans ces cas, la Converter propriété doit être définie sur une IValueConverter implémentation.

L’exemple XAML suivant montre comment utiliser l’extension de balisage 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" />

Dans cet exemple, les trois OnPlatform expressions utilisent la version abrégée du nom de classe OnPlatformExtension . Les trois extensions de balisage OnPlatform définissent les propriétés Color, WidthRequest et HeightRequest de BoxView à des valeurs différentes sur iOS et Android. Les extensions de balisage fournissent également des valeurs par défaut pour ces propriétés sur les plateformes qui ne sont pas spécifiées, tout en éliminant la Default= partie de l’expression.

Avertissement

L’extension OnPlatform de balisage n'est pas sécurisée pour l’optimisation et ne doit pas être utilisée avec l'optimisation maximale ou NativeAOT. Au lieu de cela, vous devez utiliser la classe pour personnaliser l’apparence de l’interface OnPlatform<T> utilisateur par plateforme. Pour plus d’informations, consultez Personnaliser l’apparence de l’interface utilisateur en fonction de la plateforme, Découper une application .NET MAUI et un déploiement AOT natif.

Personnaliser l’apparence de l’interface utilisateur avec une extension de balisage basée sur l’idiome de l’appareil

L’extension OnIdiom de balisage vous permet de personnaliser l’apparence de l’interface utilisateur en fonction de l’idiome de l’appareil sur lequel l’application s’exécute. Il fournit les mêmes fonctionnalités que la classe OnIdiom<T>, mais avec une représentation plus concise.

L’extension de balisage OnIdiom est prise en charge par la classe OnIdiomExtension, qui définit les propriétés suivantes :

• Default, de type object, que vous définissez sur une valeur par défaut à appliquer aux propriétés qui représentent les idiomes d’appareil.
• Phone, de type object, que vous définissez sur une valeur à appliquer sur les téléphones.
• Tablet, de type object, que vous définissez sur une valeur à appliquer sur les tablettes. Cette propriété n’est pas exclusive aux plateformes Android et iOS.
• Desktop, de type object, que vous définissez sur une valeur à appliquer sur les plateformes desktop. Notez que certains ordinateurs portables peuvent être classés à l’aide de la Tablet propriété.
• TV, de type object, que vous définissez sur une valeur à appliquer sur les plateformes TV.
• Watch, de type object, que vous définissez sur une valeur à appliquer pour les plateformes Watch.
• Converter, de type IValueConverter, qui peut être associé à une implémentation IValueConverter.
• ConverterParameter, de type object, qui peut être définie à une valeur à transmettre à l’implémentation IValueConverter.

Note

L’analyseur XAML permet à la classe OnIdiomExtension d’être abrégée comme OnIdiom.

La propriété Default est la propriété de contenu associée à OnIdiomExtension. Par conséquent, pour les expressions de balisage XAML exprimées avec accolades, vous pouvez éliminer la Default= partie de l’expression s’il s’agit du premier argument.

Important

L’analyseur XAML s’attend à ce que les valeurs du type correct soient fournies aux propriétés qui utilisent l'extension de balisage OnIdiom. Si la conversion de type est nécessaire, l’extension de OnIdiom balisage tente de l’effectuer à l’aide des convertisseurs par défaut fournis par .NET MAUI. Toutefois, il existe certaines conversions de type qui ne peuvent pas être effectuées par les convertisseurs par défaut et, dans ces cas, la Converter propriété doit être définie sur une IValueConverter implémentation.

L’exemple XAML suivant montre comment utiliser l’extension de balisage 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" />

Dans cet exemple, les trois OnIdiom expressions utilisent la version abrégée du nom de classe OnIdiomExtension . Les trois OnIdiom extensions de balisage définissent les propriétés Color, WidthRequest, et HeightRequest des BoxView à différentes valeurs pour les environnements téléphone, tablette et bureau. Les extensions de balisage fournissent également des valeurs par défaut pour ces propriétés sur les idiomes qui ne sont pas spécifiés, tout en éliminant la Default= partie de l’expression.

Avertissement

L’extension de balisage OnIdiom n'est pas sûre pour le découpage et ne doit pas être utilisée avec le trimming complet ou NativeAOT. Au lieu de cela, vous devez utiliser la classe pour personnaliser l’apparence OnIdiom<T> de l’interface utilisateur en fonction de l’idiome de l’appareil sur lequel l’application s’exécute. Pour plus d’informations, consultez Personnaliser l’apparence de l’interface utilisateur en fonction de l’idiome de l’appareil, découper une application .NET MAUI et un déploiement AOT natif.