You are reading a MIX Online Opinion. In which we speak our minds. Hans Hugli Meet Hans Arrow

Lab Notes

7Comment Retweet

Silverlight Toolkit Charting Controls

Mar 1, 2010 In Development By Hans Hugli

Recently, my team needed some basic charting controls for a project we were working on, so I investigated the Silverlight Toolkit charting controls

The Problem with Charting Control Styling

Recently, my team needed some basic charting controls for a project we were working on, so I investigated the Silverlight Toolkit charting controls available on CodePlex. We quickly discovered that the Charting control styling was cumbersome in Expression Blend. I ran into the following issues:

  • The Toolkit runtime DLLs don’t support editing styling templates
  • The Themes approach that the Silverlight Toolkit employs doesn’t have design time support

If you’re looking to use the Silverlight Toolkit Charting controls, here are a few options for working around these issues.

Getting Ramped Up

I was pointed to a good blog from December 2008 that describes how to style the charting controls. The blog is written well, but dated—I’ll clarify any inaccuracies below.

I installed the Silverlight 3 Toolkit with the installer located on the home page of the CodePlex site. I then fired up Blend 3, created a new Silverlight Web project and added references to the Silverlight toolkit binaries: System.Windows.Controls.Datavisualization.Toolkit.dll and System.Windows.Controls.Toolkit.dll. Then I opened up the Assets panel by clicking the chevron on the left hand menu and chose the Chart control by clicking on it, as shown here:

Assets Panel

Once I clicked the Chart control, I then created the control on the designer surface by dragging an area on it. It created a "Column" Bar Chart that showed pre-populated data.

I wanted to create a Pie chart, so I deleted the ColumnSeries node in the “Objects and Timeline” view by selecting it and pressing delete. This left me with an empty chart. I added a PieSeries by dragging one from the Assets panel into the chart control on the design surface; nothing changed visually since the bindings to the data source have not been defined as they were in the default ColumnSeries. I switched to the XAML view in the design window and added bindings to the data source. In order for the PieSeries element to bind to the PointCollection that was created when we created the chart control, I needed to add the following attributes: IndependentValuePath="X" DependentValuePath="Y" ItemsSource="{Binding}"

This is how the XAML fragment for the chart control appears:

<charting:Chart Title="Chart Title">

	<charting:Chart.DataContext>

		<PointCollection>

			<Point>1,10</Point>

			<Point>2,20</Point>

			<Point>3,30</Point>

			<Point>4,40</Point>

		</PointCollection>

	</charting:Chart.DataContext>

	<charting:PieSeries Margin="0" IndependentValuePath="X"
		DependentValuePath="Y" ItemsSource="{Binding}"/>

</charting:Chart>

The chart control can be bound to any data source. In this sample, the PointCollection data is supplied so that the designer will show some basic data on the design surface.

Blocking Issue

The tutorial I was following assumed that the designer had the Toolkit project’s source code in his or her project, rather than just a reference to the runtime binaries. That is to say, if you simply install the Silverlight Toolkit with the MSI file, adding the necessary binary references to your project will not allow the designer to modify the chart styles.

Here’s an image (circled in red) that shows that editing a copy of a template of the current selected item is unavailable.

Edit a Copy is disabled

The Workaround

At the time of this writing I still don’t know why the designer behaves this way with runtime binaries, but the workaround is to have the design solution also contain the source code for the Toolkit charting dependencies. You can download the entire Toolkit source code from the homepage of the CodePlex Silverlight Toolkit project by clicking on the download button, but you don’t need to add all projects to your solution to accomplish the goal.

Begin by deleting the existing references to the Toolkit runtime assemblies. Then add the following projects to your solution: Controls.Data.Toolkit, Controls.DataVisualization.Toolkit, Controls.Input.Toolkit, Controls.Layout.Toolkit, Controls.Theming.Toolkit and Controls.Toolkit. Lastly, add references to all these projects to the project that contains the page you want to create the chart in. Once you’ve added the references, the “Template Editing” option becomes enabled. From there you can modify the templates in the designer. The design surface will update visually as modifications are made.

Now it’s also possible to modify the DataPointStyle templates and the LegendItemStyle templates, which allow fine-grained control over how the data points and legend appear.

Erratum to Pete’s Blog Post

Pete’s blog post makes reference to a type: StylePalette. However, the correct type is Palette. The type’s name was changed after the December 9th, 2008 release of the Toolkit. At the time of this writing, the version from November 2009 is available.

Additionally, the path to the namespace reference in the XAML has changed from:

