TelerikForWPF——折线图（RadCartesianChart）的ToopTip

一、前言

起名字太难了，这篇文章记录一下，利用telerik插件在折线图上实现ToopTip的过程，即鼠标滑过折线时显示一些自定义的信息。

二、坑

1、官方文档：戳我

2、tooltip文档指路：https://docs.telerik.com/devtools/wpf/controls/radchartview/features/behaviors/tooltip
3、请仔细阅读这段话

找谷歌翻译翻译了一下，意思就是说，ToolTipTemplate只对数据点起作用，文档的实例也是用点状图作示例：

<telerik:ScatterPointSeries.TooltipTemplate> 
    <DataTemplate> 
        <Border Background="#5A000000" Padding="5" TextElement.Foreground="White"> 
            <StackPanel> 
                <StackPanel Orientation="Horizontal"> 
                    <TextBlock Text="X=" FontWeight="Bold" /> 
                    <TextBlock Text="{Binding XValue}"  /> 
                </StackPanel> 
                <StackPanel Orientation="Horizontal"> 
                    <TextBlock Text="Y=" FontWeight="Bold" /> 
                    <TextBlock Text="{Binding YValue}"  /> 
                </StackPanel> 
            </StackPanel> 
        </Border> 
    </DataTemplate> 
</telerik:ScatterPointSeries.TooltipTemplate> 

如果折线图想要实现tooltips功能，需要先为这些点指定所需的形状，颜色和大小。

1、实例化PointTemplate

 <DataTemplate x:Key="point">
            <Ellipse Height="15" Width="15" Fill="Transparent" Cursor="Hand"/>
 </DataTemplate>
 
 <telerik:RadCartesianChart.Series>
        <telerik:LineSeries
        	ItemsSource="{Binding LineScheDateCompetion}"
        	TooltipTemplate="{StaticResource tooltips}" 
        	PointTemplate="{StaticResource point}"		     
	 </telerik:LineSeries>
 </telerik:RadCartesianChart.Series>

2绑定 TooltipTemplate。

 <DataTemplate x:Key="tooltips">
            <Border Background="#5A000000" Padding="5" TextElement.Foreground="White">
              
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="日期：" FontWeight="Bold" />
                        <TextBlock Text="{Binding DataItem.Date,StringFormat={}{0:yyyy/MM/dd}}" FontWeight="Bold" />

                    </StackPanel>                  
               
            </Border>

 </DataTemplate>

设置完长这个样子