How do I change the colors of the WinRT XAML Toolkit chart controls palettes?
How can I change the colors of the chart controls palettes in WinRT XAML Toolkit chart controls?
For example, I want to change the colors of the slices of a pie chart.
+3
Mina Samy
source
to share
1 answer
If you search for "Palette" in the toolkit source, you will see how the default style of a Chart control has a property Palette
that is a collection ResourceDictionary
. You can apply it in a similar way in your application either as a diagram Style
or directly as its property, for example
<charting:Chart
x:Name="PieChartWithCustomPalette"
Title="Pie Chart with Custom Palette"
Margin="70,0">
<charting:Chart.Palette>
<charting:ResourceDictionaryCollection>
<!-- Blue -->
<ResourceDictionary>
<SolidColorBrush
x:Key="Background"
Color="#4586d8" />
<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>
<!-- Red -->
<ResourceDictionary>
<SolidColorBrush
x:Key="Background"
Color="#dc443f" />
<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>
</charting:ResourceDictionaryCollection>
</charting:Chart.Palette>
<charting:Chart.Series>
<Series:PieSeries
Title="Population"
ItemsSource="{Binding Items}"
IndependentValueBinding="{Binding Name}"
DependentValueBinding="{Binding Value}"
IsSelectionEnabled="True" />
</charting:Chart.Series>
</charting:Chart>
I am adding this to the sample project for future reference.

+7
Filip skakun
source
to share