Binding Data to a WPF DataGrid

Binding a data source to a WPF data grid is not exactly difficult, but it isn’t exactly easy or convenient either.  The only way that I have found to do it, so far, involves a combination of code behind logic and manually editing the XAML.  There are some short cut methods that can reduce the amount of XAML code that needs to be manually edited, but I find these short cut methods to be less than completely satisfactory.

First you need to drop a DataGrid onto your form.  You can do this in the designer or in the XAML editor, it really makes no difference. Then you need to start adding columns to the DataGrid.  Typically, each column will hold a single field (or property) from your data source.  I find it easiest to add the columns using the XAML editor since you are going to end up there before you are finished in any event.  Supposed we want to have 4 columns in our DataGrid: ID, Shipper, Consignee and Billto.  Our DataGrid definition would look something like this:

DataGrid XAML

So far, all this tells the DataGrid is the name of the properties from your data source to use for the field contents.  By default, the column heading will be the same as the name of the property.  We haven’t told the DataGrid what to use for a data source yet, but don’t worry about that now. We will do that in the code behind.

If we want to give each field a custom column heading we need to change our XAML and add the Header attribute to each column.  Now our XAML looks something like this:

DataGrid XAML

This is about all we have to do with the XAML.  Now we have to deal with the code behind aspects.

The first thing we need to do is define a class to act as a data source for the DataGrid.   In reality, we need to define two classes. A class to hold the column data for each row and a collection class to hold a collection of our column data objects, one for each row of the DataGrid.  Our column data class would look something like this:

Public Class Account
Public ID As String
Public Shipper As String
Public Consignee As String
Public Billto As String
End Class

As you can see, each property in our class matches one of the property names given in the Binding attribute of one of the  DataGridTextColumns.

Next we need to define out collection class.  In fact, for our purposes we can just use an instance of the System.Collections.ObjectModel.ObservableCollection class.  Like this:

Public Accounts As ObservableCollection  = New ObservableCollection(Of Account)

Then we add a few Account instances to our collection so that we have something to display.

Accounts.Add(New Account('Acct1', 'Y', 'Y', 'N'))
Accounts.Add(New Account('Acct2', 'Y', 'N', 'N'))
Accounts.Add(New Account('Acct2', 'Y', 'N', 'N'))

Now that we have got a collection of data items to populate our DataGrid with, all that remains it to tell the DataGrid where to find the data.  You do that by setting the ItemsSource property of the DataGrid.

MyGrid.ItemsSource = Accounts

And that’s all there is to it.  Of course, the DataGrid has many more capabilities than just displaying a list of data records and I will attempt to cover some of these capabilities in future posts.

Leave a Reply