Modifications rapides de l’interface utilisateur à noter dans .NET MAUI

.NET 10 pour .NET MAUI apporte plusieurs améliorations aux contrôles existants (et même quelques dépréciations) que vous devez garder à l’esprit.

Chaque changement qui se produit dans les outils que nous utilisons quotidiennement est une opportunité de travailler plus facilement, plus rapidement et plus efficacement. C’est pourquoi il est important de rester informé des mises à jour introduites dans .NET10 pour .FILETen particulier dans les composants visuels que nous utilisons constamment. Des informations telles que le nouveau DésactivéCouleur propriété dans le Switch, ou le fait que certaines API incluent désormais IsSupported vérifications, peuvent rendre votre processus de développement beaucoup plus fluide.

Ces changements, bien qu’ils puissent paraître simples, permettent de maintenir vos applications à jour et alignées sur les meilleures pratiques. Dans cet article, nous examinerons plusieurs de ces améliorations importantes de l’interface utilisateur que vous devez absolument connaître.

Actualiser la vue

J’aime quand la communauté est entendue et que les problèmes sont réellement résolus ! 💚

Cette version a ajouté le IsRefreshEnabled propriété, nous permettant d’activer ou de désactiver uniquement l’action tirer pour actualiser.

Auparavant, cela ne pouvait pas être contrôlé séparément. La propriété la plus proche que nous avions était IsEnabledmais son utilisation a non seulement désactivé le geste d’extraction pour actualiser, mais a également bloqué tous les éléments visuels à l’intérieur de RefreshView. (Quel est le comportement attendu de IsEnabledmais nous n’avions pas de moyen spécifique de contrôler juste l’action tirer pour actualiser.)

Désormais, vous n’aurez plus besoin de bloquer l’intégralité du composant pour l’utilisateur ; vous pouvez simplement utiliser le IsRefreshEnabled propriété. 😎

Voici un exemple d’utilisation de cette propriété :

<RefreshView IsRefreshEnabled="false"> 
    <StackLayout> 
	    <Entry Placeholder="Username" /> 
	    <Entry Placeholder="Password" /> 
	    <Button Text="Login" /> 
    </StackLayout> 
</RefreshView>

ClickGestureRecognizer a été supprimé

Le ClickGestureRecognizer a été supprimé dans cette version. Si vous l’utilisiez dans votre projet, vous devez maintenant le remplacer par TapGestureRecognizer.

ClickGestureRecognizer a été utilisé pour détecter de simples clics de souris, tandis que TapGestureRecognizer détecte les clics sur l’écran et reconnaît également les clics de souris. Essentiellement, il fait la même chose mais avec une couverture plus large et une meilleure prise en charge de la plateforme.

CollectionView et CarouselView

Pour améliorer les performances et la stabilité de CollectionView et CarouselView.NET 9 a introduit deux gestionnaires facultatifs pour iOS et Mac Catalyst.

Avec .NET 10, ces gestionnaires ne sont plus facultatifs. ✍️ Ce sont désormais les gestionnaires par défaut pour CollectionView et CarouselView.

Quel impact cela nous affecte-t-il en tant que développeurs ?

• Vous obtenez de meilleures performances par défaut, sans rien activer manuellement.
• L’utilisation de la mémoire est plus efficace.
• Le défilement et le rendu des éléments sont plus fluides et plus stables.

Gestionnaire de recherche

Dans .NET 10, Gestionnaire de recherche ajoute de nouvelles API qui vous permettent d’afficher ou de masquer le clavier par programme, ce qui facilite grandement le contrôle de l’interaction de l’utilisateur. Ces API sont :

• ShowSoftInputAsync() → Affiche le clavier.
• MasquerSoftInputAsync() → Masque le clavier.

Cette fonctionnalité est très utile dans les scénarios où vous devez gérer manuellement le comportement du clavier. Par exemple:

• Afficher le clavier lors de l’ouverture d’un écran de recherchece qui évite à l’utilisateur un clic supplémentaire
• Masquer le clavier lorsque l’utilisateur sélectionne un résultat de recherchedonnant plus d’espace pour afficher le contenu
• Le masquer lorsque l’utilisateur fait défiler les résultatspuisque le focus change

Et bien d’autres cas où vous pouvez contrôler plus précisément l’expérience utilisateur.

De plus, la documentation officielle recommande de revoir le conseils si vous utilisez des propriétés basées sur la réflexion telles que DisplayMemberNamecar vous devrez peut-être ajuster certains paramètres de découpage et de changement de fonctionnalités pour empêcher l’éditeur de liens de supprimer les membres requis au moment de l’exécution.

Dans .NET 10, le DisplayAlert et DisplayActionSheet les méthodes ont été marquées comme obsolètes. Ils ont été remplacés par leurs nouvelles versions asynchrones :

• DisplayAlertAsync()
• DisplayActionSheetAsync()

J’imagine que ce changement vise à rendre la gestion des fenêtres contextuelles dans .NET MAUI plus cohérente et à jour, car la plupart des API modernes fonctionnent déjà avec des méthodes asynchrones. Cela vous permet de :

• Évitez de bloquer le thread principal (extrêmement important)
• Intégrez plus naturellement avec les opérations et la navigation async/wait
• Travaillez avec une API plus sécurisée, moderne et cohérente

