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