Windows Phone 7 RTM charting using the Silverlight Control Toolkit
Abstract: This article will show you the steps to surface charting data visualizations using the Silverlight Control Toolkit on the Windows Phone 7. I will also cover the reasoning behind these steps and the gotchas/errors you may encounter. Source code is included with a sample Windows Phone 7 project.
Windows Phone 7 RTM tools have been released a few weeks ago. Many developers are starting to develop their new apps and getting them ready for the Windows Marketplace. If you are a seasoned Silverlight develper, you probably want to leverage existing Silverlight frameworks or toolkits (i.e., MVVM, networking, charting, custom controls etc.) in your Windows Phone 7 application. If you have looked for a charting solution, you probably came across several articles that "claim" to show you how to easily surface charting on the Windows Phone 7. Most examples are out of date (because the Windows Phone 7 bits changed so much) and some of them simply have misinformation (i.e., I read one article and the author doesn't even know what assembly he is using :))
As you may know the Windows Phone 7 RTM includes a Silverlight runtime. Scott Guthrie announced during the MIX 2010 conference that "this isn't Silverlight Lite.....this is Silverlight" and I wrote an article that shows this is not the case. The Windows Phone 7 RTM runtime is based off of Silverlight 3 RTM and includes some additional things from Silverlight 4 and some custom inner workings for the Windows Phone 7 (i.e. UI thread and Composite thread). Basically, what this means is that most Silverlight 2 and Silverlight 3 code "should just compile and work" on the Windows Phone 7. If you have written Silverlight 4 code that takes advantage of new features it will simply not work in the Windows Phone 7 Silverlight runtimes (although this will probably change and both Silverlight runtimes will converge in functionality).
There is a lot of misinformation out there (even from Microsoft) that the Silverlight 4 Control Toolkit is compatible with the Windows Phone 7 and it's not.
Steps to Get Silverlight Control Toolkit Data Visualizations to Work in Windows Phone 7
- Download the November 2009 Silverlight 3 Control Toolkit (http://silverlight.codeplex.com/releases/view/36060#DownloadId=93512)
- The April 2010 Silverlight Control Toolkit dropped support for Silverlight 3. The November 2009 release is the latest stable release for Silverlight 3.
- Create a new Windows Phone 7 project
- Add a reference to the System.Windows.Controls.DataVisualization.Toolkit.dll
- Ensure the DLL comes from the Silverlight 3 toolkit (November 2009) NOT the Silverlight 4 toolkit
- The default location is: C:\Program Files (x86)\Microsoft SDKs\Silverlight\v3.0\Toolkit\Nov09\Bin\System.Windows.Controls.DataVisualization.Toolkit.dll
- Add a reference to the System.Windows.Controls.dll
- Ensure the DLL comes from the Silverlight 3 client SDK
- The default location is: C:\Program Files (x86)\Microsoft SDKs\Silverlight\v3.0\Libraries\Client\System.Windows.Control.dll
- Drag over chart and series from Asset library; start using the chart data visualizations normally
- I have tested pie, line and bar charts and all seem to work nicely
In the figure below, you can see the Windows Phone 7 emulator running a Pie Chart data visualization with a slider. I decided to style the Pie Chart, bind it to sample data, double bind one of the elements to a slider to test the rendering engine of the Windows Phone 7. I am happy to say that everything looks like it is working on the Windows Phone 7 as expected. Source code is located here.
What Will Happen If you use the Silverlight 4 Toolkit Assemblies?
In short, you will see everything work great in Blend 4 or Visual Studio designer. However, as soon as you deploy the project to the emulator the project will launch and promptly close throwing an exception of:"Invalid attribute value charting:DisplayAxis for property TargetType". I am guessing there is a Silverlight 4 feature being used (i.e. element binding) that may be causing the error in the Windows Phone 7. If you receive this error, then you need to reference the Silverlight 3 version of the System.Windows.Controls.DataVisualization.Toolkit.dll
What Will Happen If you forget to add the System.Windows.Controls.dll assembly?
The Blend designer and Visual Studio designer will both work. However, if you deploy the project to the Windows Phone 7 it will promptly error out by throwing an exception. The exception is going to be the generic XAML error "AGE_E_PARSER_BAD_TYPE line...". The reason this error happens is that the charting controls need artifacts that are located in that assembly that are missing from the Windows Phone 7 Silverlight controls. Luckily, since the Windows Phone 7 runs Silverlight 3 (plus some enhancements) we can use the Silverlight 3 assemblies. Please note that this will likely change when the Windows Phone 7 and full Silverlight runtimes converge in functionality.
Until Microsoft converges the Silverlight runtime functionality with the appropriate Silverlight Control Toolkits, you will have to be aware of the supported functionality in each version. In order to surface charting data visualizations in the Windows Phone 7, use the November 2009 Silverlight 3 Toolkit and reference the System.Windows.Control.dll from the Silverlight 3 SDK.
Source Code: WindowsPhone7ChartingExample.zip (1.32 mb)