Comment faire en sorte que l'info-bulle se déplace avec la souris ?

Question

J'utilise Silverlight 3 + VSTS 2008. J'ai une image (contrôle d'image multi-échelle) et je place une info-bulle sur cette image. La fonction de Tooltip fonctionne bien. Comme l'image est grande (environ 500 * 500), et comme l'utilisateur final peut déplacer la souris sur l'image, je veux afficher la position de l'infobulle en même temps que la souris (c'est-à-dire que lorsque la souris se déplace, je veux que l'infobulle se déplace en même temps que la souris). Actuellement, l'infobulle s'affiche à une position fixe.

Voici mon code XAML actuel. Avez-vous des idées pour résoudre ce problème ?

      <MultiScaleImage x:Name="msi" Height="500" Width="500">
            <ToolTipService.ToolTip>
                <ToolTip Content="Here is a tool tip" Name="DeepZoomToolTip"></ToolTip>
            </ToolTipService.ToolTip>
        </MultiScaleImage>

Answer 1

J'ai fini par avoir un problème similaire et j'ai résolu le problème en utilisant une popup. Ce site contenait la solution de base. Voici le XAML suggéré dans l'autre message :

<Canvas x:Name="LayoutRoot" Background="White">
<Image Source="/pretty-pretty.png" MouseMove="Image_MouseMove" MouseLeave="Image_MouseLeave"/>
<Popup Name="DeepZoomToolTip">
   <Border CornerRadius="1" Padding="1" Background="Azure" IsHitTestVisible="False">
       <TextBlock Text="Here is a tool tip" />
   </Border>
</Popup>
</Canvas>

Et voici ce qui est suggéré, cela va aller dans le code derrière :

private void Image_MouseMove(object sender, MouseEventArgs e)
{
    DeepZoomToolTip.IsOpen = true;
    DeepZoomToolTip.HorizontalOffset = e.GetPosition(LayoutRoot).X;
    DeepZoomToolTip.VerticalOffset = e.GetPosition(LayoutRoot).Y;
}

private void Image_MouseLeave(object sender, MouseEventArgs e)
{
    DeepZoomToolTip.IsOpen = false;
}

Answer 2

Le contrôle de l'info-bulle est conçu pour apparaître à peu près à l'endroit où la souris rencontre l'élément auquel il est lié, et ne peut pas répondre aux événements de déplacement. Vous trouverez ci-dessous un exemple d'infobulle personnalisée. J'ai ajouté l'arrière-plan et le z-index pour que le bloc de texte apparaisse au-dessus de l'image. Le décalage par rapport à la position de la souris permet d'éloigner l'infobulle du curseur de la souris, afin que le mouvement soit animé en douceur.

XAML :

<UserControl x:Class="ImageEditor.TestControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="800" Height="800">
    <Canvas x:Name="MainCanvas">
        <Border x:Name="tt" Background="Gray" Visibility="Collapsed" Canvas.ZIndex="10">
            <TextBlock x:Name="txtTooltip" Width="90" Height="20" Text="This is a tooltip" ></TextBlock>    
        </Border>

        <Image x:Name="theImage"  Source="images/image.jpg" Width="300" MouseEnter="theImage_MouseEnter" 
        MouseMove="theImage_MouseMove" MouseLeave="theImage_MouseLeave">

        </Image>

    </Canvas>

</UserControl>

Code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace ImageEditor
{
    public partial class TestControl : UserControl
    {
        private bool _tooltipVisible = false;
        public TestControl()
        {
            InitializeComponent();
        }

        private void theImage_MouseMove(object sender, MouseEventArgs e)
        {
            if (_tooltipVisible)
            {
                tt.SetValue(Canvas.TopProperty, e.GetPosition(theImage).Y - (5 + txtTooltip.Height));
                tt.SetValue(Canvas.LeftProperty, e.GetPosition(theImage).X - 5);
            }
        }

        private void theImage_MouseEnter(object sender, MouseEventArgs e)
        {
            _tooltipVisible = true;
            tt.Visibility = Visibility.Visible;
        }

        private void theImage_MouseLeave(object sender, MouseEventArgs e)
        {
            _tooltipVisible = false;
            tt.Visibility = Visibility.Collapsed;
        }
    }
}