原文:WPF drag过程中显示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)不能获得准确的值。

WPF drag过程中显示ToolTip.的更多相关文章

  1. Ajax请求过程中显示“进度”的简单实现

    Ajax在Web应用中使用得越来越频繁.在进行Ajax调用过程中一般都具有这样的做法:显示一个GIF图片动画表明后台正在工作,同时阻止用户操作本页面(比如Ajax请求通过某个按钮触发,用户不能频繁点击 ...

  2. C++ CEF 浏览器中显示 Tooltip(标签中的 title 属性)

    在 Windows 中将 CEF 集成到 C++ 客户端以后,默认是无法显示 tooltip 的,比如图片标签中的 title 属性. 实现的方式其实很简单,按下面的步骤操作就可以: 创建一个文本文件 ...

  3. css3实现loading效果--当页面加载过程中显示Loading的进度条,全部加载完成之后进度条消失

    一个页面等图片资源全部加载完成,会需要很长时间,用户体验会很差,所以我们需要loading来掩盖这个漫长的过程! emmm,定时器?写个定时器还要清除,万一造成内存泄露?定时器之间还会互相影响,呼呼呼 ...

  4. 在程序加载过程中显示ProgressDialog 对话框

    private ProgressDialog mProgressDlg = null; @Override protected void onCreate(Bundle savedInstanceSt ...

  5. WPF Slider Tickbar 中显示数值

    class CustomTickBar : TickBar { protected override void OnRender(System.Windows.Media.DrawingContext ...

  6. 在安装mysql数据库的过程中,显示msvcp100.dll丢失?则么办?

    方案一:重装操作系统为windows10专业版 方案二:问题: 解答: 报错原因是VC运行库不全或者没有安装导致,百度搜索VC集合下载安装, 链接:https://pan.baidu.com/s/1U ...

  7. 在Installshield的安装进度中显示自己设置的信息

    原文:在Installshield的安装进度中显示自己设置的信息 以Installscript msi project为例,在installshield所制作的安装包安装过程中显示安装进度的,就在On ...

  8. VS编程,编辑WPF过程中,点击设计器中界面某一控件,在XAML中高亮突出显示相应的控件代码的设置方法。

    原文:VS编程,编辑WPF过程中,点击设计器中界面某一控件,在XAML中高亮突出显示相应的控件代码的设置方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net ...

  9. Android ListView滑动过程中图片显示重复错乱闪烁问题解决

    最新内容建议直接访问原文:Android ListView滑动过程中图片显示重复错乱闪烁问题解决 主要分析Android ListView滚动过程中图片显示重复.错乱.闪烁的原因及解决方法,顺带提及L ...

随机推荐

  1. NX二次开发-创建一个3 x 3矩阵UF_CSYS_create_matrix

    1 NX9+VS2012 #include <uf.h> #include <uf_csys.h> #include <uf_mtx.h> UF_initializ ...

  2. [JZOJ 5818] 做运动

    题意:带温度最短路. 思路: 我们将温度从小到大的将边加入,用并查集维护连通性. 如果一旦联通那么跑一遍\(spfa\)就可以得到答案. 复杂度\(O(m log m)\) #include < ...

  3. (转)简述负载均衡&CDN技术

    转:http://www.cnblogs.com/mokafamily/p/4402366.html#commentform 曾经见到知乎上有人问“为什么像facebook这类的网站需要上千个工程师维 ...

  4. 拾遗:Perl 在 Shell 脚本编程中的应用

    Perl 对我用途,仅是作为 Shell 脚本中的文本处理器:在较大的软件工程里,更多的是使用 C.go 等编译型语言. Perl 是一种历史比较悠久的动态编程语言,在各种类 Unix 系统中得到了应 ...

  5. 如何理解CUDA中的cudaMalloc()的参数

    首先看下此运行时函数的原型: cudaError_t cudaMalloc (void **devPtr, size_t size ); 主要的第一个参数.为什么是两个星星呢?用个例子来说明下. fl ...

  6. vue中excal表格的导入和导出

    注意:vue中要实现表格的导入与导出,首先要install两个依赖, npm install -S file-saver xlsx  和  npm install -D script-loader.其 ...

  7. shell 一些命令(转)

    shell 一些命令(转) https://www.cnblogs.com/amei0/p/8041989.html 参考文档 http://man.linuxde.net/ 一.awk 求和 awk ...

  8. Zabbix监控RabbitMQ

    github下载开源脚本:https://github.com/jasonmcintosh/rabbitmq-zabbix 运行环境:python2.6.6 脚本分析: rabbitmq-zabbix ...

  9. 【POJ】2492 A Bug's Life

    题目链接:http://poj.org/problem?id=2492 题意:给你n个虫子,m组实验.让你帮科学家找一下有没有虫子是同性恋. 题解:假设x是一个性别,x+n为另一个性别.如果在同性的集 ...

  10. 实时收集Storm日志到ELK集群

    背景 我们的storm实时流计算项目已经上线几个月了,由于各种原因迟迟没有进行监控,每次出现问题都要登录好几台机器,然后使用sed,shell,awk,vi等各种命令来查询原因,效率非常低下,而且有些 ...