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

The one hundred and fourteenth part of the Windows Presentation Foundation Fundamentals tutorial continues to look at the functionality of the DataGrid. This article considers the formatting properties of the control.

DataGrid Formatting

WPF provides a great deal of flexibility in the ways in which you can customise the user interface of standard controls. This ranges from standard properties, which can be set using attributes in the XAML, to templates, which completely replace the look and feel. You can also create reusable styles that incorporate property values and templates. We will look at control templates and styles later in this tutorial. In this article we'll concentrate on the more basic formatting properties provided by the DataGrid control. These allow you to change the appearance of the grid cells, headers, background and gridlines.

To demonstrate, we'll expand upon the example code that we've been using in the past few articles. This sample project displays some details about the solar system's planets, within a DataGrid. If you don't have the up-to-date solution, you can download it using the link at the top of the article, "WPF Data Display Controls - DataGrid - Selection".

Header Formatting

DataGrids include two types of header. Column headers are shown at the top of the grid and describe the properties that are displayed for each item in the data bound collection. Row headers appear as a small area at the side of the rows. They can be used to select cells or resize rows.

You can change the display of the grid to hide the row and column headers or to change their sizes. To show or hide the two sets of headers you use the HeadersVisibility property. This is set to a value from the DataGridHeadersVisibility enumeration. Four options are available:

  • All. The default value for the property. When set to All, both sets of headers are visible.
  • Column. Shows the column headers at the top of the grid but hides the row headers.
  • Row. Shows the row headers and hides the column headers.
  • None. Hides all headers in the grid.

Let's remove the row headers from the grid by setting the value to "Column". Update the DataGrid's opening tag, as follows:

<DataGrid Name="SampleGrid"
          ItemsSource="{Binding Source={StaticResource SortedPlanets}}"
          AutoGenerateColumns="False" Hyperlink.Click="DataGrid_Click"
          SelectionMode="Extended" SelectionUnit="CellOrRowHeader"
          HeadersVisibility="Column">

Run the program to see the results. The row headers will no longer be present.

Header Size

You can change the height of the column headers and the width of the row headers using the ColumnHeaderHeight and RowHeaderWidth properties respectively. Let's use these to increase the two sizes, whilst removing the HeadersVisibility value.

<DataGrid Name="SampleGrid"
          ItemsSource="{Binding Source={StaticResource SortedPlanets}}"
          AutoGenerateColumns="False" Hyperlink.Click="DataGrid_Click"
          SelectionMode="Extended" SelectionUnit="CellOrRowHeader"
          RowHeaderWidth="20" ColumnHeaderHeight="35">

Run the project to see the changed formatting.

WPF DataGrid with Changed Header Sizes

Row Formatting

In previous articles we've set the width of the columns in a DataGrid individually. You can also control the standard height of the rows in the grid. Setting the RowHeight property sets the initial height for every row. The user can still change the height by dragging the dividing line between two row headers.

Let's increase the height in the sample project. Update the XAML for the DataGrid:

<DataGrid Name="SampleGrid"
          ItemsSource="{Binding Source={StaticResource SortedPlanets}}"
          AutoGenerateColumns="False" Hyperlink.Click="DataGrid_Click"
          SelectionMode="Extended" SelectionUnit="CellOrRowHeader"
          RowHeaderWidth="20" ColumnHeaderHeight="35" RowHeight="25">

You can also format the rows to set the colours, including using alternating colours to make it easier for the user to scan across wide grids. There are four key colour properties for this purpose:

  • Background. Sets the background colour for the whole control. This colour is seen outside of the cells and headers, filling the rectangular area of the control.
  • RowBackground. Sets the main background colour for the data grid's cells.
  • AlternatingBackground. This property defaults to null, indicating that it is not in use. When set to a different Brush, the colours of the rows alternate between the RowBackground brush and the AlternatingBackground brush.
  • AlternationCount. When you set the AlternatingBackground property, the default value of AlternationCount means that every other row in the grid is a different colour. You can increase the AlternationCount to change how often the AlternatingBackground brush is used. For example, setting the value to three means every third row will be displayed using the secondary colour.

To demonstrate, let's set all four values. In the opening DataGrid tag below, the background of the grid is light cyan. The rows alternate between white and aquamarine, with the aquamarine appearing on every third row.

<DataGrid Name="SampleGrid"
          ItemsSource="{Binding Source={StaticResource SortedPlanets}}"
          AutoGenerateColumns="False" Hyperlink.Click="DataGrid_Click"
          SelectionMode="Extended" SelectionUnit="CellOrRowHeader"
          RowHeaderWidth="20" ColumnHeaderHeight="35" RowHeight="25"
          Background="LightCyan" RowBackground="White"
          AlternatingRowBackground="Aquamarine" AlternationCount="3">

The result will appear similar to the image below. Here the window has been expanded to show the Background colour, below the rows.

WPF DataGrid Alternating Background Colours

24 November 2014