如何使工具提示隨鼠標移動？

我正在使用Silverlight 3 + VSTS 2008.我有一個圖像（多尺度圖像控制），我將工具提示放在此圖像上。 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>

來源

2009-09-06 George2

你有沒有找到一個解決這個？我試圖做類似的事情，並一直在後臺代碼中創建工具提示對象並放置它，但尚未得到它的工作。 – 2010-03-23 18:26:15

工具提示控件設計用於大致彈出鼠標遇到綁定的元素的位置，並且無法響應移動事件。以下是一個自定義工具提示示例。我添加了背景和z-index，以便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; 
     } 
    } 
}

來源

2009-09-06 17:50:52

我結束了有一個類似的問題，並通過使用彈出來解決這個問題。 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; 
}

來源

2010-03-23 22:01:25

+1使用Popup是更好的方法。 – 2010-08-26 06:02:22

如何使工具提示隨鼠標移動？

回答

相關問題