xmlns:datavis="clr-namespace:Microsoft.Windows.Controls.DataVisualization;
	assembly=Microsoft.Windows.Controls.DataVisualization"

to:

xmlns:datavis="clr-namespace:System.Windows.Controls.DataVisualization;
	assembly=System.Windows.Controls.DataVisualization.Toolkit"

Themes

In theory, the themes support is very nice, since it’s very easy swap out the themes. However, you can’t author the theme ResourceDictionaries in Blend, since Blend doesn’t allow editing the XAML for a ResourceDictionary directly. As a result, you’ll find yourself jumping into the styling for a chart and manually moving it to a ResourceDictionary. Not the best designer experience.

Summing Up

The Silverlight Toolkit Charting controls work well out of the box, but if you are a designer and would like to restyle them, it will take a bit of work. Here is a link to much more useful information about the Silverlight Toolkit. A developer will have an easier time modifying the styling, but developers are not designers and generally can only take the design so far. Be aware that if you decide to use these charting controls, they aren’t particularly Blend-friendly. Perhaps this will change in the future.

Do you have some designer-friendly charting controls that you can recommend? Silverlight-based or not? Let us know. Leave a comment or if you tweet, follow us on Twitter to learn about new content, opinions and articles.

Follow the Conversation

7 comments so far. You should leave one, too.

Rafael Z Rafael Z said on Nov 17, 2010

Hello,
I was gald to find some real facts on this topic at last. I''ve been searching the web for some information about applying Silverlight Toolkit charting controls, but neither of the sources ( I tried in vain some shared info sources like http://filecraft.com/ ) was giving enough details about the issue with design and styling templates.

Anna Anna said on Dec 6, 2010

Is there any effort to centralize some documentation? Right now the samples are coded in an elegant way that makes them complex and detailed and therefore difficult to learn from when you''re first starting out. The best source of explanatory text seems to be random blog posts by team members (e.g. JustinJosefAngel on ViewBox or Jeff Wilcox on AutoCompleteBox) or ambitious independents that figure out how stuff works and write about it. It would be awesome to have some basic explanation for each control included in the documentation. I think this would http://paraorkut9.org the learning curve and drive adoption. Right now it seems harder than it needs to be. To be more concrete: right now it is difficult to find basic explanatory text that says things like "there''s just one chart class and it contains a ''series'' that determines the kind of chart you get" or "TreeView contains a collection of TreeViewItems in its Items collection, each TreeViewItem has a Header and its own Items collection for its nested elements" or "Charts don''t like int data, use double". Thanks!

Glenn said on Feb 6, 2011

Speak your The best source of explanatory text seems to be random blog posts by team members (e.g. JustinJosefAngel on ViewBox or Jeff Wilcox on AutoCompleteBox, http://www.mediafilelinks.com ) or ambitious independents that figure out how stuff works and write about it. It would be awesome to have some basic explanation for each control included in the documentation.

Blake Blake said on Feb 7, 2011

I''m not sure if I comprehend this or not. I''m just starting out, and I''m not sure how to enter these texts into my coding. Is there a specific place to put them? If this isn''t the proper place to ask this question, then is there a contact center I can get ahold of? Something like (http://www.inin.com/ProductSolutions/Pages/Contact-Center.aspx) would be helpful for this type of situation.

Martin Martin said on Feb 16, 2011

Is there any work in order to centralize some paperwork? Right now the samples tend to be coded within an elegant method in which means they are complex and detailed and for that reason difficult to study from whenever you’re starting out. The very best supply of explanatory textual content seems to be random blogs by associates (at the.g. JustinJosefAngel upon ViewBox or Jeff Wilcox upon AutoCompleteBox) or even ambitious independents which work out how stuff functions and write about it. It would be awesome to have some basic description for every manage included in the documentation. I think this would http://backpagestuff.com/atlanta the learning curve as well as drive ownership. Right now it appears harder compared to it needs to end up being. To be more concrete: at this time it is not easy to find basic instructive textual content saying such things as “there’s just one graph class and it contains a ‘series’ which determines the type of chart a person get” or “TreeView contains a collection of TreeViewItems in the Products collection, each TreeViewItem includes a Header and it is personal Products collection because of its nested elements” or even “Charts don’t like int information, use double”. Thanks!

web do corpo web do corpo said on Feb 17, 2011

yea, or ambitious independents that figure out how stuff works and write about it. It would be awesome to have some basic explanation for each control included in the documentation.

Lancel Bags said on May 31, 2012

Positive glad that I navigated in your web page by accident. I'll be subscribing to your feed in order that I can get the latest updates. Appreciate all of the details right here