.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.

DataGrid

When you wish to display a large amount of similar information, a grid can often provide an ideal layout. When using WPF, you can create grids using the DataGrid control. DataGrids include many rows, each containing the details of a single object. The properties of the object are shown in columns.

DataGrid is a very powerful and flexible control with many features. In the simplest configuration, you can bind a grid to a collection of objects of the same type. In this case, each property from the underlying type is mapped to a column in the grid. The columns are generated automatically and labelled with the name of the property. More commonly, you will define the columns that you wish to display manually.

In this article we'll first create a data grid with automatically generated columns. Next we'll configure the column bindings manually. We'll look at more features of the DataGrid control over the next few articles in this tutorial.

Configuring a Basic Data Grid

To demonstrate the use of a DataGrid we need a new sample project. Create a new WPF Application in Visual Studio named, "DataGridDemo". We'll create a data grid that displays a list of people. Before we set up the XAML for the DataGrid, we need a class to hold the details for the people.

Add a new class file named, "Person". Change the code for the class, as shown below, to include properties for the person's first and last names, and their age.

public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int Age { get; set; }
}

Next we need to set up the data context for the main window. We'll be using an ObservableCollection of Person objects so switch to the code for the MainWindow class and add the following using directive to simplify access to the System.Collections.ObjectModel namespace.

using System.Collections.ObjectModel;

We can now create a list of people. Replace the constructor for the main window with the following code. This creates an observable collection containing five items and sets it as the window's data context.

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

private void SetUpData()
{
    var bob = new Person { FirstName = "Bob", LastName = "Brown", Age = 32 };
    var jim = new Person { FirstName = "Jim", LastName = "Green", Age = 21 };
    var mel = new Person { FirstName = "Mel", LastName = "Black", Age = 20 };
    var sue = new Person { FirstName = "Sue", LastName = "White", Age = 64 };
    var ted = new Person { FirstName = "Ted", LastName = "Grey", Age = 18 };

    DataContext = new ObservableCollection<Person> { bob, jim, mel, sue, ted };
}

Finally, modify the XAML for the window as shown below. This produces a window containing the simplest possible data-bound DataGrid. The ItemsSource property is bound directly to the collection defined in the data context.

<Window x:Class="DataGridDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DataGrid Demo"
        Height="200"
        Width="400">
    
    <DataGrid ItemsSource="{Binding}" />
    
</Window>

Run the program to see the results. As we have not configured the columns, they are generated automatically. Every property from the Person class generates a matching column. One row is present for each Person.

Even with a simple DataGrid you can see some of the key features. If you click the column headers, you will find that the data in the clicked column is sorted. Clicking a column twice reverses the sort order and a third click removes the sorting. Holding the Shift key whilst clicking the headers allows you to sort by several columns at the same time.

If you point to the edge of a column's header, the mouse pointer changes to show a resizing icon. Dragging the column edge changes the size of the column. If you drag the centre of a column header to the left or right, you can change the order of the columns in the grid.

You can also edit the data in the grid. Double-clicking a cell puts it into edit mode and allows you to modify the text. As the grid is bound to objects, changing the text updates the underlying Person object. If you edit the blank row at the bottom of the grid, a new Person instance is created and added to the list. You can even click the small grey area to the left of a row to select it and press the Delete key to delete a row. This removes the matching item from the collection.