WPF DataGrid Control Introduction


This entry is part 1 of 6 in the series WPF DataGrid Control

The DataGrid control was introduced in WPF version 4.0. The Windows Presentation Foundation (WPF) DataGrid is a powerful control, with a large number of features. Here at begincodingnow.com, I have set up a series of posts on this control because of its importance and features. It looks a lot like the ListView control, (when using a GridView), but it offers a lot of additional functionality.

The DataGrid can automatically generate columns, depending on the data you feed it with. It is great when you need to display data in a row and column format when you don’t know how much data you have. The most common usage for the DataGrid is in combination with a database, but like most WPF controls, it works just as well with an in-memory source, like a list of objects. Perhaps that list of objects is a list of drives on a computer or a list of files in a folder. The possibilities are endless.

The following are some of the most important features, according to the book Illustrated WPF by Daniel Solis published by Apress.

  • Sorting: You can programmatically sort the rows on a particular column. The user can sort on a column by clicking its header.
  • Column headers: You can display just column headers, just row headers, or both.
  • Rearrange columns: You can rearrange the columns programmatically, or the user can rearrange them by dragging the headers left or right.
  • Specialized cell types: The grid supplies specialized column types for text, Buttons, CheckBoxes, ComboBoxes, and Hyperlinks.
  • Customized appearance: You can attach Styles and Templates to the DataGrid, as well as to most of its components. This gives you a large number of options for customizing the grid’s appearance.

The three basic things you need to do when creating a DataGrid are the following:

  • Create the column descriptions.
  • Attach the data.
  • Customize the various parts of the grid with Styles, Templates, and Brushes.

A Simple Example

Normally you would use a DataGrid to display data from a database, but here we are just providing a simple example. We’ll use an in-memory List instead.

Below is the XAML code. Notice how simple it is. If you click on one of the header you notice that you get sorting right out of the box!. You can also add a records, right out of the box, as well as edit records. You can also delete records. You get CRUD right out of the box.

<Window x:Class="DataGridSuperSimple.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DataGridSuperSimple"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="DataGridSuperSimple" Height="250" Width="400">
    <Grid Margin="8">
        <DataGrid Name="dgSuperSimple"></DataGrid>
    </Grid>
</Window>

Below is the C# code behind. We use a generic List<> to assign to the DataGrid’s ItemSource property.

using System;
using System.Collections.Generic;
using System.Windows;
namespace DataGridSuperSimple
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            List<Employee> users = new List<Employee>(); // generic List
            // object initializer syntax
            users.Add(new Employee() { Id = 1, Name = "Sammy Sampson", Birthdate = new DateTime(1971, 7, 23) });
            users.Add(new Employee() { Id = 2, Name = "Jack Jacson", Birthdate = new DateTime(1974, 1, 17) });
            users.Add(new Employee() { Id = 3, Name = "Susan Smith", Birthdate = new DateTime(1991, 9, 2) });
            users.Add(new Employee() { Id = 4, Name = "Joel Jolson", Birthdate = new DateTime(1985, 3, 22) });

            dgSuperSimple.ItemsSource = users;
        }
    }
    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public DateTime Birthdate { get; set; }
    }
}

DataGrid Properties

If you type “Can” in the XAML inside the DataGrid element, you find that there are several properties. All of these default to true.

  • CanUserAddRows
  • CanUserDeleteRows
  • CanUserReorderColumns
  • CanUserResizeColumns
  • CanUserResizeRows
  • CanUserSortColumns

Selection

We have properties that control how a user my select data. SelectionMode can be Single for single-item selection or Extended for multiple-item selection. The default is Extended. What is an item? SelectionUnit can be set to Cell, FullRow or CellOrRowHeader. When row(s) are selected the the Selected event is raised and the SelectedItem property contains the items.

DataGrid also supports “freezing” and number of columns, meaning that they never scroll out of view. To freeze one or more columns simply set the FrozenColumnCount property to a number other than zero (the default).

Series NavigationWPF DataGrid Control Example >>