Creating a Simple TV Listing Viewer Application with WPF 3.5 SP1 and the new DataGrid Control :

Creating a Simple TV Listing Viewer Application with WPF 3.5 SP1 and the new DataGrid Control

By Don Burnett

UPDATE: A video on the DataGrid CTP and a How-to Sample over at Vincent Sibal's Blog is now AVAILABLE for further consumption..

Wait you say what DataGrid control? Well it's no secret that there are third party ones out there, but Microsoft has been working on a set of controls to bring parity between WPF and Silverlight and one of those is a new DataGrid Control for WPF.

How do you get it? You must have WPF and the .Net framework 3.5 SP1 edition installed..

First of all the controls (and their source) are freely downloadable right now over at CodePlex..

http://www.codeplex.com/wpf/Release/ProjectReleases.aspx?ReleaseId=14963

You will want to go here and download the WPF Toolkit. You need at least the binaries.. If you are interested in control development or need some modification they have also provided source and binaries as a separate download.

After you have downloaded and unzipped the binary, which is wpftoolkit.dll you have to install it into your project..

First Steps:

Reference the WPFToolkit.dll in your project in Blend by right clicking your mouse on the references folder and selecting "Add Reference.." A dialog will pop-up and allow you to locate the downloaded "WPFToolkit.dll" file and select it..

Then you should see the following reference added to your project

Now you need to do a couple of more things to make your project use the new controls..

If you are creating a C# project you need to include a reference to these controls in the top of your code files (any ending in the .CS extension)

The reference should be Using Microsoft.Windows.Controls;

This will allow the code behind to also access and manipulate the controls. This can be done in Visual studio or whatever code editor you are using at the moment (some people who don't code including some designers open these in notepad, make the change, re-save and close the file..

Next we have to add references to the XAML so they can be addressed using their proper XML Namespaces.. We can do this right inside Expression Blend.. First open the xaml view and make the change I have highlighted..

Adding the line

xmlns:toolkit="http://schemas.microsoft.com/wpf/2008/toolkit"

Makes the XAML aware of the toolkit DLL and the new controls..

So we are ready to try hooking this new DataGrid control to some data..

So now we can click on Blend's Control Library at the bottom of the leftside toolbar.. Then click on the header "Custom Controls" so our library looks like this..

You should then see all of the new controls that have been added along with the DataGrid and the reference and Location/Namespace..

select DataGrid by clicking on it. It will then appear in the toolbar space above where you can double click on it, to insert it on the page..

Next we should add an XML datasource (this would be my XML TV listings for MSDN TV)

In the Data Panel in Blend, click on the +XML button header..

It will open a panel where you can select your XML datasource file..

Mine is located at C:\Users\don\Documents\tvviewer.xml, though this could be a URL or a relative path to a file on the same root folder on some website..

Then Click the "OK" button..

Your data will then appear on the right side data panel in a tree format, click on the down arrow to view the data..

Next we plan to add this data to the datagrid control which we just have placed on the design surface..

So next we click on data to select all of the data. If we wanted just the "Quarter" we would drill down into the data and select Quarter or one of the individual fields if that's all the information we required. For this demo we are going to select "data" and click and drag it over the grid control on the design surface and release the mouse button to drop it on the grid..

Then from the pop-up menu select Bind "data" to DataGrid

Next another contextual menu will pop up allowing us to properly map the fields, for this demo just click on use "default DataGrid Styling" and then click on the "ok" button to use the default mapping..

The blend design window will look like this.. Note the header column names match my XML file's fields properly..

Now build and test the project to see what it looks like..

and we have our first simple example of a WPF datagrid with databinding..

Any programmer worth there salt and probably many users will probably realize that I didn't set up the databinding properly because the running program shows the bindings to system assemblies.. That's where it pays to go in and correctly map your databindings instead of using the defaults.

There is much much more to the DataGrid control that we can look into later, but it's very functional and supports many sub-control parts for later exploration and customization..