L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Masquez-le à la perfection avec WinUI en action
Arrêtez de faire deviner à vos utilisateurs le format accepté d'un champ de saisie. Utilisez le nouveau contrôle MaskedInput pour WinUI. Assez flexible pour couvrir vos attentes les plus courageuses.
Il y a autant d'opinions que de personnes. Et puis il y a probablement des millions de formulaires qui doivent être remplis. Au moins un par jour. 😂 Lorsqu'il s'agit de remplir des formulaires, les gens essaient souvent d'utiliser différents formats dans les champs de saisie fournis. Chaque utilisateur a ses propres pratiques. Vous savez que cela conduit à des types de problèmes encore plus uniques, n'est-ce pas ?
Tout le monde n'est pas capable de prédire le format accepté d'un champ de saisie lors de la saisie. L'utilisation d'entrées masquées aide beaucoup à éviter presque tous les types de problèmes. Mais pas aucune entrée masquée. Il y a un particulier que je peux garantir est assez flexible pour couvrir vos attentes les plus courageuses.
Né avec le Telerik UI for WinUI v 0.5.0le MaskedInput le contrôle est là et prêt à conquérir vos cœurs (ou éditeurs de code). Permettez-moi de vous présenter.
Comprendre le masquage d'entrée d'abord
Dans la conception de l'expérience utilisateur, un masque de saisie fait référence à un modèle de chaîne créé sur la base d'un format de saisie spécifique pour éviter les erreurs de transcription. Si l'utilisateur essaie d'entrer un caractère invalide, l'élément de saisie masqué bloque la frappe invalide. Par exemple, les utilisateurs ne pourront pas saisir de lettres dans un champ de numéro de téléphone masqué.
Le concept de masquage d'entrée convient à la capture des entrées utilisateur avec un format standard spécifique, comme les adresses IP, les numéros de carte de crédit, les codes de produit, les numéros de carte d'identité, entre autres.
Les masques de saisie visent à motiver les utilisateurs à facilement entrez des entrées propres et correctes. Pour ce faire, ces contrôles doivent être suffisamment flexibles, personnalisables et intuitifs.
Tout est couvert avec RadMaskedInput
Comme mentionné dans la finale de la section précédente, la flexibilité est importante. Couvrir une riche collection de scénarios de cas d'utilisation est un must ici, et pas seulement cela, mais les couvrir de la bonne manière.
Vous voulez restreindre les caractères ?
Bien sûr.
Vous voulez le entrée à transformer automatiquement en lettres majuscules ?
Compris.
Vous voulez permettre aux utilisateurs de diffuser leur créativité dans le champ de saisie, mais une regex pour éliminer discrètement les caractères non autorisés ? De plus, mettre à jour la propriété de l'utilisateur quelle que soit l'interface utilisateur non valide ?
Vérifier.
Vous voulez avoir une validation avancée, que ce soit directement (caractère par caractère) ou au niveau de l'expression régulière sur le texte intégral, ou lorsque l'événement ValueChanging est déclenché et que la logique de l'application est déclenchée ?
Tous vos choix.
Le grand pouvoir est entre vos mains. Combinez les types de masques et les masques pris en charge pour créer votre chef-d'œuvre. Je vais manquer de papier si j'essaie de tout répertorier ici, alors assurez-vous d'explorer la section MaskTypes et les liens vers les masques pris en charge pour un type dans l'article de documentation du contrôle.
Une pincée d'entrée masquée
Je serai bref ici (dans cette section).
Le RadMaskedInput n'est pas difficile à obtenir. Il est accessible via un alias pointant vers l'espace de noms Telerik.UI.Xaml.Controls.Input (xmlns:input="using:Telerik.UI.Xaml.Controls.Input"). Et il suffit d'une seule ligne de code XAML (ou C#) pour l'instancier :
<input:RadMaskedInput Mask="###" />[19659030]MaskedInput - Getting Started" title="MaskedInput - Getting Started"/>
Masquer correctement—À toute heure, jour et nuit
Si vous supposez que vous pouvez masquer une entrée DateTime ou TimeSpan avec RadMaskedInput pour WinUI — vous avez raison. Et alors ? Rien de spécial.
Je plaisante ! Ces MaskTypes sont particulièrement soignés et soignés.
Avec les DateTimeMaskedInputExtensions et TimeSpanMaskedInputExtensions les capacités de personnalisation de le contrôle RadMaskedInput sont amenés même au niveau après le niveau suivant. 🚀 Si vous êtes un maniaque du contrôle, je pense que vous l'apprécierez.
Définissez le min, le max, la valeur par défaut (DateTime/ TimeSpan) Contrôlez la navigation vers les sections avec les touches fléchées et déterminez si la partie suivante doit être automatique sélectionné de manière sélective. Réglez les étapes de rotation dans chaque section.
À propos du GIF ci-dessus—après avoir activé AutoSelectNextPartj'ai presque cessé d'utiliser mon . J'ai utilisé les touches haut et bas de mon ⌨️ et après avoir rempli les 25 minutes, le contrôle sélectionnait automatiquement la partie des secondes. Et puis j'ai commencé à tourner, pas ma tête, mais les secondes dans l'entrée. 🤪
Trouvez l'ensemble complet des propriétés attachées des extensions dans la section Extensions de la documentation du contrôle.
Si vous sentez la facilité d'utilisation du DateTime MaskType, je suppose que vous allez adorer le puissance d'un autre type de masque inestimable : le FreeFormDateTime. De nombreux utilisateurs ont tendance à aimer le masquage de saisie, mais sont frustrés lorsqu'ils essaient de taper des choses de la manière « correcte » et paniquent lorsqu'ils voient une bordure rouge ou un indicateur d'erreur. Ne serait-il pas agréable de laisser l'utilisateur saisir ce qu'il veut et de masquer tout en coulisses ? Différentes cultures, différents formats de date et d'heure, ce n'est plus un problème. Laissez vos utilisateurs appuyer sur le bouton Entrée lorsqu'ils se sentent prêts, et le contrôle fera de son mieux pour reconnaître leur chaîne de forme libre et la convertir en une date valide.
Feature Richness Sneak Peek
Passons aux masques DateTime, TimeSpan et FreeFormDateTime et leurs extensions. Après tout, je ne voudrais pas manquer l'occasion de vous donner des indications sur la richesse des fonctionnalités du contrôle.
J'ai mentionné certains des avantages ci-dessus.
Formatage de la valeur
Puisque RadMaskedInput est un contrôle d'entrée ( duh!), vous pouvez deviner qu'il a une propriété Value. Par défaut, cette valeur coupe les caractères d'invite et les littéraux définis dans le masque. Certains scénarios de masque, cependant, peuvent nécessiter un formatage différent de la valeur de résultat. C'est là que la propriété ValueFormat est utile. Il s'applique au type de masque Standard et IP et est une énumération de type MaskFormat.
Vous voyez? J'ai déjà changé le caractère d'invite par défaut en # et je n'ai pas rempli tous les emplacements vides. Et puis j'ai commencé à expérimenter avec les options ValueFormat dans la partie configurateur à droite. Observons ensemble la valeur :
- Avec ExcludePromptAndLiteralsla valeur résultait en chiffres uniquement (tous les caractères d'invite et les littéraux ont été supprimés).
- Avec IncludePromptla valeur résultait en chiffres + l'espace réservé par défaut "_" (tous les littéraux : les accolades, le tiret et les espaces ont été supprimés). Avec IncludePromptAndLiterals la valeur a entraîné l'inclusion de tous les littéraux et des invites pour les postes non pourvus (pratiquement tout).
P.S. La propriété Text peut toujours être utilisée, car elle inclut le contenu que l'utilisateur voit dans l'interface utilisateur.
Personnalisation du PromptChar
Le petit trait de soulignement du GIF ci-dessus s'appelle PromptChar. Il existe pour représenter l'absence d'entrée de l'utilisateur. Vous ne le verrez pas comme faisant partie de la valeur à moins que vous n'utilisiez pas le PromptChar par défaut ou que la propriété ValueMode soit définie sur IncludePromptAndLiterals ou IncludePromptChar. Vous le verrez cependant dans l'interface utilisateur si vous avez des postes modifiables non pourvus. Oh, il sera inclus dans la propriété Value pour les types de masque standard lorsque IncludeLiterals ou IncludePlaceholdersAndLiterals sont définis.
Comment définir votre propre caractère d'invite ? C'est aussi simple que ça :
this.maskedInput.PromptChar = '#';
Comme je l'ai fait dans le GIF sans vous le dire. 🤭
Changer la culture
Ecrire des applications globalisées est aujourd'hui incontournable.
Mondialisation = Internationalisation + Localisation
« L'internationalisation est la conception et le développement d'un produit, d'une application ou d'un contenu de document qui permet une localisation facile pour des publics cibles qui varient selon la culture, la région ou la langue. »
« La localisation fait référence à l'adaptation d'un produit, d'une application ou du contenu d'un document pour répondre aux exigences linguistiques, culturelles et autres d'un marché cible spécifique (un lieu). voulez-vous fournir des solutions non mondialisées, n'est-ce pas ? Vous ne voudriez pas non plus masquer les entrées qui ne sont pas culturellement conscientes. C'est pourquoi le contrôle RadMaskedInput est conçu pour fournir une prise en charge complète de la mondialisation par le biais de la propriété Culture.
(Les extraits de code de l'image précédente peuvent être trouvés dans la section Globalization de la documentation.)
Validation de l'entrée
Je sais que j'ai déjà mentionné la frustration que ressentent certains utilisateurs lorsqu'ils rencontrent un rouge frontière et/ou un indicateur d'erreur. Pourtant, je pense qu'il est bien mieux de savoir que quelque chose ne va pas au lieu de deviner. Voir de quoi je parle :
Je pense que je vais m'arrêter là… Mais la personnalisation ca les capacités continuent. Vous pouvez personnaliser l'en-tête, le modèle d'en-tête et la description. Autoriser/interdire les valeurs nulles ou invalides. Déterminez si le caractère d'invite doit être traité comme une entrée valide et ainsi de suite. 😵
Tout est écrit dans les étoiles 🌟, pardon, la documentation. Assurez-vous d'y prêter attention.
Donnez et recevez
Donnez
Les commentaires sont essentiels pour une amélioration continue. Je vous encourage à le partager. Et je suis sûr que je vous ai dit à plusieurs reprises que votre contribution est précieuse. Nous écoutons. Alors, trouvez votre meilleur trajet et n'hésitez pas à vous arrêter.
- Contactez-nous par e-mail : envoyez-nous un message, pour tout ce qui concerne le produit ou simplement pour dire bonjour à TelerikWinUI@progress.com
- Visitez le Portail de commentaires—Partagez toute demande de fonctionnalité (ou rapport de bogue) que vous pourriez avoir
- Dirigez-vous vers les Forums Telerik—Recevez toute aide technique avec le produit
Obtenez
Dépêchez-vous et obtenez les derniers éléments de l'interface utilisateur Telerik pour WinUI ! Il y a beaucoup plus à explorer.
Source link