Working with Themes

With MindFusion.Charting for Silverlight  you can:

• Create custom themes based on the appearance of an existing chart;
• Save a custom theme as an XML file;
• Load a custom theme from its XML file;
• Use a number of predefined themes.

I. Create a custom theme based on the appearance of an existing chart.

1. Style your chart as you want. In our sample we will use a BarChart. We set a background, font settings for the title, brushes for the grid and customize the outline of the chart:

C#

BarChart modelChart = new BarChart()
{
     Background = new SolidColorBrush(Colors.LightGray),
     BorderThickness = new Thickness(5),
     CornerRadius = new CornerRadius(5),
     TitleFontSize = 18,
     TitleFontWeight = FontWeights.Bold,
     TitleFontFamily = new FontFamily("Tahoma"),
     GridFills = new BrushCollection() { new SolidColorBrush(Colors.LightGray),
     new SolidColorBrush(Colors.Gray) },
     GridStrokes = new BrushCollection() { new SolidColorBrush(Colors.Gray)},
     PlotAreaStroke = new SolidColorBrush(Colors.Gray)
};

VB.NET

Dim modelChart As New BarChart() With { _
  Key .Background = New SolidColorBrush(Colors.LightGray), _
  Key .BorderThickness = New Thickness(5), _
  Key .CornerRadius = New CornerRadius(5), _
  Key .TitleFontSize = 18, _
  Key .TitleFontWeight = FontWeights.Bold, _
  Key .TitleFontFamily = New FontFamily("Tahoma"), _
  Key .GridFills = New BrushCollection() From { _
   New SolidColorBrush(Colors.LightGray), _
   New SolidColorBrush(Colors.Gray) _
  }, _
  Key .GridStrokes = New BrushCollection() From { _
   New SolidColorBrush(Colors.Gray) _
  }, _
  Key .PlotAreaStroke = New SolidColorBrush(Colors.Gray) _
}

2. Next, we set the colors for the bars in a BarSeries. We add the series to the chart:

C#

BarSeries series = new BarSeries()
{
     XData = new DoubleCollection() { 1, 2, 3, 4 },
     YData = new DoubleCollection() { 23, 13, 34, 51 },
     Fills = new BrushCollection(){new SolidColorBrush(Colors.Green)},
     Strokes = new BrushCollection() { new SolidColorBrush(Colors.Purple) }
};modelChart.Series.Add(series);

VB.NET

Dim series As New BarSeries() With { _
 Key .XData = New DoubleCollection() From { 1, 2, 3, 4 }, _
 Key .YData = New DoubleCollection() From { 23, 13, 34, 51 }, _
 Key .Fills = New BrushCollection() From { _
  New SolidColorBrush(Colors.Green) _
 }, _
 Key .Strokes = New BrushCollection() From { _
  New SolidColorBrush(Colors.Purple) _
 } _
}modelChart.Series.Add(series)

3. We finally create a new ChartTheme based on the model and we apply this theme to the chart we already have - barChart1.

C#

//create the theme
ChartTheme theme = new ChartTheme(modelChart);//apply the theme
theme.Apply(barChart1);

VB.NET

'create the theme
Dim theme As New ChartTheme(modelChart)'apply the theme
theme.Apply(barChart1)

II. Save a custom theme as a XML file.

In the installation folder of the component you will find the ThemeEditor tool. Use it to create, edit, load and save ChartTheme-s on your computer. There is a shortcut to the ThemeEditor from the MindFusion.Charting for Silverlight items group in your start menu.

III. Load a theme from a XML file.

Important!
Add the XML file to your Silverlight project and set it its BuildAction to "Resource".

Use the following code to load and apply the ChartTheme. Here we load the theme Green.xml and apply it to out chart called barChart1:

C#

StreamResourceInfo stream = Application.GetResourceStream(
     new Uri("SilverlightApplication1;component/Resources/Green.xml", UriKind.Relative));ChartTheme theme = new ChartTheme();
theme.LoadFromXml(stream.Stream);
theme.Apply(barChart1);

VB.NET

Dim stream As StreamResourceInfo = Application.GetResourceStream(New Uri("SilverlightApplication1;component/Resources/Green.xml", UriKind.Relative))Dim theme As New ChartTheme()
theme.LoadFromXml(stream.Stream)
theme.Apply(barChart1)

IV. Predefined themes.

MindFusion.Charting for Silverlight offers a set of predefined themes, which are found in the setup directory. You can load them the way you would load any XML ChartTheme - see point III.

The predefined Green theme applied on a bar chart.