Colour selection of Silverlight Toolkit Chart Line Series

3
votes

I'm working with the Silverlight 4 toolkit and using the Charting control, specifically the Line Series. I'm also using one of the Microsoft Silverlight themes, which comes with some default styling for the Chart.

I know that in the ToolkitStyles.xaml there's a whole host of colour brushes that get used by the charting toolkit - ChartBrush1, ChartBrush2 etc. etc.. What I don't understand is how they get used by the chart itself.

The reason I'm asking this is because I'm trying to change the DataPointStyle for the LineSeries - I've successfully pulled out a copy of the data point style in Blend and made the changes I wanted i.e. make the size of the data point smaller. But as soon as I do this, all the line series in the graph have the same colour (Orange) and ignore the ChartBrush resources (detailed above).

What's driving the colour selection of the line series? How does it happen? Why do I lose it if I take a copy of the template?

Thanks!

1
silverlightsilverlight-toolkitmschart

1 Answers

3
votes

The toolkit Chart control has a property Palette that is a resource dictionary of styles.

You can find the default Chart style in "Controls.DataVisualization.Toolkit\Charting\Chart\Chart.xaml".

In there you can see that Palette is a ResourceDictionaryCollection and each ResourceDictionary in the collection defines a DataPointStyle. EachDataPointStyle sets the Background property differently and this is how each line in the chart becomes a different colour.

From here it is clear to see why lines in a line series that have a DataPointStyle set explicitly in xaml will always have the same colour - the default DataPointStyle that defines the colour has been replaced.

The solution to this is to modify the palette used by the chart. Here I have created a base style that sets the desired DataPointStyle properties and then for every DataPointStyle in the dictionary collection, specify BasedOn="{StaticResource DataPointStyleWithNoPoints}".

<Style x:Key="DataPointStyleWithNoPoints" TargetType="Control">
    <Setter Property="Width" Value="1" />
    <Setter Property="Height" Value="1" />
</Style>

<datavis:ResourceDictionaryCollection x:Key="ChartPaletteWithNoDataPoints">
    <!-- Blue -->
    <ResourceDictionary>
        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
            <GradientStop Color="#FFB9D6F7" />
            <GradientStop Color="#FF284B70" Offset="1" />
        </RadialGradientBrush>
        <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}">
            <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>
    <!-- Red -->
    <ResourceDictionary>
        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
            <GradientStop Color="#FFFBB7B5" />
            <GradientStop Color="#FF702828" Offset="1" />
        </RadialGradientBrush>
        <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}">
            <Setter Property="Width" Value="1" />
            <Setter Property="Height" Value="1" />
        </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>
    <!-- Light Green -->
    <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" BasedOn="{StaticResource DataPointStyleWithNoPoints}">
            <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>
    <!-- Yellow -->
    <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" BasedOn="{StaticResource DataPointStyleWithNoPoints}">
            <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>
    <!-- Indigo -->
    <ResourceDictionary>
        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
            <GradientStop Color="#FFA9A3BD" />
            <GradientStop Color="#FF382C6C" Offset="1" />
        </RadialGradientBrush>
        <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}">
            <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>
    <!-- Magenta -->
    <ResourceDictionary>
        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
            <GradientStop Color="#FFB1A1B1" />
            <GradientStop Color="#FF50224F" Offset="1" />
        </RadialGradientBrush>
        <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}">
            <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>
    <!-- Dark Green -->
    <ResourceDictionary>
        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
            <GradientStop Color="#FF9DC2B3" />
            <GradientStop Color="#FF1D7554" Offset="1" />
        </RadialGradientBrush>
        <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}">
            <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>
    <!-- Gray Shade -->
    <ResourceDictionary>
        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
            <GradientStop Color="#FFB5B5B5" />
            <GradientStop Color="#FF4C4C4C" Offset="1" />
        </RadialGradientBrush>
        <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}">
            <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>
    <!-- Blue -->
    <ResourceDictionary>
        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
            <GradientStop Color="#FF98C1DC" />
            <GradientStop Color="#FF0271AE" Offset="1" />
        </RadialGradientBrush>
        <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}">
            <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>
    <!-- Brown -->
    <ResourceDictionary>
        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
            <GradientStop Color="#FFC1C0AE" />
            <GradientStop Color="#FF706E41" Offset="1" />
        </RadialGradientBrush>
        <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}">
            <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>
    <!-- Cyan -->
    <ResourceDictionary>
        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
            <GradientStop Color="#FFADBDC0" />
            <GradientStop Color="#FF446A73" Offset="1" />
        </RadialGradientBrush>
        <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}">
            <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>
    <!-- Special Blue -->
    <ResourceDictionary>
        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
            <GradientStop Color="#FF2F8CE2" />
            <GradientStop Color="#FF0C3E69" Offset="1" />
        </RadialGradientBrush>
        <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}">
            <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>
    <!-- Gray Shade 2 -->
    <ResourceDictionary>
        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
            <GradientStop Color="#FFDCDCDC" />
            <GradientStop Color="#FF757575" Offset="1" />
        </RadialGradientBrush>
        <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}">
            <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>
    <!-- Gray Shade 3 -->
    <ResourceDictionary>
        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
            <GradientStop Color="#FFF4F4F4" />
            <GradientStop Color="#FFB7B7B7" Offset="1" />
        </RadialGradientBrush>
        <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}">
            <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>
    <!-- Gray Shade 4 -->
    <ResourceDictionary>
        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
            <GradientStop Color="#FFF4F4F4" />
            <GradientStop Color="#FFA3A3A3" Offset="1" />
        </RadialGradientBrush>
        <Style x:Key="DataPointStyle" TargetType="Control" BasedOn="{StaticResource DataPointStyleWithNoPoints}">
            <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>

The you simply specify the palette on the chart:

<toolkit:Chart Palette="{StaticResource ChartPaletteWithNoDataPoints}">
    ...
</toolkit:Chart>