Tuesday, 27 January 2009

Microsoft Chart Controls in a WPF application!

Microsoft Chart Controls are great! If you have never used this addin for the .NET framework 2.0 + then I adivse you to download it from Microsoft and give it a whirl. There is a plugin for Visual Studio which lets you create the charts in minutes but you can always use the code.

Recently I have been pushing the use of using WPF applications for business use, once a developer (or designer) becomes accustomed to the products availble to them to create WPF applications (aka. Expression Blend) then UI and Business Logic code can be done seperatly and at the same time resulting in faster development time, and more importantly more time to spend on giving the user a greater experience with the application they are using.

In this small project, I needed to show a datasource in a chart, I already have used Microsoft Chart Controls and know of its power but how would I show this in a WPF application? Well Microsoft knew that there would be times that Windows.Forms controls may need to be hosted within a WPF application and so have given us the power to do so.

The steps below allow you to load in almost any control that is designed to be run on the .NET 2.0 + framework, in this case it is tailored to the Microsoft Chart Controls but you should be able to see how it comes together.

Many thanks go to the author of the blog host-windows-forms-controls-in-wpf, Keyvan Nayyeri ('http://nayyeri.net/blog/host-windows-forms-controls-in-wpf/') without the information on this blog I would have been lost, I advise you all to give the blog a look as it has lots of information.

1) Importing DLL's

Ok the first step is the reference the DLL's you need to accomplish this task, firstly you will need to reference the System.Windows.Forms.Integration (WindowsFormsIntegration.dll). This dll is included in the Windows SDK so download and install that first (warning its about a 1GB download). This dll can be found at
C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.0, please remember I am running Windows Vista 64Bit and so the directory could be different for you.

Secondly reference the chart controls dll, usually found in C:\Program Files\Microsoft Chart Controls\Assemblies. The dll you want to reference is 'System.Windows.Forms.DataVisualization.dll'

Then also reference the System.Windows.Forms dll.

2) Once this is done we need to reference the namespaces within the WPF window. To do this add the following just below the line:



This will allow us to use the namespace CHR within the WPF xaml code to create objects from the namespace System.Windows.Forms.DataVisualization.Charting. In this namespace we can create a chart.

3) We need to create a container within the WPF application that will host the Windows.Forms controls.

WPF nativly does not run Windows.Forms controls, the Forms integration dll that we imported allows this to happen. So in the XAML code of the WPF window enter the following

<wfi:WindowsFormsHost x:Name="mainFGrid" >


This will insert a container in which Windows.Forms controls can be placed, you will need to add any controls by hand as the Blend program does not know of these controls.

4) So to finally add the Chart control, add the following line within the Windows Forms Host container

<CHR:Chart x:Name="mainChart" />

This adds the chart control to the container, once built the chart can be accessed normally in code through Visual Stuido.

Using this method you can create a Chart control and then code bind data to it, you can manipulate all the features of the control and all properites and methods are accessable via VS.

I recommend downloading the Microsoft Chart Controls sample from Microsoft to see what is capable.


Microsoft Chart Controls Samples

Microsoft Chart Controls Download (It states .NET framework 3.5 but it works in 2.0+)

Microsoft Chart Controls Addin for VS2008

Download the above and go forth and CHART!!!!