DataGrid in WPF

In this article, you will learn how to use a WPF DataGrid control, set its properties, and load data from a collection.

Introduction

DataGrid element represents WPF DataGrid control in XAML.

<DataGrid />

When you drag and drop a DataGrid control from Toolbox to your designer, position the control, this action adds the following code to XA

The Width and Height properties represent the width and the height of a DataGrid. The Name property represents the name of the control, which is a unique identifier of a control. The Margin property sets the margin of placement of DataGrid on the window. The following code snippet sets the name, height, width, and margin of a DataGrid control.

<DataGrid Height="148" HorizontalAlignment="Left" Margin="12,21,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="225" />

Listing 1.

Now, change the Name of DataGrid.

Name="McDataGrid"

Figure 1 shows Toolbox and XAML code preview after a DataGrid is added to a page.

Figure 1

Data Binding

The ItemSource property of DataGrid is the key to data binding. You can bind any data source that implements IEnuemerable. Each row in the DataGrid is bound to an object in the data source and each column in the DataGrid is bound to a property of the data source objects.

In this example, we will create a collection of objects and bind it to a DataGrid control.

First, we are going to add a class to the project. The Author class looks like Listing 2 that has ID, Name, DOB, BookTitle, and IsMVP members.

public class Author  
{  
    public int ID { get; set; }  
    public string Name { get; set; }  
    public DateTime DOB { get; set; }  
    public string BookTitle { get; set; }  
    public bool IsMVP  { get; set; }  
}

Listing 2

Now let's create a collection of Author objects by using the List class. The LoadCollectionData method in Listing 3 creates a List of Author objects.

/// <summary>  
/// List of Authors  
/// </summary>  
/// <returns></returns>  
  
private List<Author> LoadCollectionData()  
{  
    List<Author> authors = new List<Author>();  
    authors.Add(new Author(){  
            ID = 101,  
            Name = "Mahesh Chand",  
            BookTitle = "Graphics Programming with GDI+",  
            DOB = new DateTime(1975, 2, 23),  
            IsMVP = false });  
  
    authors.Add(new Author()  
    {  
        ID = 201,  
        Name = "Mike Gold",  
        BookTitle = "Programming C#",  
        DOB = new DateTime(1982, 4, 12),  
        IsMVP = true  
    });  
  
    authors.Add(new Author()  
    {  
        ID = 244,  
        Name = "Mathew Cochran",  
        BookTitle = "LINQ in Vista",  
        DOB = new DateTime(1985, 9, 11),  
        IsMVP = true  
    });  
  
    return authors;  
}

Listing 3

Now the last step is to set ItemsSource property of DataGrid. The following code snippet sets the ItemsSource property of a DataGrid to List of Authors.

McDataGrid.ItemsSource = LoadCollectionData();  

The data loaded in DataGrid looks like Figure 2, which shows the properties of the Author class a column names.

Figure 2

As you saw in Figure 2, all public properties of the Author object are represented as columns of the DataGrid. This is because by default, the AutoGenerateColumns property of DataGrid is true. If you do not wish to generate automatic columns, you simply need to set this property to false.

McDataGrid.AutoGenerateColumns = false;  

Setting Column Width and Row Height

The ColumnWidth and RowHeight properties of DataGrid are used to set the default column width and row height of DataGrid columns and rows.

The following code snippet sets column width and row height to 100 and 30 respectively.

<DataGrid Height="200" Width="500" HorizontalAlignment="Left" Margin="12,21,0,0"   
Name="McDataGrid" VerticalAlignment="Top" RowHeight="30" ColumnWidth="100" > 

The new DataGrid looks like Figure 3.

Figure 3

The MaxWidth and MaxHeight properties represent the maximum width and maximum height of a DataGrid. The MinWidth and MinHeight properties represent the minimum width and maximum height of a DataGrid. The MaxColumnWidth and MinColumnWidth properties represent the maximum width and minimum width of columns in a DataGrid.

Grid Lines Visibility and Header Visibility

The GridLinesVisibility property is used to make grid lines visible. Using this option you can show and hide vertical, horizontal, all, or none lines. The HeaderVisibility property is used to show and hide row and column headers.

The following code snippet makes vertical grid lines visible and header visible for both rows and columns.

GridLinesVisibility="Vertical" HeadersVisibility="All"

The new DataGrid looks like Figure 4.

Figure 4

Grid Background, Row Background, and Alternative Row Background

The Background property is used to set the background color of the DataGrid. The RowBackground and AlternativeRowBackground properties are used to set the background color of rows and alternative of the DataGrid.

The following code snippet sets background, row background, and alternative row background colors of a DataGrid.

Background="LightGray" RowBackground="LightYellow" AlternatingRowBackground="LightBlue"  

The new DataGrid looks like Figure 5.

Figure 5

Border Color and Thickness

The BorderBrush and BorderThickness properties are used to set the color and width of the border. The following code snippet sets border color to gray and thickness to 5.

BorderBrush="Gray" BorderThickness="5"

The DataGrid with a new border looks like Figure 6.

Figure 6

Read Only and Freezing

The IsReadOnly property is used to make a DataGrid read only. That means you cannot edit a DataGrid. The following code snippet sets IsReadOnly property to true.

IsReadOnly="True"

The AreRowDetailsFrozen property is used to freeze the row details area so it cannot be resized. The FrozenColumnCount property represents the number of columns that user can not scroll horizontally. The following code snippets sets AreRowDetailsFrozen to true and FrozenColumnCount to 2.

AreRowDetailsFrozen="True"   
FrozenColumnCount="2"  

DataGrid allows you to reorder columns by dragging a column but you may disable this feature by setting the CanUserReorderColumns property to false. The following code snippet sets CanUserReorderColumns properties to false.

CanUserReorderColumns="False" 

Data Grid allows you to change the width of columns. You may fix columns so user can't resize them by setting the CanUserResizeColumns property to false. The following code snippet sets CanUserResizeColumns properties to false.

CanUserResizeColumns="False" 

Sorting

By default, column sorting is enabled on a DataGrid. You can sort a column by simply clicking on the column header. You may disable this feature by setting CanUserSortColumns property to false. The following code snippet sets CanUserSortColumns properties to false.

CanUserSortColumns = "False"

Scrolling

The HorizontalScrollBarVisibility and VerticalScrollBarVisibility properties of type ScrollBarVisibility enumeration control the horizontal and vertical scrollbars of the DataGrid. It has four values - Auto, Disabled, Hidden, and Visible. The default value of these properties is Auto, that means, when scrolling is needed, you will see it, otherwise it will be hidden.

The following code snippet enables the horizontal and vertical scrollbars.

HorizontalScrollBarVisibility="Visible"  
VerticalScrollBarVisibility="Visible" 

The DataGrid with both scrollbars looks like Figure 7.

Figure 7

Selection Mode

The SelectionMode property decides if the DataGrid allows only a single row or multiple rows selection. It has two values – Single and Extended. The following code snippet sets the SelectionMode to Extended.

SelectionMode="Extended"

Summary

In this article, I demonstrated how to use a DataGrid control in WPF, set its properties and display data using an object collection. I also discussed how to format rows, columns, their visibility, and scrolling. We also saw, how to make rows read-only and set selection mode property.