使用 WPF 图表获取自定义工具提示？答案

【问题标题】：Getting a custom tooltip with a WPF Chart?使用 WPF 图表获取自定义工具提示？
【发布时间】：2011-10-18 05:49:27
【问题描述】：

我使用以下方法创建了 ScatterSeries 图表：

    public ScatterPlot()
    {
        InitializeComponent();


        ScatterSeries a = new ScatterSeries();
        a.Title = "Series A";

        a.IndependentValuePath = "Key";
        a.DependentValuePath = "Value";

        scatterplot.Series.Add(a);

        ((ScatterSeries)scatterplot.Series[0]).ItemsSource = new KeyValuePair<DateTime, int>[]
         {
           new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(1), 0),
           new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(2), 150),
           new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(3), 150),
           new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(4), 0),
           new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(5), 0),
           new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(8), 130),
           new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(9), 130),
           new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(10), 0),
           new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(11), 0),
           new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(15), 225),
           new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(16), 225),
           new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(17), 0)
         };

    }

我有一个字典，其中每个数据点都映射到一个单独的文本标签。我想知道是否可以建立一个绑定，这样当我将鼠标移到一个点上时，我会得到文本标签而不是实际数字？有关如何执行此操作的任何建议？

【问题讨论】：

标签： c# wpf wpf-controls wpftoolkit

【解决方案1】：

设置DataPoint 样式...

    <charting:ScatterSeries DependentValuePath="Value"
                            IndependentValuePath="Key">
       <charting:DataPointSeries.DataPointStyle>
         <Style TargetType="{x:Type charting:DataPoint}">
              <EventSetter Event="MouseEnter" Handler="DataPoint_MouseEnter" />
              <!--Style.Triggers>
                 <Trigger Property="IsMouseDirectlyOver" Value="True">
                     <Setter Property="ToolTip" Value="Hi There!"/>
                 </Trigger>
             </Style.Triggers--> <!-- This doesnt work!-->
         </Style>
       </charting:DataPointSeries.DataPointStyle>
       <charting:DataPointSeries.ItemsSource>
            <Binding BindsDirectlyToSource="True"/>
       </charting:DataPointSeries.ItemsSource>
    </charting:ScatterSeries>

但是当我测试时，基于触发器的工具提示设置器没有工作。事件设置器虽然工作。因此，最快的解决方法可能是使用该事件设置器并从处理程序后面的代码中设置TooltipService.ToolTip。

但如果您使用的是 MVVM，那么您可以使用一些附加行为来处理此事件并明确设置工具提示。

或

您可以使用上述样式覆盖ScatterDataPoint 模板并将模板设置为此NewTemplate ...

请注意，在下面的 ControlTemplate 中，我已将 ToolTipService.ToolTip 设置为 DataPoint 的工具提示。所以你必须使用上面的样式来设置Template和ToolTip ...

 <!--  charting:ScatterDataPoint  -->

 <Style x:Key="NewTemplate" TargetType="charting:ScatterDataPoint">
    <Setter Property="Background" Value="Orange" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="BorderBrush" Value="#FF686868" />
    <Setter Property="Width" Value="8" />
    <Setter Property="Height" Value="8" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="charting:ScatterDataPoint">
                <Grid x:Name="Root" Opacity="0">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.1" />
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="MouseOverHighlight" Storyboard.TargetProperty="(UIElement.Opacity)">
                                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.3" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.1" />
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Unselected" />
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectionHighlight" Storyboard.TargetProperty="(UIElement.Opacity)">
                                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.185" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectionHighlight" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                        <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF8A8A8A" />
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="RevealStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.5" />
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Shown">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Root" Storyboard.TargetProperty="(UIElement.Opacity)">
                                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Hidden">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ToolTipService.ToolTip>
                        <ContentControl Content="{TemplateBinding ToolTip}" />
                    </ToolTipService.ToolTip>
                        <Path Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" Stretch="Fill" StrokeThickness="1" StrokeLineJoin="Round" Data="F1 M 0,50L 50,0 100,50 50,100L 0,50 Z " />
                        <Path x:Name="MouseOverHighlight" Stretch="Fill" StrokeThickness="1" StrokeLineJoin="Round" Stroke="{x:Null}" Data="F1 M 0,50L 50,0 100,50 50,100L 0,50 Z  " Opacity="0" Fill="#FFFFFFFF" />
                        <Path x:Name="SelectionHighlight" Stretch="Fill" StrokeThickness="1" StrokeLineJoin="Round" Stroke="{x:Null}" Data="F1 M 0,50L 50,0 100,50 50,100L 0,50 Z " Fill="#FF959595" Opacity="0" />
                    </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
   </Style>

【讨论】：