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.

DataGrid

In the last article we started to look at the DataGrid control, which allows you to arrange data into a grid. Each row in the grid represents a single item from a collection. The columns hold related information from each item, often a single property.

In the first look at the data grid, we only used one type of column. There are actually five standard column types to select from, depending upon the way in which you wish to display the data, and how you want the user to interact with it. The five column types are:

  • DataGridTextColumn. This is the column type that we used in the previous instalment of the tutorial. It shows text, which can be edited.
  • DataGridCheckBoxColumn. This type of column displays a CheckBox in every row. It is ideal for Boolean and nullable Boolean properties.
  • DataGridComboBoxColumn. This column type is designed to allow the user to select items from a list. When editing a cell in such a column, the cell shows a drop-down list.
  • DataGridHyperlinkColumn. Columns of this type display a Uri object as a hyperlink. The text is styled to indicate that it can be clicked to follow the link.
  • DataGridTemplateColumn. The final column type is the most flexible. It allows you to define two data templates. One template determines how the information in the column appears when read-only. The other configures the column for editing. With a template column you have full control over the output.

To demonstrate the five column types we need a new sample project. Create a new WPF application in Visual Studio named, "DataGridColumnsDemo". We'll create a data grid that contains information about the planets of the solar system. Once the project is prepared, create a new class named, "Planet" with the following properties:

public class Planet
{
    public string Name { get; set; }
    public int Moons { get; set; }
    public bool HasRings { get; set; }
    public bool? GlobalMagneticField { get; set; }
    public string Category { get; set; }
    public Uri MoreInfoUri { get; set; }
}

Next, modify the XAML for the main window so that it contains a data grid that is bound directly to the data context of the window:

<Window x:Class="DataGridColumnsDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="Planets of the Solar System"
        Height="275"
        Width="450">
    <DataGrid ItemsSource="{Binding}" />
</Window>

We can now create the data for the planets and initialise the data context. Modify the constructor of the main window and add a method to set up the planet data, as follows:

public MainWindow()
{
    InitializeComponent();
    SetUpPlanets();
}

public void SetUpPlanets()
{
    DataContext = new List<Planet>
    {
        new Planet
        {
            Name = "Mercury", Category = "Terrestrial",
            GlobalMagneticField = true, HasRings = false, Moons = 0,
            MoreInfoUri = new Uri("http://en.wikipedia.org/wiki/Mercury_(planet)")
        },
        new Planet
        {
            Name = "Venus", Category = "Terrestrial",
            GlobalMagneticField = false, HasRings = false, Moons = 0,
            MoreInfoUri = new Uri("http://en.wikipedia.org/wiki/Venus")
        },
        new Planet
        {
            Name = "Earth", Category = "Terrestrial",
            GlobalMagneticField = true, HasRings = false, Moons = 1,
            MoreInfoUri = new Uri("http://en.wikipedia.org/wiki/Earth")
        },
        new Planet
        {
            Name = "Mars", Category = "Terrestrial",
            GlobalMagneticField = false, HasRings = false, Moons = 0,
            MoreInfoUri = new Uri("http://en.wikipedia.org/wiki/Mars")
        },
        new Planet
        {
            Name = "Jupiter", Category = "Gas Giant",
            GlobalMagneticField = true, HasRings = true, Moons = 67,
            MoreInfoUri = new Uri("http://en.wikipedia.org/wiki/Jupiter")
        },
        new Planet
        {
            Name = "Saturn", Category = "Gas Giant",
            GlobalMagneticField = true, HasRings = true, Moons = 62,
            MoreInfoUri = new Uri("http://en.wikipedia.org/wiki/Saturn")
        },
        new Planet
        {
            Name = "Uranus", Category = "Ice Giant",
            GlobalMagneticField = true, HasRings = true, Moons = 27,
            MoreInfoUri = new Uri("http://en.wikipedia.org/wiki/Uranus")
        },
        new Planet
        {
            Name = "Neptune", Category = "Ice Giant",
            GlobalMagneticField = true, HasRings = true, Moons = 14,
            MoreInfoUri = new Uri("http://en.wikipedia.org/wiki/Neptune")
        },
        new Planet
        {
            Name = "Pluto", Category = "Dwarf Planet",
            GlobalMagneticField = null, HasRings = false, Moons = 5,
            MoreInfoUri = new Uri("http://en.wikipedia.org/wiki/Pluto")
        }
    };
}

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

WPF Data Grid Column Types Demo Window

You can see that the data grid has automatically added columns for all of the properties from the Planet class. Note that the Boolean property, HasRings, has generated a column of CheckBoxes but the nullable Boolean property, GlobalMagneticField, has not. Also, the MoreInfoUri property has been shown as a hyperlink column. You will find that clicking a hyperlink has no effect.

8 November 2014