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 l’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. Les principales approches de création d’une interface utilisateur réactive dans .NET MAUI impliquent l’utilisation de l’extension OnPlatform de balisage et de l’extension de OnIdiom balisage.

Remarque

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

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 et On les OnPlatform<T> classes, mais avec une représentation plus concise.

L’extension OnPlatform de balisage est prise en charge par la OnPlatformExtension classe, 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 IValueConverter implémentation.
• ConverterParameter, de type object, qui peut être défini sur une valeur à passer à l’implémentation IValueConverter .

Remarque

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

La Default propriété est la propriété de contenu de 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 OnPlatform balisage. 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.

La page de démonstration OnPlatform montre comment utiliser l’extension de OnPlatform balisage :

<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 OnPlatform extensions de balisage définissent les propriétés et WidthRequestHeightRequest les xref:Microsoft.Maui.Graphics.Colorpropriétés des BoxView 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.

Personnaliser l’apparence de l’interface utilisateur en fonction de 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. Elle est prise en charge par la OnIdiomExtension classe, 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.
• Desktop, de type object, que vous définissez sur une valeur à appliquer sur les plateformes de bureau.
• 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 IValueConverter implémentation.
• ConverterParameter, de type object, qui peut être défini sur une valeur à passer à l’implémentation IValueConverter .

Remarque

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

La Default propriété est la propriété de contenu de 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 consomment l’extension de OnIdiom balisage. 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 OnIdiom balisage :

<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 Colorvaleurs , WidthRequestet HeightRequest les propriétés des BoxView différentes valeurs sur le téléphone, la tablette et les idiomes de 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.