Problems with the visual states when styling the PieDataPoint in WPFToolkit Chart

Question

I am trying to style the pie data points in the WPFToolkit chart. Basically I want to change the tooltip. It works, but the visual states of the data point do not change.

I have copied the style from the sources and modified the tooltip only to add the FormattedIndependentValue. The style looks like this:

<!--  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>

I then use this to define a palette for the chart.

<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">

This palette I set to the PieSeries.

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

The colors from the palette are used correctly for the slices, the tooltip shows correctly, but the visual states do not change when I hover the mouse or click on the data points (slices). None of the storyboards are executed.

Any ideas what I'm doing wrong?

Note (for the astute reader): apart from the tooltip I also changed the opacity of the Grid (the Root element) to 1, because since the visual states do not change the storyboard that sets the Opacity to 1 is not executed and the slices would just be completely opaque.

Answer 1

It is some strange and unknown bug of Toolkit v3.5 which remained in the official version.

But you can download the developer release of Toolkit Charts for WPF4, here is the blog post and the direct link to the zip-archive (\Binaries\WPF4\). If the link stop working in the future, I can upload this file somewhere else.

Then your example will work. And also the chart series should have IsSelectionEnabled="True", but I suppose you have already done this.

Answer 2

I had same problem, but solved in diferent way. VisualStateManager is defined in two assemblies: one from .NET Framework, another from WPF toolkit. Indeed, is usual this warning when overwritting styles of datapoint.

Solution is to use VisualStateManager from WPF toolkit. To do this, import this namespace as xmlns:

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

Then, do reference to this namespace when defining datapoint style:

<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>

This worked for me.