Geek Answers Handbook

Color Picker in the Silverlight Toolkit

I work with the Silverlight 4 toolkit and use the Charting control, in particular the Line Series. I also use one of the Microsoft Silverlight themes that comes with some default chart style.

I know that in ToolkitStyles.xaml there is a whole set of color brushes that are used by charting tools - ChartBrush1, ChartBrush2, etc. etc. etc. I do not understand how they are used by the diagram itself.

The reason I'm asking about this is because I am trying to change the DataPointStyle for LineSeries - I successfully pulled out a copy of the data point style in Blend and made the changes that I wanted to make the data point smaller. But as soon as I do this, all line series on the chart have the same color (orange) and ignore ChartBrush resources (see above for more details).

What makes you choose the colors of the series? How does this happen? Why do I lose it if I take a copy of the template?

Thanks!

+3
silverlight silverlight-toolkit mschart
source share
1 answer

The toolkit Chart element has the Palette property, which is a resource style dictionary.

The default chart style can be found in "Controls.DataVisualization.Toolkit \ Charting \ Chart \ Chart.xaml".

Here you can see that Palette is a ResourceDictionaryCollection , and each ResourceDictionary in the collection defines a DataPointStyle . Each DataPointStyle sets the Background property differently, and so each line in the chart becomes a different color.

This makes it clear why the rows in the linear row that have a DataPointStyle explicitly specified in xaml will always have the same color — by default, the DataPointStyle that defines the color has been replaced.

The solution to this is to change the palette used by the chart. Here I created a basic style that sets the desired DataPointStyle properties, and then for each 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>

You simply indicate the palette in the diagram:

 <toolkit:Chart Palette="{StaticResource ChartPaletteWithNoDataPoints}"> ... </toolkit:Chart>
+3
source share

More articles:


All Articles