.NET 4.0+

WPF Data Display Controls - DataGrid - Basics

by Richard Carr, published at http://www.blackwasp.co.uk/WPFDataGrid.aspx

The one hundred and ninth part of the Windows Presentation Foundation Fundamentals tutorial looks at the data grid control. This complex WPF control organises structured data into a grid with many standard and customisable features.

Manually Configuring Data Grid Columns

If you do not want the DataGrid to add columns automatically, you can switch the feature off by setting the AutoGenerateColumns property to false. You then add columns manually, permitting any combination of properties, including omitting some columns altogether, adding the same data more than once or generating column data using complex binding expressions.

To demonstrate, we'll start by disabling the automatic generation of the columns. Modify the XAML for the DataGrid, as follows:

<DataGrid ItemsSource="{Binding}" AutoGenerateColumns="False"/>

If you run the program you'll see that the data grid still contains one row for each item in the collection. However, each row is blank because there are no columns. We need to define the columns individually. This is achieved by adding column objects to the Columns collection of the DataGrid.

There are several data grid column classes available. These allow you to present data in different ways. We'll see them all in the next article. In this instalment we'll create text columns, using the DataGridTextColumn class.

To set the information held in a column, you set its Binding property. The data context for the column will be one of the items from the underlying collection, so you can create a binding expression that accesses a property from the Person class.

Update the XAML for the DataGrid as follows. This defines three columns for LastName, FirstName and Age. The columns will be added to the grid in the order in which they are defined.

<DataGrid ItemsSource="{Binding}" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding LastName}" />
        <DataGridTextColumn Binding="{Binding FirstName}" />
        <DataGridTextColumn Binding="{Binding Age}" />
    </DataGrid.Columns>
</DataGrid>

If you run the program you'll see that the correct data is displayed but the column headers are no longer showing the property names. As we have disabled automatic generation, we also need to set the column header contents manually. These are configured using the Header property of each column. You can set the Header to be plain text or a control.

Update the XAML again to set the headers. In the code below, the header text does not match the property names.

<DataGrid ItemsSource="{Binding}" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding LastName}" Header="Surname" />
        <DataGridTextColumn Binding="{Binding FirstName}" Header="Forename" />
        <DataGridTextColumn Binding="{Binding Age}" Header="Age (Years)" />
    </DataGrid.Columns>
</DataGrid>

Setting Column Sizes

The last column property that we'll consider is Width. This size property defaults to "Auto", meaning that the column will be sized to fit the data within. You can change the size to set the initial width of the column. This will not prevent the user from resizing the column by dragging the header edge.

Add sizes for the columns by updating the XAML, as follows:

<DataGrid ItemsSource="{Binding}" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding LastName}" Header="Surname" Width="140" />
        <DataGridTextColumn Binding="{Binding FirstName}" Header="Forename" Width="140" />
        <DataGridTextColumn Binding="{Binding Age}" Header="Age (Years)" Width="80" />
    </DataGrid.Columns>
</DataGrid>

Run the program to see the final results. As you can see in the image below, the widths of the columns are set and the headers show the text from the Header properties.