Как сделать подсказку двигаться вместе с мышью?

Question

Я использую Silverlight 3 + VSTS 2008. У меня есть изображение (Multicale image control), и я устанавливаю подсказку на этом изображении. Функция Tooltip отлично работает. Поскольку изображение является большим (размер около 500 * 500), и поскольку конечный пользователь может перемещать мышь на изображение, и я хочу отображать положение всплывающей подсказки вместе с мышью (т. Е. Когда мышь перемещается, я хочу, чтобы всплывающая подсказка перемещалась вместе с мышью). В настоящее время всплывающая подсказка отображается в фиксированном положении.

Вот мой текущий код XAML, любые идеи, как решить эту проблему?

 <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

управление подсказкой предназначен всплывал примерно где мышь отвечает элемент, к которому он привязан, и не может реагировать на событие перемещения. Ниже приведен пример пользовательской подсказки. Я добавил фон и z-индекс так, чтобы TextBlock появлялся над изображением. Смещение с позиции мыши удерживает всплывающую подсказку от курсора мыши, так что движение анимируется плавно.

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> 

Код:

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

Я закончил тем, что подобный вопрос и решить эту проблему с помощью всплывающего окна. This сообщение содержало основное решение. Здесь предлагается XAML с другой пост:

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

А вот предложенный, это будет идти в коде позади:

 


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