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.
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.
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:
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:
Source link