DataGrid control in WPF and XAML.

This article shows you how to create and use a DataGrid control in WPF and XAML.

Note: This article is written using Visual Studio 2010 and .NET Framework 4.0. 

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 following code to XAML.

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 AutoGenerateColumns="False" Height="242" ItemsSource="{Binding Path=Products}" HorizontalAlignment="Left" Margin="117,57,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="463" Background="LightGray"  RowBackground="LightYellow" AlternatingRowBackground="LightBlue" IsReadOnly="True"  SelectionMode="Single" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">   <DataGrid.Columns>   <DataGridTextColumn Header="ProductID" Binding="{Binding ProductID}"></DataGridTextColumn>    <DataGridTextColumn Header="ProductName" Binding="{Binding ProductName}"></DataGridTextColumn>    <DataGridTextColumn Header="Description" Binding="{Binding Description}"></DataGridTextColumn>    <DataGridCheckBoxColumn Header="Qnty" Binding="{Binding Qnty}"></DataGridCheckBoxColumn>   </DataGrid.Columns>  </DataGrid>

                                                       Listing 1

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

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 Dataset of objects and bind it to a DataGrid control.

 private void Window_Loaded(object sender, RoutedEventArgs e)

        {

            OleDbConnection con = new OleDbConnection("Provider=Microsoft.ACE.OLEDB.12.0;Data Source=C:/Users/sanjay/Desktop/SANJAY/WPFGridBind/WPFGridBind/ProductDetail.xlsx;Extended Properties=\"Excel 12.0 Xml;IMEX=1\"");

            con.Open();

            OleDbDataAdapter da = new OleDbDataAdapter("select * from [Products$]", con);

            DataSet ds = new DataSet();

            da.Fill(ds, "Products");

            dataGrid1.DataContext = ds;

        }

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

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"

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"

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"

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 create a DataGrid control using XAML and how to set its properties and display data using a collection of objects. I also discussed how to format the DataGrid rows, columns, their visibility, and scrolling. We also saw, how to make rows read-only and set selection mode property.