在 WPFToolkit 图表中设置 PieDataPoint 样式时的视觉状态问题

Question

我正在尝试在 WPFToolkit 图表中设置饼图数据点的样式。基本上我想更改工具提示。它可以工作，但数据点的视觉状态不会改变。

我从源代码中复制了样式并修改了工具提示，仅添加了FormattedIndependentValue。样式如下：

<!--  charting:PieDataPoint  -->
<Style x:Key="PieDataPointStyle" TargetType="charting:PieDataPoint">
  <Setter Property="Background" Value="Orange" />
  <Setter Property="BorderBrush" Value="White" />
  <Setter Property="BorderThickness" Value="0" />
  <Setter Property="IsTabStop" Value="False" />
  <Setter Property="RatioStringFormat" Value="{}{0:p2}" />
  <Setter Property="Template">
     <Setter.Value>
        <ControlTemplate TargetType="charting:PieDataPoint">
           <Grid x:Name="Root" Opacity="1">
              <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>
                          <DoubleAnimation Storyboard.TargetName="MouseOverHighlight" Storyboard.TargetProperty="Opacity" To="0.6" Duration="0" />
                       </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>
                          <DoubleAnimation Storyboard.TargetName="SelectionHighlight" Storyboard.TargetProperty="Opacity" To="0.6" Duration="0" />
                       </Storyboard>
                    </VisualState>
                 </VisualStateGroup>
                 <VisualStateGroup x:Name="RevealStates">
                    <VisualStateGroup.Transitions>
                       <VisualTransition GeneratedDuration="0:0:0.5" />
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="Shown">
                       <Storyboard>
                          <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                       </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Hidden">
                       <Storyboard>
                          <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
                       </Storyboard>
                    </VisualState>
                 </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>
              <Path x:Name="Slice" Data="{TemplateBinding Geometry}" 
                    Fill="{TemplateBinding Background}" 
                    Stroke="{TemplateBinding BorderBrush}" 
                    StrokeMiterLimit="1">
                 <ToolTipService.ToolTip>
                    <StackPanel>
                       <ContentControl Content="{TemplateBinding FormattedIndependentValue}" />
                       <ContentControl Content="{TemplateBinding FormattedDependentValue}" />
                       <ContentControl Content="{TemplateBinding FormattedRatio}" />
                    </StackPanel>
                 </ToolTipService.ToolTip>
              </Path>
              <Path x:Name="SelectionHighlight" Data="{TemplateBinding GeometrySelection}" Fill="Red" StrokeMiterLimit="1" IsHitTestVisible="False" Opacity="0" />
              <Path x:Name="MouseOverHighlight" Data="{TemplateBinding GeometryHighlight}" Fill="White" StrokeMiterLimit="1" IsHitTestVisible="False" Opacity="0" />
           </Grid>
        </ControlTemplate>
     </Setter.Value>
   </Setter>
</Style>

然后我用它来定义图表的调色板。

<datavis:ResourceDictionaryCollection x:Key="ChartPallete">
  <!-- blue -->
  <ResourceDictionary>
     <Style x:Key="DataPointStyle" TargetType="charting:PieDataPoint" BasedOn="{StaticResource PieDataPointStyle}">
        <Setter Property="Background" Value="#007d9d"/>
     </Style>
  </ResourceDictionary>
  <!-- green -->
  <ResourceDictionary>
     <Style x:Key="DataPointStyle" TargetType="charting:PieDataPoint" BasedOn="{StaticResource PieDataPointStyle}">
        <Setter Property="Background" Value="#8fcd3e"/>
     </Style>
  </ResourceDictionary>
  <!-- more resource dictionaries to a total of 15 -->
<datavis:ResourceDictionaryCollection x:Key="ChartPalette">

这个调色板我设置为PieSeries。

var series = new PieSeries();
series.Palette = Resources["ChartPalette"] as ResourceDictionaryCollection;

调色板中的颜色正确用于切片，工具提示正确显示，但是当我将鼠标悬停或单击数据点（切片）时，视觉状态不会改变。没有执行任何情节提要。

任何想法我做错了什么？

注意（对于精明的读者）：除了工具提示之外，我还将 Grid（Root 元素）的不透明度更改为 1，因为由于视觉状态不会更改设置Opacity 到 1 不会执行，切片将完全不透明。

Answer 1

这是Toolkit v3.5的一些奇怪且未知的bug，在正式版中仍然存在。

但是您可以下载用于 WPF4 的 Toolkit Charts 的开发人员版本，这里是 the blog post 和 the direct link to the zip-archive (\Binaries\WPF4\)。如果该链接将来停止工作，我可以将此文件上传到其他地方。

那么您的示例将起作用。而且图表系列应该有IsSelectionEnabled="True"，但我想你已经这样做了。

Answer 2

我有同样的问题，但以不同的方式解决。 VisualStateManager 在两个程序集中定义：一个来自 .NET Framework，另一个来自 WPF 工具包。实际上，在覆盖数据点样式时通常会出现此警告。

解决方案是使用 WPF 工具包中的 VisualStateManager。为此，将此命名空间导入为 xmlns：

xmlns:vsm="clr-namespace:System.Windows;assembly=WPFToolkit"

然后，在定义数据点样式时引用这个命名空间：

<Style x:Key="CustomPieDataPointStyle"
           BasedOn="{StaticResource {x:Type chartingToolkit:PieDataPoint}}"
           TargetType="chartingToolkit:PieDataPoint">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="chartingToolkit:PieDataPoint">
                    <Grid x:Name="Root" Opacity="0">
                        <vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="0:0:0.1" />
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Normal" />
                                <vsm:VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="MouseOverHighlight" Storyboard.TargetProperty="Opacity" To="0.6" Duration="0" />
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>

这对我有用。