Meilleures pratiques : gestion de l’interface utilisateur dans .NET MAUI

Vous passez de Xamarin Forms à .NET MAUI ? Ces conseils sont pour vous !

👋 Bonjour! Êtes-vous prêt à apprendre quelques conseils intéressants sur les meilleures pratiques dans .NET MAUI ? Que vous soyez expérimenté dans le développement d’applications à l’aide de Xamarin Forms ou que vous débutiez simplement dans .NET MAUI, le contenu suivant vous sera utile.

Dans cet article, je vais vous fournir des conseils pour améliorer vos pratiques de développement d’applications .NET MAUI. Ces informations sont basées sur des mises à jour de la documentation officielle, qui inclut des améliorations intéressantes. 🚀 L’objectif est que nos applications maintiennent leur qualité tout en améliorant les performances et en simplifiant notre travail de développeurs. 🛠️ Je suis ici pour partager des conseils qui vous permettront de garder une longueur d’avance dans le domaine .NET MAUI. Prêt à explorer ? 💪

1. Vous souhaitez ajouter une bordure ? N’utilisez pas de cadre, utilisez la bordure

Dans Xamarin Forms, le Frame est principalement utilisé pour ajouter des bordures. Cependant, dans .NET MAUI, un nouveau contrôle nommé Border a été introduit spécifiquement à cet effet.

Alors, quand est-il approprié d’utiliser Border et quand devriez-vous utiliser Frame ? 🤔 La documentation officielle indique que Frame est maintenu pour les utilisateurs qui font la transition de leurs applications de Xamarin.Forms vers .NET MAUI. Pour les nouveaux développements, il est recommandé d’utiliser le contrôle aux frontières.

Voici quelques raisons pour lesquelles je préfère utiliser Frontière sur le cadre :

• Flexibilité dans l’arrondi : Si vous souhaitez définir une valeur pour arrondir chaque bord séparément, vous avez la possibilité de le faire.
• Liberté en forme de frontière : Vous contrôlez la forme du bord. Par exemple, vous pouvez utiliser des formes comme RoundRectangle (comme indiqué dans l’image explicative) ou en expérimenter d’autres comme Polyline, entre autres. formes que vous pouvez voir ici.

Comme le montre l’image principale de cette astuce, Border est assez simple à utiliser. Pour mieux comprendre la frontière, je vous recommande de lire l’article Bordure dans .NET MAUI.

2. Utilisez Horizontal/VerticalStackLayout au lieu de StackLayout

Si vous connaissez Xamarin Forms, vous savez déjà comment fonctionne StackLayout. Par défaut, l’orientation est verticale, mais vous pouvez la définir sur horizontale à l’aide de la propriété Orientation. Dans .NET MAUI, le même concept s’applique à StackLayout.

En plus de la mise en page existante, il en existe de nouvelles pour lesquelles vous n’avez pas besoin d’utiliser la propriété Orientation. Vous pouvez utiliser directement VerticalStackLayout ou HorizontalStackLayout à la place. Selon votre orientation préférée, je vous recommande d’envisager l’une de ces nouvelles dispositions !

Je vous encourage à en apprendre davantage sur ces mises en page en lisant l’article Explorer les options de mise en page dans .NET MAUI.

3. Évitez d’utiliser AndExpand dans le format Horizontal/VerticalStackLayout

Dans Xamarin Forms, nous utilisons des propriétés d’expansion telles que Horizontal/VerticalOptions. Ces propriétés définissent les préférences d’alignement et contiennent un ensemble de valeurs, dont certaines se terminent par le suffixe « AndExpand ». Par exemple, nous avons CenterAndExpand, Start et StartEndExpandentre autres.

Cependant, dans .NET MAUI, le suffixe « AndExpand » n’existe plus. Il ne répondra qu’aux valeurs sans suffixe, comme Center ou Start.

Que se passe-t-il si vous utilisez une valeur avec un suffixe « AndExpand » ? 🤔 .NET MAUI ignore simplement le suffixe et considère le mot racine. Par exemple, si vous écrivez :

