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

Parcourir l'exemple

Il est possible de personnaliser l’interface utilisateur des applications .NET Multi-Platform App UI (.NET MAUI) en fonction des plateformes et des appareils. Cela permet à votre application de :

• Utiliser l’espace de la manière la plus efficace possible. Si vous concevez une application pour qu’elle soit esthétique sur un appareil mobile, l’application sera toujours utilisable sur un appareil de bureau, mais il y aura probablement un peu d’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 en afficher plusieurs sur un appareil de bureau. En outre, en plaçant davantage de contenu à l’écran, vous pouvez réduire la navigation que les utilisateurs doivent effectuer.
• Tirez parti des fonctionnalités des appareils. 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 n’avoir aucun des deux. Votre application peut détecter les fonctionnalités disponibles et activer les contrôles qui les utilisent.
• Optimisez la saisie. Vous pouvez réorganiser les éléments de votre interface utilisateur afin de les optimiser pour des 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 d’accès pour les utilisateurs mobiles. Mais les utilisateurs d’ordinateurs de bureau s’attendent souvent à voir les éléments de navigation en haut de l’application.

Lorsque vous optimisez l’interface utilisateur de votre application pour des idiomes d’appareil et de plateformes spécifiques, vous créez une interface utilisateur réactive. Les principales approches de création d’une interface utilisateur réactive dans .NET MAUI impliquent l’utilisation des extensions de balisage OnPlatform et OnIdiom.

Remarque

Il existe une catégorie de déclencheurs, connus sous le nom de déclencheurs d’état, qui peuvent être utilisés pour personnaliser l’apparence de l’interface utilisateur dans des scénarios spécifiques, par exemple lorsque l’orientation d’un appareil change. Pour plus d’informations, consultez Déclencheur d’état.

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

L’extension de balisage OnPlatform vous permet de personnaliser l’apparence de l’interface utilisateur pour chaque 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, que vous définissez sur une valeur à appliquer sur Mac Catalyst.
• Tizen, de type object, que vous avez défini sur une valeur à appliquer sur la plateforme Tizen.
• WinUI, de type object, que vous définissez sur une valeur à appliquer sur WinUI.
• Converter, de type IValueConverter, qui peut être défini sur une implémentation IValueConverter.
• ConverterParameter, de type object, qui peut être défini sur une valeur à passer à l’implémentation IValueConverter.

Remarque

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

La propriété Default est la propriété de contenu de OnPlatformExtension. Par conséquent, pour les expressions de balisage XAML exprimées avec des accolades, vous pouvez éliminer la partie Default= de l’expression s’il s’agit du premier argument. Si la propriété Default n’est pas définie, elle est définie par défaut sur la valeur de la propriété BindableProperty.DefaultValue, à condition que l’extension de balisage cible une 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 une conversion de type est nécessaire, l’extension de balisage OnPlatform 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 propriété Converter doit être définie sur une implémentation IValueConverter.

La page de la Version de démonstration d’OnPlatform 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 expressions OnPlatform utilisent la version abrégée du nom de classe OnPlatformExtension. Les trois extensions de balisage OnPlatform définissent les propriétés xref:Microsoft.Maui.Graphics.Color, WidthRequest et HeightRequest du BoxView sur 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 partie Default= de l’expression.

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

L’extension de balisage OnIdiom 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. Elle 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 de bureau. Notez que certains ordinateurs portables peuvent être classés à l’aide de la propriété Tablet.
• 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 sur les plateformes Watch.
• Converter, de type IValueConverter, qui peut être défini sur une implémentation IValueConverter.
• ConverterParameter, de type object, qui peut être défini sur une valeur à passer à l’implémentation IValueConverter.

Remarque

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

La propriété Default est la propriété de contenu de OnIdiomExtension. Par conséquent, pour les expressions de balisage XAML exprimées avec des accolades, vous pouvez éliminer la partie Default= 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 consomment l’extension de balisage OnIdiom. Si une conversion de type est nécessaire, l’extension de balisage OnIdiom 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 propriété Converter doit être définie sur une implémentation IValueConverter.

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 expressions OnIdiom utilisent la version abrégée du nom de classe OnIdiomExtension. Les trois extensions de balisage OnIdiom définissent les propriétés Color, WidthRequest et HeightRequest du BoxView sur différentes valeurs sur les idiomes d’appareil de bureau, de téléphone ou de tablette. 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 partie Default= de l’expression.