如何使工具提示随鼠标移动？答案

【问题标题】：how to make tooltip move along with mouse?如何使工具提示随鼠标移动？
【发布时间】：2009-09-06 07:30:54
【问题描述】：

我正在使用 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>

【问题讨论】：

您找到解决方案了吗？我正在尝试做类似的事情，并且一直在尝试在后面的代码中创建 ToolTip 对象并放置它，但还没有让它工作。

标签： c# silverlight visual-studio-2008 tooltip deepzoom

【解决方案1】：

我最终遇到了类似的问题，并通过使用弹出窗口解决了这个问题。 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;
}

【讨论】：

【解决方案2】：

工具提示控件设计为在鼠标与它绑定的元素相遇的大致位置弹出，并且无法响应移动事件。下面是一个自定义工具提示示例。我添加了背景和 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;
        }
    }
}

【讨论】：