How to use Custom Row Layouts in RadGridView for WPF

Presenting data in a grid is common in many applications, but it doesn't have to look like a bunch or columns and rows.  With WPF you have freedom to make the data look totally different.  In this post, I am going to demonstrate using a custom row layout with the RadGridView for WPF.  To get started, I have setup a new window with a RadGridView.  I will be using the Northwind database Employees table for this example.  I would like to point out that if you are going to recreate this example, you will need to add the Window.Resources section in your XAML since it will not be there by default.

In a previous post, you saw me use ItemsSource to bind a List<T> to the RadGridView for WPF. This time I am going to be using a DataSet and the DataContext property.  Since I will be working with the individual columns in the XAML, DataContext will be used to tell the RadGridView where to bind the data from.  The code below demonstrates the binding operation.

A quick look at the application shows that the data is loading to the RadGridView.  Even though the Employees are all being displayed it is still a rather simple interface.  We don't even have the Employee picture being displayed yet.

To make it look good, the following mockup will be used as the baseline for how we want each row to display.  We have to make a XAML representation of the layout and tell the layout what data to bind where.

The ControlTemplate below will perform that role by defining a layout and binding specific columns to parts of the control.  You will want to place the template inside the Windows.Resources section of the XAML.

If you look through the XAML you will see that we have setup a Grid with columns and rows to create our layout.  The appropriate GridViewCells have been bound to data using the ColumnName property which will look to the DataContext property for sourcing.  The ControlTemplate below is referenced in the original template and will handle display of the Employee picture.

Note that I am not binding to the ColumnName in the ImageCellTemplate because the binding took place in the original template.  Instead I set the ImageSource to the bound data of the control which will display the image.  Now that all the templates are in place it is time to apply these templates to the grid.  This next section should also be included in the Windows.Resources section of the XAML.

The XAML above is a simple style which will apply the MyCustomRowTemplate to the TargetType, in this case any GridViewRow.  Alright, we now have everything necessary to display the data in a completely new way.

As you can tell, this doesn't look like a normal grid.  With custom row layouts in the RadGridView for WPF, you can enhance your interfaces quickly and easily across all your applications.  Changing the control templates above is a great way to get started learning how you can manipulate XAML to change the end result.

Download Visual Studio 2008 project: CardStyleRows.zip