Attirez l'attention de vos utilisateurs avec WPF RadCallout en action

Besoin d'afficher des informations significatives, qu'il s'agisse d'alertes, de conseils, de conseils, etc.? Saluez ensuite le héros de la version R2 2020 de Telerik UI pour WPF, le contrôle RadCallout.

Vous vous souvenez comment nous pensions tous que les boutons étaient partout? Eh bien, tout en développant le héros de la conversation d'aujourd'hui, j'ai changé d'avis à ce sujet. J'ai commencé à voir des légendes partout, mais il n'y en avait pas d'autre comme notre star – l'un des accents les plus brillants de la version R2 2020 de Telerik UI pour WPF . Bienvenue à tous, le tout nouveau RadCallout. 1965

Je suis sûr que vous avez tous déjà rencontré une légende dans votre vie, au moins une fois. Certains d'entre vous ne savent peut-être pas qu'il s'agit d'une légende. D'autres pourraient le relier aux bulles de pensée ou de discours utilisées dans les bandes dessinées. Tous les fans d'or de Microsoft Office se souviennent sûrement encore de Clippit. Le trombone mignon de bande dessinée, vu dans les versions 2000 à 2003, et ses légendes utiles. Mais quelle est la particularité de la nôtre ? Appelons le RadCallout et découvrons.

Que voyez-vous? Une petite zone de texte opaque et trouble avec une petite queue que vous pouvez pointer vers différents endroits. Assez simple, hein, mais si satisfaisant et incroyablement (à première vue) puissant . Laissez-moi vous guider à travers ses super-pouvoirs.

Variété illimitée de formes de boîte

I Je ne pouvais pas m'empêcher de commencer exactement par celui-ci. Comme le contrôle d'accroche est un contrôle de contenu, conçu pour afficher une information significative, qu'il s'agisse d'alertes, d'indices, de conseils, etc., je crois que la forme de il s'agit de la partie responsable de la meilleure représentation . Vous ne pouvez pas avertir vos utilisateurs que s'ils ne modifient pas leur mot de passe expirant, ils ne pourront peut-être plus jamais se connecter, sous la forme d'un coeur par exemple, pouvez-vous? Coupons la conversation et explorons les options de forme que le RadCallout offre.

Le contro l est livré avec cinq types de formes intégrés, plus une option très spéciale. Le CalloutType est une énumération et il permet les valeurs suivantes: Rectangle, RoundedRectangle, Ellipse, Cloud, Kaboom (la seule forme jazzy et éclatante avec les nombreuses lignes se connectant pour former de nombreux bords triangulaires).

La dernière option est intentionnellement hors de la liste des formes intégrées — c'est l'option Forme personnalisée. Celui qui est responsable du titre de cette section, celui qui vous donne le caractère illimité. En l'utilisant, vous devez fournir une géométrie personnalisée. Je l'aime vraiment, car il vous permet de vous lancer et de créer une forme très cool et unique pour votre légende.

Color Theme Generator . Comme les autres contrôles de l'interface utilisateur Telerik pour WPF, le contrôle Callout est livré avec un ensemble de thèmes que vous pouvez utiliser pour créer une expérience utilisateur cohérente et moderne.

