WPF drag过程中显示ToolTip.

最新推荐文章于 2025-09-18 21:11:29 发布

原创最新推荐文章于 2025-09-18 21:11:29 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#WPF

WPF学习专栏收录该内容

6 篇文章

订阅专栏

在WPF的drag/drop过程中，为了提升用户体验，有时会在鼠标over元素时显示ToolTip以告知用户能否接受拖动内容或元素详情。由于DragOver事件替代了MouseOver，因此需借助Popup实现ToolTip效果。本文介绍了如何通过Xaml数据绑定和ViewModel计算属性，以及在DragOver事件中控制Popup的显示和位置，确保ToolTip在适当时候出现并正确定位。

在drag/drop过程中，我们在判断出over的元素上是否可以接受drag的东西之后，通常是通过鼠标的样式简单告诉用户这个元素不接受现在drag的内容，但是用户通常不知道具体的原因，有时候为了增强客户体验，会在over的过程中显示tooltip来告诉用户为什么不能接受drag的东西或者告诉用户over的元素是什么东西，特别是一些绘图或者其他一些复杂的应用软件，这种方式比较广泛。

WPF 给各种控件提供了ToolTip属性，可以通过设置该属性的值来决定鼠标Over到控件的时候要显示什么内容，但是在Drag的过程中却不能触发MouseOver事件，触发的是DragOver事件，那就需要Popup 来实现该效果，下面是根据自己的经验来简单设计了一个Popup控件实现tooltip功能。

1. 在Xaml中增加Popup控件以及进行数据绑定

        <Popup x:Name="toolTip" IsOpen="{Binding ShowToolTip, Mode=OneWay}" AllowsTransparency="True" 
            Placement="Relative" HorizontalOffset="{Binding ToolTipPos.X}" VerticalOffset="{Binding ToolTipPos.Y}">
            <TextBlock Foreground="Red" Text="{Binding DragElement.Description}"></TextBlock>
        </Popup>

注：在Popup的属性设置中特别注意Placement的属性值，详细信息可以查看MSDN 
怎样设置Placement属性，

2. 在ViewModel中要注意属性值的计算

        private Point _tooltipPos;
        public Point ToolTipPos
        {
            get { return _tooltipPos; }
            set
            {
                if (_tooltipPos == value)
                    return;
                if (Math.Abs(_tooltipPos.X - 15 - value.X) > 15 || Math.Abs(_tooltipPos.Y - 15 - value.Y) > 15)
                {
                    // why reduce 15? because if position the popup window to current cursor location, 
                    //if mouse moving when drag/drop, the mouse will be on popup window, so the user's experience is not good.
                    _tooltipPos = value;
                    _tooltipPos.Offset(15, 15);
                    RaisePropertyChanged("ToolTipPos");
                }
            }
        }

注意ToolTipPos的Set值的设置，实际上value是光标当前的位置，为什么要对改值Offset(15,15)？主要是为了在Popup窗口显示的时候，要保证光标所Over的控件是原来的控件，如果不进行offset，在某些细微移动的过程中可能出现DragOver的对象由原来的控件跟popup窗口之间切换。

        private bool _showToolTip;
        public bool ShowToolTip
        {
            get { return _showToolTip; }
            set
            {
                if(_showToolTip == value)
                    return;
                _showToolTip = value;
                RaisePropertyChanged("ShowToolTip");
            }
        }

该属性决定了Popup窗口是否要显示，需要在DragOver事件处理函数中进行设置为True. 在dragover对象的mousemove处理函数中设置该值为false,保证Popup消失。

3. DragOver的过程中获取鼠标的位置，设置Popup窗口的target属性。

            this.toolTip.PlacementTarget = this.SelectedEmployees;
            this.ToolTipPos = e.GetPosition(SelectedEmployees);
            ShowToolTip = true;

注： e 为dragover过程中参数DragEventArgs e, 在获取鼠标位置的时候不要用Mouse.GetPosition(IInputElement ),因为在drag过程中对鼠标是在DragOver事件中管理的，用Mouse.GetPosition(IInputElement)不能获得准确的值。