WPF Toolkit DataGrid, Part I – Introduction

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:

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.

27 thoughts on “WPF Toolkit DataGrid, Part I – Introduction

  1. Pingback: DotNetShoutout
  2. Pingback: 9eFish
  3. Hi, I downloaded sample 01 but it’s looking for the WPF toolkit reference (version 3.5.40128.1–which is not included in the download) … I instead added the latest WPF toolkit binary but it still looks for the other version.

    1. Hi Jan! The sample uses the dlls installed by the WPF ToolKit’s installer into the GAC. You will have to download WPF Toolkit and install it on your PC. Otherwise you can just replace the GAC reference by a file reference pointing to the specific WPF Toolkit dll.

  4. Hi, i installed the latest WPF toolkit, and the sample works. But it will take about 15 seconds to start up! why?

    1. Hi Tianyin! I have no clue on why this is happening. It should run pretty fast. I tested rebuilding all the sources and launching the sample app in debug mode on a Pentium IV with Windows 7 and it took only 10 secs (rebuilding included)!

  5. Samuel,
    I am starting to work with your example. I downloaded the file and brought it up in VS2008. When I tried to look at Samplewindow.xaml it is telling me that there is an error with the namespace. Does the SampleWpfDataGrid require that specific namespace? Or can I set to the WPFToolkit namespace?

  6. Great intro to the wpf datagridview.
    Opened my eyes, for instance I didn’t know I can bind to a list instead of a datatable.
    Going on to part 2.

  7. I have a wpftoolkit.dll and i added it as a reference in my project.
    Now how can i display that in my wpf window and make it visible with out any data det linked in the start.
    I am doing my oriject in VB.Net

  8. Nice article. Certainly helped me.

    Part 1 never mentioned about the Usercontrol Resources “Categories” and was throwing error in my machine.

  9. I know I am getting started on WPF pretty late seems like.

    One question :

    What if you wanted to make “Category” a domain object and bind the dropdown to a Category List instead of as a internal resource of the datagrid?

    I saw a “Datacontext” property for binding the datasource for the grid.

    Do I need to hook into some event to bind the dropdown with the Categories list?

  10. @Samuel Moura
    Samuel,

    I will take a look at that. I tried to do it myself with a ObjectDataProvider within the grid and I cannot seem to get the selected value to show up.

    Coming from a WinForms world, it feels like WPF will have a learning curve and wouldn’t be something to just switch to.

    I have been debating whether to use a WPF datagrid or go with a Winforms commercial Grid (Telerik/Infragistics) that would allow for custom user controls to be dropped in ASP.Net style.

    Sorry, for the verbose comment. Any thoughts / comments appreciated.

    Thanks,
    Kshitij

  11. @Kshitij Indeed there is a considerable learning curve in WPF. To get up to speed with WPF you will need an initial effort that in my understanding will be greatly justified by the flexibility and easiness of use you get when you get the feel for it.

    If you are pressured by time, perhaps you should consider something more easy to implement, like the controls you have referred. If you have time, I would recommend investing it on WPF since this is the path to take in what concerns smart client development on the .Net platform (you will just love the freedom you have when you get a good control level over the platform).

  12. @Samuel Moura
    Samuel,

    I really appreciate your time and response.

    We are midway on a project and this next module could require ASP.Net GridView like functionality.

    But as you said, we will have invest some time as team to get up to speed with WPF.

    It seems like I am jumping on WPF pretty late and now there is so many resources to look at and choose from.

    Would you point me to at good starting resources?

    Did you have favorable opinion of the DevExpress Grid?

  13. @Kshitij As a starting point for WPF I would recommend:

    I only did preliminary tests with DevExpress grid, it did not meet the requirements I needed for what I was developing at the time so I sticked with the WPF datagrid.

  14. Hi Samuel,

    I new relatively new to WPF, and have read some chapters of books and have studied you code. Im particularly interested in your response/help with regards to adding the facility to change the TeamModel.Categories property to a modifyable ObservableCollection so the user can enter ‘new’ strings into the comboboxes and have the list updated. I’ve got it working, BUT when i go to sort the ObservableCollection, the previously entered combobox values in the grid disappear. Can you suggest as to why? Is the binding lost due to the source being sorted and is there a way so the Categories remain?

    Jack.

Leave a Reply

Your email address will not be published. Required fields are marked *