Comment personnaliser l'apparence de l'interface utilisateur de vos applications .NET MAUI en fonction des plateformes et des idiomes des appareils ?
La personnalisation de l'apparence de l'interface utilisateur (UI) dans les applications .NET MAUI permet d'optimiser l'affichage pour différentes plateformes et types d'appareils. Cela maximise l'utilisation de l'espace disponible et tire parti des capacités spécifiques des appareils, tout en optimisant l'interface pour divers types d'entrée. Il s'agit encore une fois d'un bon exemple de ces dizaines de petits détails qui sont différents de l'héritage des Xamarin.Forms. On croit savoir, on a déjà vu, mais en fait sous MAUI ce n'est plus pareil... Pourtant, comme pour le reste, ces "détails" n'en sont pas. Avoir un code qui s'adapte à l'idiome ou la plateforme est même souvent essentiel. Alors voici comment vous pouvez personnaliser l'apparence de l'UI en fonction des plateformes et des idiomes des appareils, avec des exemples de code XAML et C# ...
Personnaliser l'apparence de l'UI en fonction de la plateforme
La plateforme désigne l'OS sous lequel tourne l'application. Android, iOS, Windows... Pour tenir compte des différences techniques ou visuelles liées à la plateforme utilisez l'extension de balisage OnPlatform pour appliquer des valeurs spécifiques à chaque plateforme. Voici un exemple en XAML pour définir des couleurs et des tailles différentes pour BoxView :
<BoxView Color="{OnPlatform Yellow, iOS=Red, Android=Green}"
WidthRequest="{OnPlatform 250, iOS=200, Android=300}"
HeightRequest="{OnPlatform 250, iOS=200, Android=300}"
HorizontalOptions="Center" />
En C# :
var boxView = new BoxView
{
Color = Device.RuntimePlatform == Device.iOS ? Color.Red : (Device.RuntimePlatform == Device.Android ? Color.Green : Color.Yellow),
WidthRequest = Device.RuntimePlatform == Device.iOS ? 200 : (Device.RuntimePlatform == Device.Android ? 300 : 250),
HeightRequest = Device.RuntimePlatform == Device.iOS ? 200 : (Device.RuntimePlatform == Device.Android ? 300 : 250),
HorizontalOptions = LayoutOptions.Center
};
Dans ces exemples, les propriétés de BoxView varient selon la plateforme d'exécution. Il ne s'agit que d'un exemple, dans la réalité ce n'est pas la taille d'un rectangle qu'on changera en fonction de l'OS mais peut-être la présence ou non d'un bouton de retour en arrière, ou bien une marge supérieure nécessaire sous iOS et pas sous les autres OS, etc. Pour le visuel, c'est plutôt le form factor qui jouera, donc ce qu'on appelle l'Idiome...
Personnaliser l'apparence de l'UI en fonction de l'idiome de l'appareil
L'idiome désigne de le type de device sur laquelle l'App tourne. Une tablette, un smartphone, un Mac... On comprend bien que selon le cas certaines éléments de l'UI seront différents. Pour en tenir compte utilisez l'extension de balisage OnIdiom pour ajuster l'interface en fonction de l'appareil. Voici un exemple en XAML :
<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" />
En C# :
var boxView = new BoxView
{
Color = Device.Idiom == TargetIdiom.Phone ? Color.Red : (Device.Idiom == TargetIdiom.Tablet ? Color.Green : (Device.Idiom == TargetIdiom.Desktop ? Color.Blue : Color.Yellow)),
WidthRequest = Device.Idiom == TargetIdiom.Phone ? 200 : (Device.Idiom == TargetIdiom.Tablet ? 300 : (Device.Idiom == TargetIdiom.Desktop ? 400 : 100)),
HeightRequest = Device.Idiom == TargetIdiom.Phone ? 200 : (Device.Idiom == TargetIdiom.Tablet ? 300 : (Device.Idiom == TargetIdiom.Desktop ? 400 : 100)),
HorizontalOptions = LayoutOptions.Center
};
Ces exemples montrent comment adapter BoxView aux différents idiomes des appareils, ici en changeant sa taille, plus petite pour un smartphone jusqu'à bien plus grande pour un machine desktop comme un Mac ou un PC.
Utiliser les convertisseurs de valeur
Les extensions OnPlatform et OnIdiom supportent les convertisseurs de valeur aidant à effectuer des conversions de type. Ici il s'agira de pouvoir proposer des valeurs différentes à des propriétés selon la plateforme. Cela se présente comme un binding mais utilisant le mot clé OnPlatform ou OnIdiom Voici un exemple en XAML :
<Label Text="{OnPlatform iOS='Bienvenue', Android='Welcome'}"
TextColor="{OnPlatform Android='Green', Default='Black'}" />
En C# :
var label = new Label
{
Text = Device.RuntimePlatform == Device.iOS ? "Bienvenue" : "Welcome",
TextColor = Device.RuntimePlatform == Device.Android ? Color.Green : Color.Black
};
Cas d'utilisation supplémentaires
- Optimisation pour l'espace : Afficher plus de contenu sur des écrans plus grands pour réduire la navigation.
- Capacités des appareils : Activer les contrôles spécifiques aux capacités disponibles, comme l'appareil photo ou le capteur de localisation sur les mobiles.
- Optimisation pour les saisies : Réorganiser les éléments de l'UI pour une meilleure accessibilité selon le type d'entrée (tactile pour mobiles, souris/clavier pour bureau).
En personnalisant l'apparence de l'UI en fonction de la plateforme et de l'idiome de l'appareil, les applications .NET MAUI peuvent offrir une expérience utilisateur optimisée et cohérente sur différents dispositifs. Le tout, toutjours en C# et XAML, et ce depuis un code unique qui se compilera pour toutes les plateformes.
Conclusion
La personnalisation de l'interface utilisateur avec .NET MAUI en fonction de la plateforme et de l'idiome de l'appareil est essentielle pour offrir une expérience utilisateur fluide et adaptée. En utilisant les extensions OnPlatform et OnIdiom, ainsi que les convertisseurs de valeur, vous pouvez créer des interfaces qui tirent pleinement parti des spécificités de chaque plateforme et appareil. Cela permet non seulement d'améliorer l'esthétique et la convivialité de l'application, mais aussi d'optimiser son fonctionnement selon les différents contextes d'utilisation. Pour une application encore plus performante et intuitive, n'hésitez pas à explorer davantage les possibilités offertes par .NET MAUI en consultant la documentation officielle.
Stay Tuned !