Silverlight 4.0: Chart Toolkit - Palette's are not working - silverlight-4.0

Question

I am trying to customized my tooltip - PieDataPoint, however, palette's are not working anymore. Is there anything that I've missed out?
It seems that when I add the below to PieDataPoint, the chart becomes red.
<Setter Property="Background" Value="Red"/>
Thanks!
<charting:PieSeries
ItemsSource="{Binding}"
DependentValueBinding="{Binding Length}"
IndependentValueBinding="{Binding}">
<charting:PieSeries.DataPointStyle>
<Style TargetType="charting:PieDataPoint">
<Setter Property="BorderThickness" Value="1"/>
<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="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>
<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="Test"/>
<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>
</charting:PieSeries.DataPointStyle>
<charting:PieSeries.Palette>
<datavis:ResourceDictionaryCollection>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
<GradientStop Color="#FFB8C0AC"/>
<GradientStop Color="#FF5F7143" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}" />
<Setter Property="StrokeThickness" Value="2" />
<Setter Property="StrokeMiterLimit" Value="1" />
<Setter Property="Fill" Value="{StaticResource Background}" />
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
<GradientStop Color="#FFFDE79C"/>
<GradientStop Color="#FFF6BC0C" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}" />
<Setter Property="StrokeThickness" Value="2" />
<Setter Property="StrokeMiterLimit" Value="1" />
<Setter Property="Fill" Value="{StaticResource Background}" />
</Style>
</ResourceDictionary>
</datavis:ResourceDictionaryCollection>
</charting:PieSeries.Palette>
</charting:PieSeries>

Answer 1

Fortunately, I solved this by putting some code in codebehind. However, my another question now is how to apply this one in MVVM?
In my XAML here's my chart:
<charting:Chart x:Name="tempChart"
Title="Simple Palette Change"
Grid.Column="0"
Grid.Row="1">
<charting:PieSeries
ItemsSource="{Binding}"
DependentValueBinding="{Binding Length}"
IndependentValueBinding="{Binding}">
</charting:PieSeries>
</charting:Chart>
In my XAML resources here's my datapoint template:
<ControlTemplate x:Key="pi" TargetType="charting:PieDataPoint">
<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>
<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>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{TemplateBinding IndependentValue}" />
<TextBlock Text=" - "/>
<TextBlock Text="{TemplateBinding FormattedDependentValue}"/>
</StackPanel>
</ContentControl>
<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>
In my code behind:
ResourceDictionaryCollection palette = new ResourceDictionaryCollection();
Random rom = new Random();
for (int i = 0; i < 256; i++)
{
byte r = Convert.ToByte(rom.Next(256));
byte g = Convert.ToByte(rom.Next(256));
byte b = Convert.ToByte(rom.Next(256));
Style style = new Style(typeof(Control));
style.Setters.Add(new Setter(BackgroundProperty, new SolidColorBrush(Color.FromArgb(255, r, g, b))));
style.Setters.Add(new Setter(TemplateProperty, this.Resources["pi"]));
ResourceDictionary dictionary = new ResourceDictionary();
dictionary.Add("DataPointStyle", style);
palette.Add(dictionary);
}
tempChart.Palette = palette;
Here's the output of my custom PieDataPoint with Palette: