InteractiveDataDisplay.WPF：如何自定义图表悬停提示框显示数值

我之前做项目时也碰到过这个问题，InteractiveDataDisplay.WPF默认的Tooltip确实太朴素了，不过不用复杂的事件处理，用XAML的DataTemplate就能轻松实现自定义格式，步骤很简单：

步骤1：给LineGraph添加自定义Tooltip模板 #

直接在XAML里给每个LineGraph设置TooltipTemplate属性，替换默认的提示框内容。你可以根据需求自由布局文本、添加单位或者调整样式，比如这样：

<Grid>
    <wpf:Chart Margin="10" IsHorizontalNavigationEnabled="False" IsVerticalNavigationEnabled="False" 
                LeftTitle="Высота (м)" BottomTitle="Значение ветрового давления (Т/м²)">
        <Grid>
            <wpf:LineGraph x:Name="linegraphNorm" Description="Нормативная нагрузка" 
                           Stroke="Green" StrokeThickness="3">
                <!-- 自定义Нормативная нагрузка的Tooltip -->
                <wpf:LineGraph.TooltipTemplate>
                    <DataTemplate>
                        <StackPanel Background="#F5F5F5" Padding="8" BorderBrush="#CCCCCC" BorderThickness="1">
                            <TextBlock Text="Нормативная нагрузка" FontWeight="Bold" Margin="0 0 0 4"/>
                            <TextBlock Text="{Binding Y, StringFormat='Высота: {0:F2} м'}"/>
                            <TextBlock Text="{Binding X, StringFormat='Давление: {0:F2} Т/м²'}"/>
                        </StackPanel>
                    </DataTemplate>
                </wpf:LineGraph.TooltipTemplate>
            </wpf:LineGraph>

            <wpf:LineGraph x:Name="linegraphCalc" Description="Рассчетная нагрузка" 
                           Stroke="Red" StrokeThickness="3">
                <!-- 自定义Рассчетная нагрузка的Tooltip -->
                <wpf:LineGraph.TooltipTemplate>
                    <DataTemplate>
                        <StackPanel Background="#F5F5F5" Padding="8" BorderBrush="#CCCCCC" BorderThickness="1">
                            <TextBlock Text="Рассчетная нагрузка" FontWeight="Bold" Margin="0 0 0 4"/>
                            <TextBlock Text="{Binding Y, StringFormat='Высота: {0:F2} м'}"/>
                            <TextBlock Text="{Binding X, StringFormat='Давление: {0:F2} Т/м²'}"/>
                        </StackPanel>
                    </DataTemplate>
                </wpf:LineGraph.TooltipTemplate>
            </wpf:LineGraph>
        </Grid>
    </wpf:Chart>
</Grid>

关键说明 #

• 绑定的X和Y对应你后台Plot方法的参数：你用的是Plot(normResult.Values, normResult.Keys)，所以Y轴对应Values（高度），X轴对应Keys（压力），和图表的轴标题完全匹配。
• StringFormat可以自定义数值的显示格式，比如{0:F2}是保留两位小数，你可以根据需求调整精度或者格式规则。
• 模板里的StackPanel、背景色、内边距这些是为了让提示框更美观，你可以完全按照自己的UI需求修改样式细节。

步骤2：保持后台代码不变 #

你原来填充数据的代码不需要做任何修改，直接保留即可：

var graphic = new Graphic();
graphic.linegraphNorm.Plot(normResult.Values, normResult.Keys);
graphic.linegraphCalc.Plot(calcResult.Values, calcResult.Keys);
graphic.ShowDialog();

这样当你把鼠标悬停在线条上时，就会显示你自定义格式的提示框了，完全符合需求。

内容的提问来源于stack exchange，提问作者R. Hanza