PS Le dernier des types de légende personnalisée est accrocheur, n'est-ce pas? Et puisque je vous aime, je vais vous montrer comment c'est fait:

 <telerik : RadCallout 
 Width = "250" Height = "170" 
 Margin = "10 0" CalloutType = "Custom" 
 MeasurePathWithInfinity = "False" Stretch = "Fill" ArrowType = "None" 
 Géométrie = "M590.7,100.7c.5-3.1,1,1-6,2,1,8-9,3a2,0,2,0,0,0,0-.7-2.4c-7.4-5.7-15.8-9.0-25.4-8.2-10.5 , 1-18,5,6,0-23,2,15,7-3,7,7,8-3,8,16-2,24,3a2,3,2,3,0,0,0,1. 7,1.7c2.1.8,4.3,1,7,6,3,2,7a30,7,30,7,0,0,1,7,2,4,7,6,4,6,4,0,0,1-1,9-.3,86.4,86.4,0 , 0,0-17,4-3,3c-8,5-.6-16.8.1-24.6,3,6-9,3,4,2-15,8,11-18,3,21,1-2,7,9-.8,15,5,2,4,22,9,3,7, 8.0.9.6,14.2,16.8,19.2,2,1.4,4.1,2.6,6.1,3.9,5.2-3,10-6,1,15,5-7,8a7,7,0,0,1-1,2,1,3,110,6,110,6 , 0,0,0-8,0,7,8c-7,5,8,8-11,2,19-10,1,30,7,1,5,16,1,13,5,30,8,29,7,36,0a47,3,47,3,0,0,0,0,30.4-. 5,44,6,44,6,0,0,0,9,6-4,2,60,60,0,0,1-2,4-18,3,11,0,11,0,0,0,1,1,2,1c1,2,3,2,2 , 6.1,3.7.9.1a48.5,48.5,0,0,0,14.8,18.5c9.7,7.2,20.5,9.9,32.4,7.1,12.4-2.9,21-10.4,25-22.7a36.1, 36,1,0,0,0, .5-19.4c-.7-3.1-1.9-6.1-2.9-9.2h0c.8-.5,1.3.1,1.8.6,1.6,1.7,3.2,3.4,4.8 , 5.3a2.9.2.9,0,0,0,2,8,1,3A71,5,71,5,0,0,0686,7,231c10-3,7,18,2-9,8,24,1-18,9,7,5-11,7,9,4-24,6,6,6 -38,2-3,4-16,1-12,3-28,2-27,0-35,8a53,1,53,1,0,0,0-23,6-5,5c-1,3,0-2,6,0-3,9,0a1,9,1,9,0,0 , 1,1.0-1.1c3.6-1.2,7.3-2.6,11.1-3.7,1.3-.4,2.0-.9,2.1-2.3.1-2.3.5-4.7.6-7.1.4-9.6- 1,2-18,8-6,3-27,1-8,0-13,1-20-19,4-35,4-18,5-8, 0,4-15,2,3,3-22,7,5-8,5,5,3-15,5,12,4-21,6,20,5-.4,6-.9 , 1,2-1,7 , 2.2A13.1,13.1,0,0,1,590.7,100.7Zm-63.8,17.7L477,72.3a13.9,13.9,0,0,0-1,5-1c1,0-.5,1,6,3,2,2. 8q10,5,7,7,21,0,15,4l34,25a6,3,6,3,0,0,0,2,4,1,2c-.2-.7-.4-1,4-.6-2,2-2,1-6,3-3- 12,8-1,2-19,3,2,4-9,8,2-15,1,16,8-18,4,13,3-5,1,25,8-3,37,5,5,1,6,4,1,2,9,2,3,1,6,1,8-21,2,3,3-42,1,5,5- 63,1,3,20,5,2,7,41,1,4,1,62,2,1-.8,1,6-1,3,2,2-1,8,8,1-7,17,4-12,28,1-13,5,15,8-2,2,29,7,1,7,40,9,13,3 , 7.7,8,11.2,17.9,11.5,28.9.0,3-.3,6.0-.5,9.0-.0.8-.1,1.7-.2,2.9.1.1-.4,2-.8, 2.8-1.2l78.2-35.9c.9-.4,1.9-.7,2.9-1.0a30.6,30.6,0,0,1-2.6,1.9q-37.2,21.6-74.5,43.1c-. 8.4-1.6,1-2.7,1.6a9.8,9.8,0,0,0,1.4.5c18.6,3.7,31.1,15,38,32.3a59.9,59.9,0,0,1,0, 45,6c-5,6,14.1-15.8,24-30.1,29.3a60.4,60.4,0,0,1-17.0,3.7c-.8.0-1.6.1-2.8.3.5.7.9,1.3,1.3,1.7q21 .2,25.6,42.6,51.2a10.1,10.1,0,0,1-2-1.2Q695.6,271,674,250.7l-4.8-4.4c-.7.8-.4,1.7-.4,2.5a38.8,38.8 , 0,0,1-4,8,19.8,39.8,39.8,0,0,1-21.0,18,44.7,44.7,0,0,1-35,7-.7,38.3,38.3,0,0,1,1- 15.4-12.5c-.3-.4-.6-.9-1-1.3a3.9,3.9,0,0,0-.7-.4c-5.7,27.5-11.1,55.0-17.1,82.5, 2.6-28.3,5.2-56.6,7.8-85. 2a10,6,10,6,0,0,0-1,5,6c-11,7,2-22,7,8,2-34,9,4-16,4-5,7-28,1-16,7-34,6-33a37,3,37,3,0,0,1, 0-29c.5-1.3,1.2-2.5,2-4.3l-61.9,17.3c-.0-.1-.1-.2-.1-.4l63.2-27-3.5-2a55.6, 55,6,0,0,1,1,8,8,6,6c-13-18,6-6,8-43,2,13,3-53,6a44,4,44,4,0,0,1,21,5-4,8c.7,0,1,4,0,2,1 , 0, .1,0, .2-.1.6-.2C527.5,119.2,527.2,118.8,526.8,118.4Z "> 
 

