Explorer 4 comportements de la boîte à outils de la communauté .NET MAUI

Découvrez quatre des comportements de la boîte à outils de la communauté .NET MAUI qui peuvent faciliter le développement de votre application multiplateforme !

🧠 La boîte à outils communautaire .NET MAUI est une collection organisée de composants réutilisables soigneusement développés par la communauté. Il englobe une gamme d’éléments tels que des animations, des convertisseurs et des comportements, tous conçus pour accélérer le développement d’applications. De plus, il garantit une compatibilité transparente entre iOS, Android, macOS et WinUI, tout cela grâce à la puissance de .NET MAUI.

Dans cet article, nous aborderons quatre comportements fantastiques de la boîte à outils communautaire .NET MAUI qui peuvent dynamiser votre application. 🚀 La meilleure partie? Ils sont prêts à l’emploi ! Tout ce dont vous avez besoin est de comprendre comment les mettre en œuvre.

Les comportements que nous explorerons sont :

• EmailValidator
• Masqué
• IcôneTeinteCouleur
• Animation

Chacun de ces comportements de la boîte à outils communautaire .NET MAUI est conçu pour offrir des améliorations spécifiques à votre application.

Mais d’abord, une brève pause : que sont exactement les comportements ? 🤔

Les comportements permettent d’ajouter des fonctionnalités spécifiques pour visualiser les éléments. Ces fonctionnalités modulaires améliorent non seulement la réutilisabilité, mais rationalisent également le processus de tests unitaires.

✍️ Si vous souhaitez en savoir plus sur les comportements, je vous invite à consulter le article de documentation officielle.

La configuration initiale

Pour implémenter correctement les comportements, assurez-vous que le kit d’outils communautaires .NET MAUI est correctement configuré dans votre application. Sa configuration est simple, comme indiqué dans les étapes ci-dessous :

1. Installation: Tout d’abord, assurez-vous d’installer la boîte à outils en ajoutant le package Community.Toolkit.Maui NuGet.

2. Configuration dans MauiProgram.cs : Après avoir ajouté le package NuGet, accédez à MauiProgram.cs. Juste en dessous UseMauiApp<App>()ajouter :

.UseMauiCommunityToolkit()

3. Ajout d’espace de noms : Incluez l’espace de noms du kit d’outils dans votre page :

xmlns:toolkit="[http://schemas.microsoft.com/dotnet/2022/maui/toolkit](http://schemas.microsoft.com/dotnet/2022/maui/toolkit)"

1. Comportement de EmailValidator

Ce comportement détecte si le texte fourni est une adresse e-mail valide à l’aide d’une expression régulière. En conséquence, les développeurs peuvent facilement fournir un retour visuel aux utilisateurs concernant la validité de leur e-mail. Par exemple, imaginez une entrée dans laquelle la couleur de la police devient rouge pour un e-mail invalide et verte lorsqu’il est valide.

Lorsqu’il est associé à un InputView (comme Entry ou Editor), ce comportement définit automatiquement le clavier sur Keyboard.Email, sauf si un clavier par défaut différent a été spécifié.

Nous commencerons par un exemple de code pratique.

Scénario

Nous concevons une entrée dans laquelle la taille de police est définie sur 25 et le texte est rouge foncé lorsque l’e-mail n’est pas valide. A l’inverse, pour un email valide, la taille de police sera de 30 avec du texte vert.

Création des styles

Nous définirons des styles pour encapsuler les attributs visuels souhaités pour chaque scénario.

➖ Email invalide :

<Style x:Key="InvalidEmailStyle" TargetType="Entry">
  <Setter Property="FontSize" Value="25"/>
  <Setter Property="TextColor" Value="DarkRed"/>
</Style>

➖ Email valide :

<Style x:Key="ValidaEmailStyle" TargetType="Entry">
  <Setter Property="FontSize" Value="30"/>
  <Setter Property="TextColor" Value="Green"/>
</Style>

Les propriétés de validation

EmailValidator possède plusieurs propriétés, dont certaines des plus remarquables sont répertoriées ci-dessous :

▪ Style invalide et StyleValide – Recevoir un Style comme valeur. Ce sont les styles à présenter à l’utilisateur lorsque l’e-mail est respectivement invalide ou valide.

▪ Drapeaux – Reçoit Drapeaux de validation comme valeur. Cette énumération définit la façon dont la validation est gérée. Les valeurs de cette énumération sont :

• ValidateOnAttaching : Déclenche la validation lorsque le comportement est attaché.
• ValidateOnFocusing : Valide l’entrée dès que le contrôle obtient le focus.
• ValidateOnUnfocusing : Valide l’entrée lorsque le contrôle perd le focus.
• ValidateOnValueChanged : Lance la validation chaque fois que la valeur d’entrée change.
• ForceMakeValidWhenFocused : Force l’entrée à apparaître valide lorsqu’elle est ciblée, quelle que soit sa validité réelle.
• Aucun: Aucune validation automatique n’est appliquée.

Ajout du comportement

Maintenant, ajoutons le Comportement de validation d’e-mail à notre entrée, en gardant à l’esprit les propriétés dont nous avons discuté plus tôt.

<Entry>
  <Entry.Behaviors>
    <toolkit:EmailValidationBehavior
    InvalidStyle="{StaticResource InvalidEmailStyle}"
    ValidStyle="{StaticResource ValidaEmailStyle}"
    Flags="ValidateOnValueChanged" />
  </Entry.Behaviors>
</Entry>

Le résultat devrait ressembler à ce qui suit :

Comportement masqué

