修改LiveChart的提示显示位置

问题：修改LiveChart的提示显示位置

摘要：相信WPF开发者在用LiveCharts的时候会有遇到这个需求。就是产品要求折线图的提示要显示的正常点。

需求：如下图所示。原本显示是在下方并且没有小三角。然后产品需要改成如图二所示

　　     图一     

 

 

       图二

处理环境：LiveCharts源码一份

了解LiveCharts源码的处理机制

当然，要全了解可能有点难。像我这种菜鸟基本上就只能做点小修改。如果有闲时功夫倒可以去了解一下。

增加小倒三角

首先定位到这个提示框的UI页。这个提示框的页面叫做DefaultTooltip.xaml,然后对其页面布局进行如下操作即可出现小三角，请注意我画框的部分。Effect为阴影，由于对下面的布局有进行Marin的调整，所以会导致阴影显示异常。所以我再这里给他选择删除。然后那个boder就是一个正方形旋转了45°。代码如下图所示：

 

调整提示框显示位置

找到如下图代码位置，这个地方就是设置提示框的位置。当然有些统计图的提示框可能跟这个会有所偏差。但由于我只用到折线图，所以就给他强制改下去了。需求万岁 T  ^ T 

首先将原来的代码注释掉。location.X其实就相当于DefaultTooltip距离画布的Left，location.Y其实就相当于DefaultTooltip距离画布的Top。然后有人会说提示框的宽高不固定什么的。其实如果通过断点会发现他提示框其实是有实际的宽高的也就是DataTooltip.ActualWidth和DataTooltip.ActualHeight。至于我为什么加30呢？因为他这个location.X并不是折线图的点到边缘的位置。所以为了更好的定位，我先将这个提示框到边缘的位置跟点到边缘位置统一。然后再通过对DataTooltip.ActualWidth的实际宽度进行除以2.然后通过location.X来得到居中位置。

然后location.Y到上方边缘的位置其实跟点到上方的位置是一致的，所以我这边直接对他进行location.Y减去实际高度DataTooltip.ActualHeight。然后可能是对于高度有些偏差。然后给他加了个10以此来达到实际的效果。

 

效果

下图就是我改完编译然后让需要的项目引用后得到的效果。看上去跟上面的需求其实也就差不了太多了。就差一个阴影等小细节

 

 

结尾

首先感谢LiveChart的开源者跟代码改进的贡献者们。也希望大家在wpf这块越来越好！

希望对大家有所帮助，还有什么问题可以在下方留言。谢谢！