天天看點

修改LiveChart的提示顯示位置

問題:修改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這塊越來越好!

希望對大家有所幫助,還有什麼問題可以在下方留言。謝謝!