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.

Hyperlink Columns

The fourth type of column is defined using the DataGridHyperlinkColumn class. As the name suggests, this produces a column that shows a link. The standard styling options show the hyperlink in a different colour and with an underline, although this can be changed.

Let's add a hyperlink column for the MoreInfoUri property:

<DataGridHyperlinkColumn Binding="{Binding MoreInfoUri}" Header="More" Width="80" />

Run the program. You'll find that the address from the Uri is displayed in the column. In some cases you will want to use different text in the column, whilst retaining the link information. You can do this by configuring the ContentBinding property. This overrides the visible text with the information generated by a binding expression.

Modify the XAML for the hyperlink column to show the name of each planet.

<DataGridHyperlinkColumn Binding="{Binding MoreInfoUri}" Header="More" Width="80"
                         ContentBinding="{Binding Name}" />

There are some container controls that can be used as the target of a hyperlink. In our standard Window, this is not possible. This means that the link does not react to being clicked. You need to implement such behaviour in code.

A simple way to capture hyperlink clicking is to subscribe to the Click event. The column itself does not have such an event but you can connect to Hyperlink.Click, which captures clicking of the Hyperlink control that is used in each cell.

Update the DataGrid's opening XAML tag to register the event for the entire grid:

<DataGrid ItemsSource="{Binding}" AutoGenerateColumns="False"
          Hyperlink.Click="DataGrid_Click">

You can now add the code for the event in the C# behind the window. The code below obtains the Hyperlink control that raised the event using the OriginalSource property of the event arguments. Once cast to a Hyperlink, you can extract the link target from the NavigateUri property.

private void DataGrid_Click(object sender, RoutedEventArgs e)
{
    var hyperlink = e.OriginalSource as Hyperlink;
    if (hyperlink != null)
    {
        Process.Start(hyperlink.NavigateUri.ToString());
    }
}

If you run the program you'll see that clicking a link opens the correct web page using your default web browser.

Template Columns

The final type of column is provided by the DataGridTemplateColumn. This is the most flexible of the available options, as it allows you to define your own data templates for the viewing and editing modes. You can use any WPF controls within the cells to generate rich user interfaces.

To demonstrate, we'll create a template column to show the number of moons for each planet. Let's start by defining the column for display only. To do so, you need to apply a data template to the CellTemplate property. We'll show a TextBlock containing the number. Add the following column definition.

<DataGridTemplateColumn Header="Moons" Width="50">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Moons}" />
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

Run the program to see the new column. You won't be able to edit the information.

To enable editing you need to add a second template, using the CellEditingTemplate property. Let's use a template that includes a TextBlock to show the number and a ScrollBar that permits the value to be incremented and decremented. To do so, modify the column, as follows:

<DataGridTemplateColumn Header="Moons" Width="50">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Moons}" />
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
    <DataGridTemplateColumn.CellEditingTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding Moons}" />
                <ScrollBar Grid.Column="1" Minimum="0" Maximum="100" SmallChange="1"
                            Orientation="Vertical"
                            Value="{Binding Moons,UpdateSourceTrigger=PropertyChanged}"
                            RenderTransformOrigin="0.5,0.5">
                    <ScrollBar.RenderTransform>
                        <ScaleTransform ScaleY="-1"/>
                    </ScrollBar.RenderTransform>
                </ScrollBar>
            </Grid>
        </DataTemplate>
    </DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>

NB: The RenderTransform property flips the scroll bar vertically so that clicking the arrow that points upwards increments the number of moons.

Run the program to see the results and try changing the number of moons for a planet.

WPF Data Grid Template Columns

8 November 2014