Discussion :

[zax-tfh]

Bonjour à tous,

Je recherche un moyen d'effectuer l'affichage d'une bulle d'une façon particuliere :
Imaginons un listbox avec des items. Sur chaque ligne il y a un bouton "i" pour informations. Quand on clique dessus, ca doit afficher un border contenant différentes informations.

Les contraintes sont les suivantes :
1) le placement de cette bulle doit se faire juste en dessous de l'item qui a été cliqué.
2) Si la largeur de la bulle dépasse la largeur du listbox, cela doit s'afficher quand meme.

La problématique est simple : Je sais que je dois utiliser un canvas, mais à quel endroit, j'en ai aucune idée. Ensuite, je ne vois vraiment pas comment je peux placer ma bulle juste en dessous de l'item...
Auriez vous à tout hasard une idée sur le sujet svp ?

Merci d'avance
@+

[Thomas Lebrun]

Un Tooltip ?

Sinon, d'une manière générale, un Tooltip sur lequel on peut cliquer, ce n'est pas une bonne idée en termes d'Ux: les tooltips sont fait pour afficher des infos, pas pour être manipulés.

[zax-tfh]

Salut,

Merci pour ta réponse. Ce n'est pas vraiment un tooltip dans son sens strict mais un mix avec une popup on pourrait dire.
A savoir qu'au niveau interactions il n'y a rien sur cette bulle, juste des informations et un bouton fermer (ou pas, si y'en a pas besoin si il y a un autre systeme plus sympa).
Bref, pour faire simple, je t'ai fait un petit mockup de l'effet recherché. Par contre si tu as une suggestion vers un autre systeme je suis preneur. Je peux juste affirmer que la popup ne sera pas acceptée, ni une zone d'infos qui serait en permanence affichée et se mettrait à jour au changement de selecteditem (ce changement automatique est impossible à garder car à chaque demande d'info on fait un appel webservice et j'aimerai limiter le nombre d'appel autant que possible).

Merci
@+

[Skyounet]

Ben faut utiliser le même principe qu'un tooltip, à savoir un grand canvas transparent sur lequel est positionné le contrôle tooltip.

Pour savoir où placer ton contrôle, tu prends le ListBoxItem cliqué, tu prends sa ActualHeight, ensuite tu prends les coordonnées de ta souris avec ton LIstBoxItem en référence puis de façon général dans ton interface tu fais un petit calcul avec les 3 valeurs et tu dois pouvoir trouver la coordonnée Y du bas de ton ListBoxItem.

[zax-tfh]

Merci pour ta réponse.

C'est ce que je pensais faire, mais j'ai une problématique supplémentaire :
C'est un usercontrol qui pour le moment sera utilisé à un seul endroit, donc en gros, le canvas doit faire partie de mon usercontrol. Ceci étant, j'ai essayé de placer un canvas en tant que premier controle de mon usercontrol et j'ai mis la listbox dedans. Et là c'est le drame, je suis incapable d'afficher la listbox dockée fill dans le canvas
Donc voici mes deux questions qui en découlent :

1) tu as un canvas qui contient un listbox. Existe-t-il une méthode simple pour que le listbox prenne la largeur et la hauteur du canvas (je viens de penser que j'ai oublié de tester le binding des width et height sur ceux du canvas...)

2) Comment fais tu pour avoir les infos sur tes listbox items (en l'occurence leur position et leur taille) ? J'ai essayé de trouver tout ca mais j'avouerai qu'en WPF c'est assez difficile de s'insérer dans la logique graphique profonde !

Merci encore

[Skyounet]

Si tu mets ton Canvas dans ton UC il ne pourra jamais faire toute la taille de l'application.

Tu pourrais même passer par une propriété attacher pour ton pseudo tooltip d'ailleurs.

Pour récupérer les ListBoxItem il faut passer par une méthode du type GetParentOfType<T> à partir de ton bouton Info.

Code c# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
public static T GetParentOfType<T>(this UIElement element)
            where T : UIElement
        {
            FrameworkElement parent = VisualTreeHelper.GetParent(element) as FrameworkElement;
 
            if (parent == null) return null;
 
            if (typeof(T).IsAssignableFrom(parent.GetType())) return parent as T;
            else return parent.GetParentOfType<T>();
        }