Capacités de personnalisation

Ne soyez pas timide et visez toujours au-delà du paramètres de base comme l'espacement, l'arrière-plan et la couleur de la bordure. Bien sûr, le RadCallout le permet. Ajustez tout ce que vous souhaitez finir avec la légende parfaite pour votre application. Ne vous contentez pas de changer la couleur et le style du texte, ni les décalages verticaux et horizontaux.

Soyez courageux, jouez avec les propriétés qui déterminent l'aspect et la convivialité du point de connexion pour le corps de la légende: la flèche. Consultez les propriétés suivantes:

• ArrowBasePoint1 —le premier point de base de la géométrie de la flèche
• ArrowBasePoint2 —le deuxième point de base de la géométrie de la flèche
• ArrowAnchorPoint —le point d'ancrage de la géométrie de la flèche

Jusqu'à présent, si peu claire, mais laissez-moi essayer d'expliquer.

Les propriétés ci-dessus pour personnaliser la flèche de la géométrie de RadCallout sont toutes de type Point, représentant des coordonnées relatives (entre 0 et 1). Par exemple, X = 0 et Y = 0 signifie le point en haut à gauche du corps de la légende et X = 1, Y = 1 – le point en bas à droite. Dans les figures suivantes, vous pouvez voir les valeurs par défaut des propriétés [0.25, 0.5][0.75, 0.5] et [0.5, 1.25].

Chose importante! La largeur et la hauteur de la légende s'appliquent uniquement au corps de la géométrie, sans la flèche. Pourquoi? Parce que cela permet de conserver très facilement une taille fixe de la forme principale, tout en créant des flèches plus grandes qui dépassent la taille de la forme. Comment faire ces flèches plus grosses: définissez simplement le grand Y du ArrowAnchorPoint. Pour rendre la flèche incluse dans la taille de la légende, vous pouvez définir la propriété MeasurePathWithInfinity sur False.

Coordonnées par défaut des points de flèche

Coordonnées de points de flèche personnalisés

Les points rouge, vert et bleu des figures ne font pas partie du contrôle. À des fins de démonstration uniquement.

Options d'utilisation

Utilisation de XAML

Nous avons déjà exploré les différentes manières d'utiliser RadCallout dans une application WPF. Dans l'extrait de code ci-dessus avec la géométrie personnalisée, j'ai démontré la déclaration XAML du contrôle. Le choix d'un conteneur parent dans ce cas est entièrement entre vos mains – choisissez le meilleur pour afficher votre contenu de la manière la plus pertinente.

Maintenant, je veux approfondir l'autre possibilité. Affichage de la légende dans une fenêtre contextuelle animée, à l'aide de la classe CalloutPopupService.

Utilisation de la fenêtre contextuelle

