问题
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:
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>
来源:https://stackoverflow.com/questions/9191711/colour-selection-of-silverlight-toolkit-chart-line-series