La bonne nouvelle est que c’est un changement très simple. Remplacez simplement toute utilisation de DisplayAlert ou DisplayActionSheet avec leurs versions asynchrones et utilisez wait lors de leur appel. C’est ça!

Boutons de fenêtre

Dans .NET 10, vous pouvez désormais activer ou désactiver le minimiser et maximiser boutons sur les fenêtres des applications de bureau Microsoft Windows.

Cela vous donne beaucoup plus de contrôle sur le comportement d’une fenêtre et sur l’expérience utilisateur globale. Auparavant, vous ne pouviez pas manipuler ces boutons car ils dépendaient entièrement du comportement par défaut du système d’exploitation. Mais c’est désormais à vous de décider comment ils doivent se comporter !

Cela peut être particulièrement utile dans des scénarios tels que :

• Empêcher les utilisateurs de réduire l’application lorsqu’elle doit rester visible à tout moment.
• Bloquer l’action d’agrandissement si votre mise en page n’est pas conçue pour des résolutions d’écran plus grandes.
• Créer des scénarios d’interface utilisateur plus stricts où seul le bouton « fermer » est autorisé (comme les applications de kiosque ou les outils internes).

Et bien d’autres cas où vous avez besoin d’un contrôle plus précis de la fenêtre.

Centre de messagerie

MessagingCenter a été rendu interne, ce qui signifie qu’il n’est plus disponible pour une utilisation directe dans votre code. Mais ne vous inquiétez pas : si vous l’utilisiez pour envoyer et recevoir des messages entre composants, vous pouvez le remplacer par WeakReferenceMessengerdisponible dans le package CommunityToolkit.Mvvm.

Certains des avantages de l’utilisation WeakReferenceMessenger inclure:

• C’est plus efficace.
• Cela aide à prévenir les fuites de mémoire.
• Il s’intègre beaucoup mieux aux modèles MVVM.

Ce qui en fin de compte vous rend la vie beaucoup plus facile ! 😎

Dans .NET 10, MédiaPicker gère désormais automatiquement EXIF informations lorsque vous travaillez avec des images.

Mais… Qu’est-ce que EXIF ​​?

Format de fichier image échangeable : Ce sont les métadonnées qui sont automatiquement stockées dans une photo lorsque vous la capturez avec un appareil photo ou un appareil mobile.

Cette gestion automatique est utile dans plusieurs scénarios, tels que :

Rotation automatique des images

Les images pivotent désormais automatiquement en fonction de l’orientation stockée dans leurs métadonnées EXIF. Grâce à cela, les photos n’apparaîtront plus :

• De côté
• À l’envers
• Mal orienté

Et le meilleur : vous n’avez pas besoin d’écrire de code supplémentaire! .NET MAUI s’en charge pour vous ! 🤩

Conserver les informations EXIF

Lorsque vous utilisez MediaPicker, l’image conserve toutes ses données EXIF ​​d’origine, ce qui signifie qu’aucune des métadonnées importantes n’est perdue, telles que :

• Date de capture
• Orientation
• Modèle d’appareil
• Paramètres de l’appareil photo
• Et plus

L’image conserve exactement les mêmes métadonnées qu’elle avait lors de sa capture initiale.

Synthèse vocale

Le Options vocales la classe inclut désormais une nouvelle propriété appelée Tauxqui vous permet de contrôler la vitesse à laquelle la voix est jouée. Cela vous donne beaucoup plus de contrôle si vous souhaitez que la voix retentisse :

• Plus rapide
• Ralentissez
• Ou au rythme exact dont votre application a besoin

Apparence du commutateur

Vous avez désormais encore plus de contrôle sur l’apparence de ce composant grâce à une nouvelle propriété :

• Couleur désactivée : Permet de définir la couleur de l’interrupteur lorsqu’il est éteint. Il s’agit d’une propriété pouvant être liée.

Vous pouvez l’ajouter en XAML comme suit :

<Switch OffColor="Red" 
OnColor="Green" />

Et aussi depuis C#, comme indiqué ci-dessous :

Switch switch = new Switch { OffColor = Colors.Red, OnColor = Colors.Orange };

Dépréciation de TableView

Le TableVue a été marqué comme obsolète dans cette version. Si vous l’utilisez actuellement dans votre projet, la documentation officielle recommande de le remplacer par un VueCollection.

À mon avis, CollectionView est une excellente alternative. Vous pouvez réaliser tout ce que vous faisiez auparavant avec TableView sans sacrifier aucune fonctionnalité clé. Je recommande de garder un œil sur les dépréciations ; prévoyez du temps avec votre équipe pour traiter ces mises à jour et donner la priorité à la mise à jour de votre base de code.

Conclusion

Et c’est tout ! 🎉 En peu de temps, vous avez découvert les mises à jour d’interface utilisateur les plus importantes introduites dans .NET 10 pour .NET MAUI. Vous pouvez désormais planifier votre travail de migration plus efficacement et savoir exactement ce qui doit être mis à jour pour maintenir votre base de code à jour.

Si vous avez des questions ou souhaitez que j’aborde des sujets plus connexes, n’hésitez pas à laisser un commentaire, je serai ravi de vous aider ! 💚

Rendez-vous dans le prochain article ! 🙋‍♀️✨

Références

L’explication était basée sur la documentation officielle :