Comment faire pour déplacer l'info-bulle 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 que l'utilisateur final peut déplacer la souris sur l'image, je veux afficher la position de l'info-bulle avec la souris (par exemple, lorsque la souris bouge). Actuellement, l'info-bulle s'affiche à une position fixe.

Voici mon code XAML actuel, 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

Le contrôle de infobulle est conçu pour faire apparaître à peu près où la souris rencontre l'élément auquel il est lié, et ne peut pas répondre à déplacer des événements. Voici un exemple d'info-bulle personnalisé. J'ai ajouté l'arrière-plan et l'index z pour que TextBlock apparaisse sur l'image. Le décalage par rapport à la position de la souris éloigne l'info-bulle du curseur de la souris, de sorte que le mouvement est animé de façon fluide.

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; 
     } 
    } 
} 

Answer 2

J'ai fini par avoir un problème similaire et résolu le problème en utilisant une fenêtre contextuelle. This post contenait la solution de base. Voici le XAML suggéré de l'autre poste:

<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 est l'a suggéré ici, cela irait 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; 
}