Disponible maintenant—Incorporation d’étiquettes WPF

Vous avez quelques minutes ? Simplifiez ensuite l’architecture des informations de votre interface utilisateur. Commencez à utiliser les étiquettes intégrées de Telerik UI pour le contrôle de zone de texte de WPF.

Avant de lancer ce blog, j’ai fouillé dans les archives pour toute information sur le passé des étiquettes, leur lien avec les zones de texte et, surtout, l’utilisation des deux dans le monde WPF. Devine ce que j’ai trouvé? AB007 Posté sur
Les forums de Microsoft chercher de l’aide pour un difficile affectation – pour générer un contrôle personnalisé pour une zone de texte qui affichera l’étiquette dans la zone de texte elle-même.

Je ne sais pas si c’était UNmonsieur Bdeuxième 007, mais je sais que ce qui précède est une question d’actualité. Vous l’avez souhaité, enregistré dans notre génial Interface utilisateur Telerik pour le portail de commentaires WPFet nous l’avons fait.

James Bond n’a pas eu le temps de mourir, mais maintenant c’est à nous d’insister. Le dernier secret de l’interface utilisateur Telerik pour le contrôle de la zone de texte de WPF commence en 3, 2,1. Aller!

Dans les prochaines sections de ce blog, vous rencontrerez et saluerez la fonctionnalité d’étiquette intégrée du RadWatermarkTextBox contrôler.

La valeur d’un label

Label et un contrôle de zone de texte ? Ces deux-là sont des meilleurs amis. Ne me dites pas que vous ne les avez pas vus ensemble !

Je parie qu’il ne sera pas difficile de se souvenir d’au moins un formulaire de données que vous avez dû remplir ou (pourquoi pas) créer vous-même. Quoi qu’il en soit, toutes les formes seraient difficiles ou presque impossibles à exister sans exactement ces deux contrôles dont je parle. Ce qui compte, c’est que ce serait même plus difficile à comprendre Quel vous devez remplir si ce n’était pas pour le Étiquettes.

Pas un gros problème, tu pourrais penser. UN très gros problème, je dirai.

Et il s’agrandit avec la taille et la complexité des formulaires que vous créez ou utilisez (ou de tout autre contrôle d’interface utilisateur composé de nombreux champs de saisie). Toute interface utilisateur contenant de nombreuses zones de texte entraîne des problèmes de conception et de lisibilité.

Moins est plus

Dans la section précédente, j’ai peut-être touché un point sensible. 😬

De nos jours, les interfaces utilisateur encombrées sont toujours une chose. Sûrement pas mon truc. S’ils ne vous appartiennent pas non plus, voici ce que vous pouvez faire pour améliorer les choses. Rationalisez votre interface utilisateur en incorporant le texte de l’étiquette directement dans la zone de texte. Réduisez de moitié les éléments visuels utilisés (minimum !).

(Cliquez sur l’image ci-dessus pour l’ouvrir dans sa taille réelle.)

Voir? Avec la nouvelle fonctionnalité d’étiquettes intégrées, vous n’avez besoin que d’un seul élément visuel, représenté par le RadWatermarkTextBox. Sinon, vous en avez besoin d’au moins deux : une étiquette et un contrôle d’entrée. Et si vous ne voulez pas qu’ils se chevauchent, vous avez besoin d’un élément visuel supplémentaire, représenté par n’importe quel héritier de Panel (dans notre cas, un StackPanel).

Curieux de savoir à quoi ressemble la comparaison ci-dessus ?

(Cliquez sur l’image ci-dessus pour l’ouvrir dans sa taille réelle.)

Étiquettes intégrées à droite contre étiquettes fixes à gauche. Oui, en prime des éléments plus visuels, la taille de l’écran n’était pas suffisante pour tenir la dernière ligne de mon formulaire, j’ai donc eu une barre de défilement verticale. 🙄

Approfondissement de l’étiquetage