Le Comportement masqué permet aux utilisateurs d’appliquer un masque de saisie pour la saisie de données spécifiques, garantissant ainsi la cohérence en n’acceptant que les valeurs qui correspondent au masque donné. Ceci est particulièrement utile pour les formats de données standardisés, tels que les numéros de carte de crédit, les numéros de téléphone, etc.

Nous commencerons par un exemple de code pratique.

Scénario

Nous mettons en place un masque pour les numéros de téléphone de la République Dominicaine. Étant donné un numéro d’échantillon comme (800) 222-4434le format du masque sera : (XXX) XXX-XXXX.

Propriétés masquées

Il existe deux propriétés qui vous aideront à définir votre masque, qui sont les suivantes :

▪ Masque – Reçoit une chaîne comme valeur. Spécifie le modèle de masque auquel la valeur d’entrée doit adhérer. Obligatoire. Il existe deux manières de configurer ce masque :

• Saisissez directement une chaîne dans le format souhaité, par exemple : XXX XXX XXXX.
• Introduisez des caractères non remplaçables dans le format. Par exemple, (XXX) XXX XXXX. Ici, les parenthèses ne sont pas remplacées, mais s’affichent au fur et à mesure que vous tapez le format. Pour utiliser cette fonctionnalité efficacement, vous devez également activer la propriété UnmaskedCharacter.

▪ Personnage démasqué – Indique le caractère de la propriété Mask qui sera remplacé par la saisie de l’utilisateur. Le caractère non spécifié dans cette propriété reste visible par l’utilisateur. En nous référant à notre exemple précédent, la valeur de cette propriété sera Xen veillant à ce que les parenthèses ne soient pas remplacées.

Ajout du comportement

Maintenant, ajoutons le Comportement masqué à notre entrée, en gardant à l’esprit les propriétés dont nous avons discuté plus tôt.

<Entry Keyboard="Numeric" Placeholder="(XXX) XXX XXXX">
  <Entry.Behaviors>
    <toolkit:MaskedBehavior Mask="(XXX) XXX XXXX" UnmaskedCharacter="X" />
  </Entry.Behaviors>
</Entry>

✍️ J’ai ajouté la propriété placeholder pour fournir aux utilisateurs des indications plus claires sur le format attendu.

Le résultat devrait ressembler à ceci :

3. Comportement IconTintColor

Ce comportement permet la coloration de l’image. Cela s’avère inestimable lors de l’adaptation de vos applications aux modes clair et sombre. Au lieu d’avoir besoin d’icônes distinctes pour chaque mode, vous pouvez utiliser une seule icône et ajuster sa couleur de teinte en fonction de vos besoins.

Nous commencerons par un exemple de code pratique.

Scénario

Nous allons appliquer une teinte rouge à une icône. Cependant, dans un autre exemple, cette icône passera à l’orange lorsque l’appareil est réglé en mode sombre et deviendra verte en mode clair.

Mise en œuvre

Ce comportement a une propriété singulière nommée TeinteCouleur, qui détermine la teinte de la teinte de l’icône. Par exemple, pour obtenir une icône teintée en rouge, suivez les étapes ci-dessous.

✍️ Gardez à l’esprit que la couleur de départ de l’icône est le bleu.

<Image Source="heart" HeightRequest="150" WidthRequest="150">
  <Image.Behaviors>
    <toolkit:IconTintColorBehavior TintColor="Red" />
  </Image.Behaviors>
</Image>

Maintenant, jouons aux modes d’apparence.

<Image Source="heart" HeightRequest="150" WidthRequest="150">
  <Image.Behaviors>
    <toolkit:IconTintColorBehavior TintColor="{AppThemeBinding Dark=Orange, Light=green}" />
  </Image.Behaviors>
</Image>

✍️ Vous souhaitez maîtriser votre interface utilisateur pour différents modes d’apparence ? Plongez dans notre article Gestion des modes clair et sombre avec .NET MAUI.

4. Comportement des animations

Il s’agit d’un comportement conçu pour animer de manière transparente tout élément visuel attaché. Bien que son mode par défaut utilise un TapGestureRecognizer pour lancer l’animation, ce déclencheur s’active lors de la détection d’un appui ou d’un clic d’un utilisateur sur le VisualElement, garantissant une interaction réactive et dynamique.

Nous commencerons par un exemple de code pratique.

Scénario

Imaginez une image sur l’écran. En cliquant ou en appuyant dessus, l’image subit un effet de fondu fluide.

Ajout du comportement

Maintenant, ajoutons le AnimationComportement à notre image :

<Image Source="dotnet_bot.png">
  <Image.Behaviors>
    <toolkit:AnimationBehavior>
      <toolkit:AnimationBehavior.AnimationType>
        <toolkit:FadeAnimation />
      </toolkit:AnimationBehavior.AnimationType>
    </toolkit:AnimationBehavior>
  </Image.Behaviors>
</Image>

Le résultat devrait ressembler à ceci :

✍️ Curieux de connaître d’autres types d’animation dans .NET MAUI ? Plongez dans notre article Explorer les animations de base dans .NET MAUI.

Conclusion

🎉 Et voilà ! Grâce à ces étapes simples, nous avons réussi à mettre en œuvre les comportements évoqués précédemment.

J’espère que cette liste de comportements utiles de la boîte à outils communautaire .NET MAUI vous a été bénéfique ! Je vous encourage à les mettre en œuvre dans votre vie quotidienne et à continuer d’en explorer d’autres ! 💚💕

À la prochaine! 💁‍♀️

Les références

Cet article était basé sur la documentation officielle :

Utilisez une bibliothèque de composants synchronisée avec la cadence de publication de .NET MAUI. Essayez gratuitement Telerik UI pour .NET MAUI.