<VerticalStackLayout HorizontalOptions="CenterAndExpand">
      ...
</VerticalStackLayout>

.NET MAUI l’interprétera comme Centre.

4. N’utilisez pas RelativeLayout

Si vous utilisez RelativeLayout dans Xamarin Forms, préparez-vous à un changement. RelativeLayout n’existe pas dans .NET MAUI. Dites au revoir. 👋

Vous vous demandez peut-être quoi faire si vous migrez votre application de Xamarin Forms vers .NET MAUI et que vous utilisez RelativeLayout. 🤔 Microsoft a fourni une solution avec un espace de noms de compatibilité qui se trouve dans l’espace de noms Microsoft.Maui.Controls.Compatibility. Pour plus d’informations, vous pouvez vous référer à l’article Xamarin.Forms vers .NET MAUI : comment le comportement de la mise en page a évolué.

Cependant, je recommande personnellement de refactoriser votre code dès que vous avez terminé la migration. La disposition Grid est un remplacement idéal, obtenant le même comportement que RelativeLayout.

Envisagez un formulaire d’inscription qui nécessite des informations supplémentaires. En règle générale, des espaces réservés sont utilisés à cette fin. Mais que se passe-t-il si des informations plus détaillées sont nécessaires ? 👀 C’est là que les info-bulles sont utiles. Les info-bulles vous permettent d’ajouter des informations détaillées sans affecter la conception de votre interface utilisateur, car elles n’apparaissent que lorsque l’utilisateur interagit directement avec l’élément visuel (l’entrée, pour cet exemple).

Ceci n’est qu’un exemple. Vous pouvez ajouter des info-bulles à de nombreux autres contrôles, pas seulement à l’entrée ! Il s’agit de l’une des nouvelles fonctionnalités de .NET MAUI qui n’existe pas dans Xamarin Forms.

Pour plus d’informations sur les Tooltips, je vous invite à lire l’article Améliorer vos applications de bureau avec des info-bulles dans .NET MAUI.

6. Utiliser les mêmes couleurs hexadécimales à différents endroits ? Ajoutez-les à Color.xaml

Les couleurs de la marque font partie intégrante du développement d’applications. Supposons que votre image de marque comporte trois couleurs et que vous deviez les utiliser sur 10 pages. Une approche courante pourrait consister simplement à répéter les mêmes codes hexadécimaux selon les besoins sur chaque écran. Cela fonctionne, mais cela peut compliquer la maintenance de notre application et augmenter le risque d’erreurs lors du changement de couleur. Cela rend également notre application moins évolutive.

Créer une palette de couleurs dans un seul fichier est une méthode plus efficace. Cela nous permet de référencer ces couleurs avec un alias dans d’autres fichiers. Si les couleurs de la marque changent, nous n’avons besoin de mettre à jour qu’un seul fichier plutôt que l’ensemble de la base de code. (En fait, les couleurs prédéfinies par défaut de l’application sont déjà configurées de cette façon).

Voici les étapes pour y parvenir :

1. Identifiez les couleurs à utiliser et accédez à Votre projet ➡️ Ressources ➡️ Styles ➡️ Colors.xaml.

Ajoutez autant de lignes de couleur que nécessaire au format suivant :

<Color x:Key="GrayPrimaryColor">#6E6E6E</Color>

Dans ce contexte, GrayPrimaryColor est l’alias de la couleur, et #6E6E6E est sa représentation hexadécimale.

2. Utilisez StaticResource pour faire référence à la couleur.

<Label BackgroundColor="{StaticResource GrayPrimaryColor}" Text=".."/>

Les futures mises à jour de couleurs seront beaucoup plus faciles à mettre en œuvre !

Conclusion

👩‍💻 Et c’est tout pour aujourd’hui ! J’espère que les conseils de cet article vous aideront à respecter les meilleures pratiques dans .NET MAUI. N’oubliez pas qu’un bon code naît de petites modifications intelligentes ! 🛠️ Merci d’avoir pris le temps de lire ! 📚 Rendez-vous dans le prochain article !

Bon codage ! 💚💕