La dernière capture d’écran de la section précédente a déjà révélé l’apparence par défaut des étiquettes intégrées, mais il y a plus à lire et à voir. Alors, allons-nous?

Mettez une étiquette dessus

Vous avez peut-être déjà deviné comment mettre une étiquette sur l’interface utilisateur pour le contrôle de zone de texte de WPF. Cependant …

La répétition est la mère de l’apprentissage.
(La répétition est la mère de l’apprentissage.)

Alors, faisons-le une fois de plus (celle-ci – officiellement).

Eh bien, c’était rapide. Et indolore. Intuitif aussi. Maintenant qu’en faire ?

Apprenez à le contrôler

L’étiquette s’affiche sous forme de filigrane (espace réservé) lorsque le RadWatermarkTextBox le contrôle n’est pas ciblé et le texte est vide. Lorsque le contrôle obtient le focus ou que du texte est saisi, l’étiquette est positionnée au-dessus (flottante) de la zone de saisie de texte.

Que se passe-t-il si vous ne souhaitez pas cette transition et que vous souhaitez uniquement conserver l’étiquette toujours positionnée au-dessus de la zone de texte ? Réglez simplement le KeepLabelFloated propriété de la FiligraneTextBox à vrai :

Si vous le voulez comme ça mais que vous avez aussi besoin de connaître l’état de l’étiquette, vous pouvez utiliser une autre propriété pratique :IsLabelFloated.

Si vous ne le trouvez pas assez attrayant, n’hésitez pas à le saupoudrer à l’aide du Style d’étiquette propriété.

Ah, encore une chose. Avez-vous remarqué cette jolie petite animation qui fait flotter l’étiquette une fois que vous avez commencé à taper ? Et le ramène au centre chaque fois que la mise au point est perdue. Cela se fait à l’aide du Telerik AnimationManager classer.

Comme j’aime cette animation, je ne jouerai qu’un peu avec sa durée. Mais vous pouvez le changer en définissant le fichier joint AnimationManager.AnimationSelector propriété au contrôle RadWatermarkTextBox. Il permet de surcharger les deux groupes d’animation responsables des animations qui apparaissent, celui pour faire flotter l’étiquette et celui pour la faire revenir au centre de la saisie de texte.

Comment ai-je fait ça ? j’ai ajouté ce qui suit Sélecteurs d’animation aux ressources de mon UserControl :

Et puis je les ai mis à mes instances d'un RadWatermarkTextBox :

Obtenez-en encore plus

Il y a plus? Mmhmm, c'est vrai. Et si je vous disais que cette fonctionnalité peut facilement être activée pour d'autres contrôles de la suite de contrôles Telerik UI for WPF ?

RadPasswordBox comme héritier de la RadWatermarkTextBox le prend en charge, et il existe de nombreux autres contrôles parmi la suite qui contiennent une zone de texte en filigrane dans leurs modèles de contrôle par défaut. Oui, cela signifie qu'ils peuvent également facilement bénéficier d'une étiquette intégrée.

Encore un aveu, je vous l'ai déjà montré sans attirer votre attention dessus. La première capture d'écran de ce billet de blog contient une RadAutoSuggestBox et un RadDatePickeraussi.

Comment utiliser la fonction d'étiquette intégrée avec eux ?

Pour le RadPasswordBoxaucun style n'est nécessaire, seul le réglage Étiquette propriété. J'ai une autre idée pour un exemple avec elle. Suis-moi.

Il s'est avéré assez bon et lisse! Voir par vous-même:

Label 'Finale' 🖐️

Merci d'avoir pris le temps de lire mon blog ! J'espère que vous l'avez apprécié, et je suis sûr qu'il y a plus à apprécier - assurez-vous de vérifier les autres goodies du R1 2022 & R2 2022 sorties de Interface utilisateur Telerik pour WPF. Si vous avez des commentaires, n'hésitez pas à laisser vos pensées et vos impressions dans la section des commentaires ci-dessous.

Obtenez les derniers bits