Samuel Moura's DevUX

Recently I had to recreate in WPF a Windows Forms panel that used DevExpress XtraGrid to present data in tabular form, keeping the same look and feel as it was part of an existing application. I Googled around to find out what different solutions exist out there for presenting data this way in WPF. After searching for a while and looking at solutions I found a few interesting ones:

• WPF Toolkit’s DataGrid
• Xceed’s DataGrid for WPF
• DevExpress’s DXGrid for WPF

I ended up using WPF Toolkit. The main reasons were: WPF Toolkit is free, open source and it was the one that allowed me greater flexibility. In this series of articles I intend to present you with all the functionality I managed to implement on my UserControl. For obvious reasons I will not disclose the code developed within our project but will provide working samples of the most relevant achievements in detail using a sample application.

To access WPF Toolkit’s DataGrid start by downloading and installing the latest release on your PC. You can download it from the link provided here.

Roadmap

In this article we will go through the following topics:

• Hands on your First WPF DataGrid
• DataGridColumn Hierarchy
• Using DataGridColumns to enhance the DataGrid sample

Hands on your first WPF DataGrid

After installing WPF Toolkit we can start by creating a new WPF Application within Visual Studio and add the WPF Toolkit reference on it, which can be accessed through the ‘Add Reference’ .Net tab.

I believe that going through a live sample is the best way to adopt a new technology and as so we will dive directly into using the code instead of first going through a bunch of theory and only afterwards peaking on some code. Adding a DataGrid to a WPF application can be done quite easily:

<UserControl x:Class="SampleWpfDataGrid.PeopleView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:WpfToolkit="http://schemas.microsoft.com/wpf/2008/toolkit">
    <WpfToolkit:DataGrid
        ItemsSource="{Binding Path=PlayerAges}"
        HorizontalScrollBarVisibility="Hidden" SelectionMode="Extended">
    </WpfToolkit:DataGrid>
</UserControl>

We just need to instantiate a DataGrid object from the WPF Toolkit and bind it to a collection in order to display its data. In this example we use the AutoGenerateColumns feature of the DataGrid to generate the columns so that all the information in PlayerAges gets correctly displayed – note that this is enabled by default.

Basically what you see are two teams of people each containing 5 members. The grid will display a series of data regarding each team member’s age and its deviation towards the team players average age.

In the sample application I have separated the logic from the view in a way that the MVVM pattern can easily be used by specifying a DataTemplate for the ViewModel. There is a class which represents the ViewModel – TeamModel – and it contains a list of PlayerAge entries. Each row in the DataGrid represents a PlayerAge.  I then use a special row to represent the Team that I can use in conjunction with the IsExpanded plus IsSubItem properties to group the items on the list by teams. The DataGrid is added to the PeopleView UserControl that is used on the SampleWindow.

For now you can download a working sample of what you have seen so far from this link.

This is a straight forward example on how to use the WPF Toolkit’s DataGrid. It shows you how easy it is for you to present data and allow users to edit it. Obviously this alone is not of much use because you will want to style your grid and give it a set of behaviors according to whatever state your application is in. We will look on how to customize and give this DataGrid a nice look and feel along with some additional functionality.

DataGridColumn Hierarchy

Before going on with our sample lets have a look on how the WPF Toolkit DataGrid is structured in regard to the default columns types provided.

We have a DataGrid class to which we bind a data source and then use the DataGridColumn’s to specify how the data will be presented for each field according to that field’s type. There are several types of DataGridColumns available: DataGridHyperLinkColumn, DataGridCheckBoxColumn, DataGridTextColumn, DataGridComboBoxColumn and DataGridTemplateColumn. Most of these column types are self explanatory, we have columns for text, check boxes, etc. The Template Column is perhaps the one that may not be so clear, it is a column that can be used in conjunction with ControlTemplates to create whatever type of column you require, being it a Chart, a user control, etc.

Using DataGridColumns to enhance the DataGrid sample

Lets pick up our DataGrid sample project and create columns for all the fields we want to present. Since some fields will only be used for logic you must hide all other from the user. Only IsEnabled, Name, Age, Deviation, Category and DeviationPercentage fields will be visible.

The first thing you have to do so that you can control what columns are displayed is to set the AutoGenerateColumns to false on the DataGrid. Afterwards you can start adding columns and binding them to their corresponding fields. This is an example on how you can define your columns:

<WpfToolkit:DataGrid
    ItemsSource="{Binding Path=PlayerAges}"
    HorizontalScrollBarVisibility="Hidden" SelectionMode="Extended"
    CanUserAddRows="False" CanUserDeleteRows="False"
    CanUserResizeRows="False" CanUserSortColumns="False"
    AutoGenerateColumns="False"
    RowHeaderWidth="17" RowHeight="25">
    <WpfToolkit:DataGrid.Columns>
        <WpfToolkit:DataGridCheckBoxColumn
            Header="Enabled" Width=".5*"
            Binding="{Binding Path=IsEnabled}"/>
        <WpfToolkit:DataGridTextColumn
            Header="Player Name" Width="2*"
            Binding="{Binding Path=Name}"/>
        <WpfToolkit:DataGridTextColumn
            Header="Age" Width="1*"
            Binding="{Binding Path=Age}"/>
        <WpfToolkit:DataGridTextColumn
            Header="Deviation" Width="1*"
            Binding="{Binding Path=Deviation}"/>
        <WpfToolkit:DataGridComboBoxColumn
            Header="Category" Width="1*"
            ItemsSource="{StaticResource Categories}"
            SelectedValueBinding="{Binding Path=Category}"
            TextBinding="{Binding Path=Category}" />
        <WpfToolkit:DataGridTextColumn
            Header="Deviation Chart" Width="1*"
            Binding="{Binding Path=DeviationPercentage}"/>
    </WpfToolkit:DataGrid.Columns>
</WpfToolkit:DataGrid>

Notice that you started by tweaking a bit the DataGrid to conform with some of the required features. You have disabled a series of functionality mainly because there is no need to handle new rows input. Sorting does not make sense has groups are being used, etc – most of it is intuitively understandable. Notice that AutoGenerateColumns was set to false and that RowHeight was set to 25 so that when the user is picking something from the category combo box the row does not need to grow to allow the layout of the control – if you wish, just remove this value from the DataGrid and watch how picking something from the Category combo box now looks.

You have added a DataGridCheckBoxColumn and linked it to our IsEnabled field. Added a series of DataGridTextColumns binding them to Name, Age and Deviation along with a DataGridComboBoxColumn to bind to the player’s category. Finally, for now, notice how the Deviation Chart column was set to a DataGridTextColumn, this will be replaced by a DataGridTemplateColumn in the future when we get into styling the DataGrid.

Each column has been given a Header name and a Width according to star notation (as in WPF Grid control). Has you can see from the code, the Name column should be twice as large as, for instance, the Age column. This allows us to create user friendly layouts for our columns without too much effort. This is how the sample application is currently looking:

To see a working sample of this new layout please download this file.

End of Part I

You have given the first steps in understanding how to use the WPF Toolkit’s DataGrid in an application. You are now able to create simple DataGrids and specify columns to better control how your data gets presented to the user.

Much is there to find out about the WPF Toolkit DataGrid. Stay tuned for future blog posts has I will go through more complex features including a complete restyling of the DataGrid.

Samuel Moura WPF DataGrid, DataGridColumn, WPF, WPF Toolkit, XAML