Unable to find resource style error - silverlight

Question

I am having a problem with my stying where an error message is showing saying: Cannot find a Resource with the Name/Key PerformanceBarChartBarTemplate [Line: 454 Position: 35]
My style code is:
<Style x:Key="MainChartStyle" TargetType="toolkit:Chart">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="TitleStyle" Value="{StaticResource ChartTitle}"/>
<Setter Property="Palette">
<Setter.Value>
<datavis:ResourceDictionaryCollection>
<ResourceDictionary>
<Style TargetType="toolkit:BarDataPoint">
<Setter Property="Background"
Value="#FF57007f" />
<Setter Property="BorderBrush"
Value="#FF2e0007" />
<Setter Property="Template"
Value="{StaticResource PerformanceBarChartBarTemplate}" />
</Style>
</ResourceDictionary>
</datavis:ResourceDictionaryCollection>
</Setter.Value>
</Setter>
<Setter Property="LegendStyle">
<Setter.Value>
<Style TargetType="dataVisualizationToolkit:Legend">
<Setter Property="Margin"
Value="15,0,15,0" />
<Setter Property="VerticalAlignment"
Value="Center" />
<Setter Property="BorderBrush"
Value="Transparent" />
<Setter Property="Background"
Value="Transparent" />
</Style>
</Setter.Value>
</Setter>
<Setter Property="ChartAreaStyle">
<Setter.Value>
<Style TargetType="Panel">
<Setter Property="MinWidth" Value="100"/>
<Setter Property="MinHeight" Value="75"/>
</Style>
</Setter.Value>
</Setter>
<Setter Property="PlotAreaStyle">
<Setter.Value>
<Style TargetType="Grid">
<Setter Property="Background"
Value="Transparent">
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:Chart">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<dataVisualizationToolkit:Title Style="{TemplateBinding TitleStyle}"
Content="{TemplateBinding Title}" />
<Grid Margin="0,15,0,15"
Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<dataVisualizationToolkit:Legend x:Name="Legend"
Style="{TemplateBinding LegendStyle}"
Grid.Column="1"/>
<toolkitChartingPrimitives:EdgePanel x:Name="ChartArea"
Style="{TemplateBinding ChartAreaStyle}">
<Grid Style="{TemplateBinding PlotAreaStyle}"
Canvas.ZIndex="-1" />
</toolkitChartingPrimitives:EdgePanel>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And the control which it can't see is:
<ControlTemplate x:Key="PerformanceBarChartBarTemplate"
TargetType="toolkit:BarDataPoint">
<Border BorderThickness="0"
Opacity="0"
x:Name="Root">
<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>
<Grid Margin="0 4 0 4">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Main bar shape -->
<Rectangle Fill="{TemplateBinding Background}"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="{TemplateBinding BorderThickness}"
RadiusX="3"
RadiusY="3"
Grid.Row="0"
Grid.RowSpan="2">
<Rectangle.Effect>
<DropShadowEffect BlurRadius="10"
Direction="0"
Color="#FFFFFFFF"
ShadowDepth="0" />
</Rectangle.Effect>
</Rectangle>
<!-- Diffuse Glow -->
<Rectangle RadiusX="3"
RadiusY="3"
Margin="4"
Grid.Row="0"
Grid.RowSpan="2"
Opacity=".25"
Fill="White"
>
<Rectangle.Effect>
<BlurEffect Radius="8" />
</Rectangle.Effect>
</Rectangle>
<!-- Specular Highlight -->
<Rectangle RadiusX="3"
RadiusY="3"
Margin="2"
Grid.Row="0">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="#99ffffff"
Offset="0" />
<GradientStop Color="#22ffffff"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!--<Border BorderBrush="#ccffffff"
BorderThickness="1">
<Border BorderBrush="#77ffffff"
BorderThickness="1" />
</Border>-->
<Rectangle x:Name="SelectionHighlight"
Fill="Red"
Opacity="0" />
<Rectangle x:Name="MouseOverHighlight"
RadiusX="3"
RadiusY="3"
Fill="White"
Opacity="0" />
</Grid>
<ToolTipService.ToolTip>
<ContentControl Content="{TemplateBinding FormattedDependentValue}" />
</ToolTipService.ToolTip>
</Border>
</ControlTemplate>

Answer 1

I think you just need to move the 'PerformanceBarChartBarTemplate' control template above the style you defined in the resource section.
Edit:
First you need to wrap your template in a style and give it a name
<Style x:Key="BarDataPointStyle" TargetType="toolkit:DataPoint">
<Setter Property="Template" Value="{StaticResource PerformanceBarChartBarTemplate}"/>
</Style>
The reason of doing this is because I noticed I have to have the inner style named 'DataPointStyle' to get it working, and then I use BasedOn to get your template.
Here is how you define the palette.
<toolkit:Chart.Palette>
<toolkit:ResourceDictionaryCollection>
<ResourceDictionary>
<Style x:Key="DataPointStyle" TargetType="toolkit:BarDataPoint" BasedOn="{StaticResource BarDataPointStyle}">
<Setter Property="Background" Value="Yellow" />
<Setter Property="BorderBrush" Value="Black" />
</Style>
</ResourceDictionary>
<ResourceDictionary>
<Style x:Key="DataPointStyle" TargetType="toolkit:BarDataPoint" BasedOn="{StaticResource BarDataPointStyle}">
<Setter Property="Background" Value="Red" />
<Setter Property="BorderBrush" Value="Black" />
</Style>
</ResourceDictionary>
</toolkit:ResourceDictionaryCollection>
</toolkit:Chart.Palette>
I hope this helps.
Solution 2:
Just replace your setter of the Palette with this one. You will notice I added a x:Key to the style, which was what you were missing. I tested it and it works.
<Setter Property="Palette">
<Setter.Value>
<toolkit:ResourceDictionaryCollection>
<ResourceDictionary>
<Style x:Key="DataPointStyle" TargetType="toolkit:BarDataPoint">
<Setter Property="Background"
Value="#FF57007f" />
<Setter Property="BorderBrush"
Value="#FF2e0007" />
<Setter Property="Template"
Value="{StaticResource PerformanceBarChartBarTemplate}" />
</Style>
</ResourceDictionary>
<ResourceDictionary>
<Style x:Key="DataPointStyle" TargetType="toolkit:BarDataPoint">
<Setter Property="Background"
Value="Red" />
<Setter Property="BorderBrush"
Value="Black" />
<Setter Property="Template"
Value="{StaticResource PerformanceBarChartBarTemplate}" />
</Style>
</ResourceDictionary>
</toolkit:ResourceDictionaryCollection>
</Setter.Value>
</Setter>