BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Data Display Controls - DataGrid - Column Types

The one hundred and tenth part of the Windows Presentation Foundation Fundamentals tutorial continues the examination of the DataGrid control. This article describes the types of columns that can be included in a data grid.

Text Columns

When you wish to display plain text, you can use a DataGridTextColumn. The information from the binding source is shown as a TextBlock when in a read-only mode and a TextBox when the user is editing a cell's contents. You can add basic formatting to the text with familiar font and colour properties such as FontFamily, FontSize, FontStyle, FontWeight and Foreground.

Let's disable the automatic generation of columns and add a text column for the names of the planets. Update the XAML for the DataGrid, as follows:

<DataGrid ItemsSource="{Binding}" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding Name}" Header="Planet" Width="80"
                            Foreground="Blue" FontWeight="Bold"/>
    </DataGrid.Columns>
</DataGrid>

Run the program to see the results. You should see that the grid now has a single column containing the planet names. The text is shown in bold, blue text.

CheckBox Columns

DataGridCheckBoxColumns are used when you wish to show a CheckBox in every cell in a column. They are ideal for columns that display Boolean values or nullable Booleans. If the value is true, the CheckBox is checked. If false, the CheckBox is unchecked.

When bound to a nullable Boolean property, a third state is possible. If the value is null, the cell's check box will be shaded. Normally, clicking a CheckBox will toggle its value between true or false. If you want to allow the user to set the value to null, you should set the IsThreeState property of the column to true. Clicking will then cycle between true, false and null.

Let's add two columns to show the HasRings and GlobalMagneticField properties. For the latter, we'll use three-state check boxes. Add the following two columns to the data grid:

<DataGridCheckBoxColumn Binding="{Binding HasRings}" Header="Rings?" Width="50"/>
<DataGridCheckBoxColumn Binding="{Binding GlobalMagneticField}"
                        Width="140" Header="Global Magnetic Field?"
                        IsThreeState="True"/>

Run the program to see the results. Try changing the values in the two new columns to see the difference made by setting the IsThreeState property.

WPF Data Grid CheckBox Columns

ComboBox Columns

When there are a limited number of options, from which you wish the user to select, you can use a DataGridComboBoxColumn. This type of column shows the information in a ComboBox when in edit mode and a TextBlock otherwise.

The items in the drop-down list are set using the column's ItemsSource property. We'll set fixed values for example purposes, using a CompositeCollection containing strings. This collection type is useful for static lists in XAML. In real-world solutions you can use data binding to populate the combo boxes.

In addition to populating the combo boxes, you need to specify where to find the current value for each row. You can set this using the SelectedItemBinding attribute, which we will bind to the Category property. There are other options for setting selections but these are beyond the scope of this article.

Add the following column definition to the data grid to define a ComboBox column for the planetary categories.

<DataGridComboBoxColumn Header="Category" Width="80"
                        SelectedItemBinding="{Binding Category}">
    <DataGridComboBoxColumn.ItemsSource>
        <CompositeCollection>
            <sys:String>Terrestrial</sys:String>
            <sys:String>Gas Giant</sys:String>
            <sys:String>Ice Giant</sys:String>
            <sys:String>Dwarf Planet</sys:String>
        </CompositeCollection>
    </DataGridComboBoxColumn.ItemsSource>
</DataGridComboBoxColumn>

Run the program to see the results. The window should appear similar to the image below:

WPF Data Grid ComboBox Columns

8 November 2014