How to style the WPF Toolkit Chart

Question

I am using the WPF Toolkit Chart with PieChart in my WPF application.

I want to change the default white background to transparent in PieChart Picture ..

How to give style to achieve this

Answer 1

If you look at the visual tree, you will find that you must change the background property of the grid and border to change the background to transparent (the elements are highlighted in yellow in the figure below).

To do this, you can change the color in the Loaded event. First you should find an EdgePanel named ChartArea , after which you should change the grid color and border. If you want to set the transparency of the Legend background, you must find the Legend element and set the appropriate properties.

 <DVC:Chart Canvas.Top="80" Canvas.Left="10" Name="mcChart" Width="400" Height="250" Background="Orange" Loaded="mcChart_Loaded"> <DVC:Chart.Series> <DVC:PieSeries Title="Experience" ItemsSource="{StaticResource FruitCollection}" IndependentValueBinding="{Binding Path=Name}" DependentValueBinding="{Binding Path=Share}"> </DVC:PieSeries> </DVC:Chart.Series> </DVC:Chart> 

Code for:

 private void mcChart_Loaded(object sender, RoutedEventArgs e) { EdgePanel ep = VisualHelper.FindChild<EdgePanel>(sender as Chart, "ChartArea"); if (ep != null) { var grid = ep.Children.OfType<Grid>().FirstOrDefault(); if (grid != null) { grid.Background = new SolidColorBrush(Colors.Transparent); } var border = ep.Children.OfType<Border>().FirstOrDefault(); if (border != null) { border.BorderBrush = new SolidColorBrush(Colors.Transparent); } } Legend legend = VisualHelper.FindChild<Legend>(sender as Chart, "Legend"); if (legend != null) { legend.Background = new SolidColorBrush(Colors.Transparent); legend.BorderBrush = new SolidColorBrush(Colors.Transparent); } } 

Helper class to search for a child in this case EdgePanel :

 class VisualHelper { public static T FindChild<T>(DependencyObject parent, string childName) where T : DependencyObject { if (parent == null) return null; T foundChild = null; int childrenCount = VisualTreeHelper.GetChildrenCount(parent); for (int i = 0; i < childrenCount; i++) { var child = VisualTreeHelper.GetChild(parent, i); T childType = child as T; if (childType == null) { foundChild = FindChild<T>(child, childName); if (foundChild != null) break; } else if (!string.IsNullOrEmpty(childName)) { var frameworkElement = child as FrameworkElement; if (frameworkElement != null && frameworkElement.Name == childName) { foundChild = (T)child; break; } } else { foundChild = (T)child; break; } } return foundChild; } } 

Answer 2

WPF was designed so you can manage styles through XAML; not a code. Creating a plot area and legend transparent in a pie chart is also possible thanks to the style. Unfortunately, the border around the area of ​​the parcel cannot be controlled using the property, and instead you need to change the entire control pattern. In the end, using styles is probably as tedious as writing code that modifies the visual tree, but for me, at least, it still looks like a cleaner approach.

 <chartingToolkit:Chart> <chartingToolkit:Chart.PlotAreaStyle> <Style TargetType="Grid"> <Setter Property="Background" Value="Transparent"/> </Style> </chartingToolkit:Chart.PlotAreaStyle> <chartingToolkit:Chart.LegendStyle> <Style TargetType="visualizationToolkit:Legend"> <Setter Property="Margin" Value="15,0"/> <Setter Property="VerticalAlignment" Value="Center"/> <Setter Property="BorderBrush" Value="Transparent"/> <Setter Property="Background" Value="Transparent"/> </Style> </chartingToolkit:Chart.LegendStyle> <chartingToolkit:Chart.Style> <Style TargetType="chartingToolkit:Chart"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="chartingToolkit:Chart"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <visualizationToolkit:Title Content="{TemplateBinding Title}" Style="{TemplateBinding TitleStyle}" /> <!-- Use a nested Grid to avoid possible clipping behavior resulting from ColumnSpan+Width=Auto --> <Grid Grid.Row="1" Margin="0,15,0,15"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <visualizationToolkit:Legend x:Name="Legend" Title="{TemplateBinding LegendTitle}" Style="{TemplateBinding LegendStyle}" Grid.Column="1" /> <chartingprimitives:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}"> <Grid Canvas.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" /> <!--<Border Canvas.ZIndex="10" BorderBrush="#FF919191" BorderThickness="1" />--> </chartingprimitives:EdgePanel> </Grid> </Grid> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> </chartingToolkit:Chart.Style> <chartingToolkit:PieSeries ... /> </chartingToolkit:Chart> 

Changed the values ​​of PlotAreaStyle and LegendStyle to make them transparent. The border around the area of ​​the site is removed by changing the ControlTemplate chart and simply commenting on the offensive Border element.