Minimum Requirements:
- Visual Studio 2010 Express for Windows Phone
- Windows Phone Developer Tools CTP - April Refresh
- Silverlight 3 SDK
- Silverlight 4 Toolkit April 2010
- David Anson’s Developer Release bits for Silverlight 4 Toolkit charting
- PowerShell script for the signed assemblies bug in the Windows Phone Developer Tools CTP - April Refresh
I’m on my first big project at my new post, Vertigo, as a Creative Developer. Of course, it is a cutting edge project and it is going to be awesome. And I can’t say anything more about the project. But I can take a moment and hopefully help some of you out there writing or thinking about writing a Windows Phone 7 application. Specifically, using the Silverlight Toolkit for Charting.
You’ll need the basic software to be able to write Windows Phone 7 applications. While I won’t go into great detail about all of that, I will try to detail some of the steps for getting charts to work on your phone app. You can read more about getting started on WP7 phone development here. That covers the requirements 1 and 2 listed above.
Next you’ll need to make sure you have the Silverlight 3 SDK installed. Get that here. As David Anson explains here, the Silverlight 3 SDK contains the correct version for the base class of the chart Legend class. Also, he reminds us that the Windows Phone 7 is based on Silverlight 3 with several Silverlight 4 feature sets added to it.
You will want to get the latest version of the Silverlight 4 Toolkit from CodePlex. Go to the downloads page and get the recommended download (Silverlight_4_Toolkit_April_2010.msi). This is mainly for using the samples and source code as a guide.
Definitely read David Anson’s blog post (above) about the Silverlight 4 Toolkit Developer Release that he maintains. He’s got the correct version of one assembly you will need, System.Windows.Controls.DataVisualization.Toolkit.dll. He explains that there is a bug that will be fixed in future versions of the Windows Phone 7 developer bits. But for now he has a workaround. You can download the sample code from his blog.
The last thing you’ll need is a PowerShell script that helps you work around a known bug in the Windows Phone Developer Tools CTP - April Refresh. You can read the article for more detailed instructions here.
Ok, open up Visual Studio 2010 and create a new Windows Phone Application project.
You’ll see a nice design surface for the phone on the left and your XAML editor on the right for the MainPage.xaml. You can leave that open for the moment while you get copies of the required files. Open up the binaries folder of the Silverlight 3 SDK. That should be in a path similar to C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Libraries\Client. Copy the assembly Silverlight.Windows.Controls.dll into the root of the new project you created in Visual Studio. Next, open up the demo source code from David Anson’s blog (here) and copy the assembly System.Windows.Controls.DataVisualization.Toolkit.dll into the root of the project. Do not use the version of that assembly found in the Silverlight 4 Toolkit April 2010 release. David Anson’s version has a bug fix in it which is critical to using the charts on the phone.
Ok, now here is the fun part. There is a known bug in the Windows Phone 7 Developer Tools CTP – April Refresh. The issue is that any assemblies signed with a certification other than Windows Phone will fail to load. This includes most Silverlight SDKs. Again, you can read more about that here. You’ll need to run the PowerShell script for the two files you just copied into your project before you reference them in the project. One trick about this script file if you are running Windows 7 (and I suspect Vista too) is that you’ll need to go into the properties window of the file (right-click/Properties) and click the “Unblock” button. Then click OK to close the properties window. This will remove the block that the operating system puts on the script file. Tim Heuer also blogged about the PowerShell fix here.
Take a moment to run the PowerShell script for those two assemblies. If you did it right, you’ll see two new assembly files with the prefix “WP7_CTP_Fix_”. If not, read the articles listed above for help on how to get that accomplished.
Ok, now we are almost in business! Reference the two assemblies in your phone project.
The Silverlight 4 Toolkit comes with sample code. You might want to unzip the source code for the toolkit and the samples. You can also look at sample code here. The one snippet of code that is useful for my post is this bit:
public class ObjectCollection : Collection<object>
{
public ObjectCollection()
{
}
public ObjectCollection(IEnumerable collection)
{
foreach (object obj in collection)
{
Add(obj);
}
}
}
For this example, I created a new class called “ObjectCollection” and dropped in the above code. You’ll have to resolve the usings Collection and IEnumerable with the following:
using System.Collections;
using System.Collections.ObjectModel;
In the sample for the Silverlight 4 Toolkit, the Data Visualization tree node has a few simple graphs. There are more complex examples available. You can get the source xaml for one of the bar charts as follows:
<chartingToolkit:Chart Title="Column (Multiple)" LegendTitle="Legend">
<chartingToolkit:Chart.Series>
<chartingToolkit:ColumnSeries Title="Series A">
<chartingToolkit:ColumnSeries.ItemsSource>
<toolkit:ObjectCollection>
<system:Int32>1</system:Int32>
<system:Int32>3</system:Int32>
<system:Int32>5</system:Int32>
<system:Int32>2</system:Int32>
</toolkit:ObjectCollection>
</chartingToolkit:ColumnSeries.ItemsSource>
</chartingToolkit:ColumnSeries>
<chartingToolkit:ColumnSeries Title="Series B">
<chartingToolkit:ColumnSeries.ItemsSource>
<toolkit:ObjectCollection>
<system:Int32>2</system:Int32>
<system:Int32>4</system:Int32>
<system:Int32>6</system:Int32>
<system:Int32>3</system:Int32>
</toolkit:ObjectCollection>
</chartingToolkit:ColumnSeries.ItemsSource>
</chartingToolkit:ColumnSeries>
<chartingToolkit:ColumnSeries Title="Series C">
<chartingToolkit:ColumnSeries.ItemsSource>
<toolkit:ObjectCollection>
<system:Int32>4</system:Int32>
<system:Int32>3</system:Int32>
<system:Int32>2</system:Int32>
<system:Int32>5</system:Int32>
</toolkit:ObjectCollection>
</chartingToolkit:ColumnSeries.ItemsSource>
</chartingToolkit:ColumnSeries>
</chartingToolkit:Chart.Series>
<chartingToolkit:Chart.Axes>
<chartingToolkit:LinearAxis Orientation="Y" Minimum="0" ShowGridLines="True"/>
</chartingToolkit:Chart.Axes>
</chartingToolkit:Chart>
Note the “chartingToolkit” and “toolkit” namespace references in that xaml. Since you have a local ObjectCollection class, you can change the “toolkit” reference to “local” and add an xmlns statement at the top of the MainPage.xaml. You’ll also need the namespace declaration for “chartingToolkit” and “system”.
Like this:
xmlns:local="clr-namespace:WindowsPhoneApplication1"
xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:system="clr-namespace:System;assembly=mscorlib"
Copy/paste the xaml for the chart into the MainPage.xaml. Find the Grid named “ContentGrid”. You can drop the chart right inside that grid. Go through and rename the “toolkit” references to “local” to match your xmlns statements at the top of the xaml.
You should now be able to see the chart in the designer, and run the application. If you see errors during deployment of the application or when the application actually begins to run, you might want to go back through the steps above again and see if you missed something. Otherwise, that is it!
You can start writing charts for Windows Phone 7. Look at the Silverlight 4 Toolkit samples page for guidance on creating more complex charts.
Special thanks to David Anson for his help and work to make this possible. Check out his latest blog on phone charting here.
Here is the resulting chart on the Windows Phone 7 emulator:
