• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

修改LiveChart的提示显示位置

开发技术 开发技术 2周前 (10-15) 15次浏览

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

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

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

修改LiveChart的提示显示位置

       图一     

修改LiveChart的提示显示位置

 

 

       图二

处理环境:LiveCharts源码一份

了解LiveCharts源码的处理机制

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

增加小倒三角

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

 修改LiveChart的提示显示位置

调整提示框显示位置

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

 

效果

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

 

 修改LiveChart的提示显示位置

结尾

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

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


喜欢 (0)