Vous voulez afficher la légende au-dessus du contenu de votre application et activer l'interaction via des actions telles que cliquer, survoler, naviguer sur le clavier, etc.? Bien sûr, la classe CalloutPopupService sera d'une grande aide car elle fournit les méthodes et les événements nécessaires pour le faire. Utilisez-le pour afficher la légende, fermer une légende donnée, fermer toutes les légendes à la fois et désactiver l'animation contextuelle. Croyez-moi, ce n'est qu'une brève introduction à cette merveilleuse option. Cette classe de service va de pair avec la classe CalloutPopupSettings.

La classe CalloutPopupSettings possède une très longue liste de propriétés puissantes dont vous pourriez bénéficier pour configurer complètement la fenêtre contextuelle à votre convenance. Vous pouvez choisir si la fenêtre contextuelle sera centrée automatiquement ou fermée automatiquement, si elle se déplace avec la fenêtre cible de placement parent, si elle s'affiche dans la position de placement prévue en cas de dépassement des limites du moniteur.

Bien sûr, j'aurais dû commencer par les options Placement représentées par l'énumération PlacementMode autorisant les valeurs suivantes: Absolute, Relative, Bottom, Center, Right, AbsolutePoint, RelativePoint, Souris, MousePoint, Gauche, Haut, Personnalisé.

Les options de configuration d'animation méritent également d'être mentionnées car elles contribuent grandement aux capacités de personnalisation du contrôle. Je vais même les mettre dans une section distincte, à venir… ou en fait vers le bas. 1965

Whoa, c'était une longue liste représentée rapidement… ? (pour un si petit contrôle à première vue).

Animations Popup Popup en action

Si vous êtes déjà intrigué par le service popup, assurez-vous de jouer avec les animations pour obtenir la meilleure expérience pour les utilisateurs finaux. Je serai plus qu'heureux de vous guider à travers cela.

Lors de la configuration de l'animation de votre fenêtre contextuelle d'accroche, vous pouvez choisir parmi l'énumération CalloutAnimation . Il autorise les valeurs suivantes: None, Fade, Move, FadeAndMove, Reveal, FadeAndReveal, Scale, FadeAndScale.

Vous pouvez spécifier différents types d'animation pour la fenêtre contextuelle en utilisant les propriétés ShowAnimationType et CloseAnimationType . En outre, vous pouvez être celui qui contrôle la durée de ces animations, ainsi que leurs retards.

Au cas où vous auriez manqué le billet de blog pour la version R2 2020 de Telerik UI pour WPF , Je vais déposer le GIF, montrant les animations en action:

De l'intro à l'épilogue en un clin d'œil

Cela a déjà commencé à ressembler à une introduction complète d'un livre, donc je pense qu'il est temps de fermer les rideaux de ce joli blog. Mais… avant cela.

Lorsque vous utilisez le RadCallout (je suis sûr que vous le ferez), considérez-le comme votre meilleur assistant pour faciliter la mise en évidence d'informations importantes. Utilisez-le pour alerter les clients sur une remise spéciale, mettez en surbrillance un témoignage ou ajoutez du poids à un contenu texte particulièrement important. Mettez en avant la livraison gratuite, les remises, la correspondance des prix et plus encore. Attirez l'attention sur les arguments de vente uniques et les détails et avantages importants du produit. le contenu de votre application se démarque.

En parlant de sagesse, la meilleure chose serait de profiter de la possibilité exceptionnelle d'intégrer le contrôle d'accroche avec d'autres contrôles d'interface utilisateur de l'interface utilisateur Telerik pour WPF tels que Cartes Graphiques, Info-bulle Slider etc. Pour certaines de ces intégrations (ainsi que d'autres), assurez-vous de vérifier la documentation et les exemples de contrôle impressionnants dans notre démos WPF application .

Partagez vos commentaires

Nous ne nous lasserons jamais de vous encourager à partager vos pensées avec nous en nous laissant un commentaire ci-dessous, ou en utilisant le Portail de commentaires sur l'interface utilisateur pour WPF, car nous avons fortement appréciez vos commentaires honnêtes. C'est vraiment important!

Si vous ne l'avez pas déjà fait, n'hésitez pas à essayer la dernière version:

Essayez Telerik UI pour WPF