Fermer

mars 28, 2024

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

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

ScĂ©nario malheureux utilisant frame : Frame CornerRadius=

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

Le scénario malheureux utilise StackLayout Orientation=

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

Le scénario heureux utilise Grid RowDefinitions=

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.

ScĂ©nario heureux : EntrĂ©e ToolTipProperties.Text =

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

  ScĂ©nario malheureux : Label BackgroundColor=

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 ! đź’šđź’•




Source link