.NET 4.0+

WPF Data Display Controls - DataGrid - Formatting

by Richard Carr, published at http://www.blackwasp.co.uk/WPFDataGridFormatting.aspx

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.

Frozen Columns

When the key data in your grid appears at the left, you can elect to freeze the leftmost columns. Frozen columns are removed from the horizontal scrolling area of the data grid. They remain fixed in position whilst other columns scroll, appearing to disappear beneath the frozen elements.

To freeze columns you set the FrozenColumnCount to an integer value. The property default to zero, allowing all columns to scroll. Setting a positive value freezes that number of columns.

Let's freeze the first column in the data grid, ensuring that the planet name column is always visible:

<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"
          FrozenColumnCount="1">

Run the program to see the results. You will see that the first column is fixed and the scroll bar extends only beneath the moveable columns.

Gridline Formatting

The last formatting properties that we'll consider in this article are those that modify the gridlines that appear between cells. You can change the brush used to draw these lines, or remove them altogether.

To change the colour of the lines, you can set the HorizontalGridLinesBrush and VerticalGridLinesBrush properties. As the names suggest, the horizontal and vertical lines are formatted separately.

The following XAML sets the horizontal lines to red and shows the vertical gridlines in green:

<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"
          FrozenColumnCount="1"
          HorizontalGridLinesBrush="Red" VerticalGridLinesBrush="Green">

If you don't want to show the grid lines, you can remove them using the GridLinesVisibility property. This is set to a value from the GridLinesVisibility enumeration, which contains the values All, Horizontal, Vertical and None. These determine which lines are rendered.

For the final example, we'll remove the horizontal gridlines. The example also modifies some of the colours and changes the alternation count.

<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"
          FrozenColumnCount="1"
          VerticalGridLinesBrush="LightBlue" GridLinesVisibility="Vertical">

Run the program to see the final result.