Mastering WPF DataGrid in a Day: Hour 3 DataGrid Header

In this third hour of the Mastering WPF in 24 Hours series, I will talk about the DataGrid Header visibility and the appearance of the columns header.

Before continuing this article, I highly recommend reading these previous parts:

HeaderVisibility

You can show or hide a DataGrid header using the HeaderVisibility property. The HeaderVisibility has the four values All, Column, None and Row. If you want to show both row and column headers, set the HeaderVisibility to All. None of the values hide both row and column headers. And the Column and Row values display only row and header columns, respectively. See Figure 6.

header visibility

Figure 6

The code snipet in Listing 10 hides both row and column headers of a DataGrid.

<DataGrid HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"
Height="219" Width="509" Name="McDataGrid" AutoGenerateColumns="True"
RowHeaderWidth="10" AlternatingRowBackground="LightGreen"
HeadersVisibility="None"/>

Listing 12

The output looks like Figure 7.

main window

Figure 7

ColumnHeaderStyle

We often must change the appearance of a DataGrid header. That really means the appearance of the DataGrid column headers. The ColumnHeaderStyle property is used to apply a style to all of the DataGrid column headers.

A DataGrid also provides an option to change the appearance of individual column headers using the property DataGridColumn.HeaderStyle that I will explain in later topics.

A Style can be applied to all column headers, or to an individual column header. To apply a Style to an individual header, set the DataGridColumn.HeaderStyle property, that takes precedence over the DataGrid.ColumnHeaderStyle property.

A Style is usually created as a resource of the application or a Page or a Window. The Style is used to define and set a property using the property name and values.

The code listing in Listing 14 creates a Style as a Windows resource. The first Style is targettting the DataGrid and the second Style is targeting the DataGridColumnHeader. The DataGridColumnHeader style sets the Height, Background, Foreground, FontSize and FontFamily properties.

data grid vs column headers

<Window.Resources>
<Style x:Key="DGHeaderStyle" TargetType="{x:Type DataGrid}">
<Setter Property="ColumnHeaderStyle" Value="{DynamicResource DGCHeaderStyle}"/>
</Style>
<Style x:Key="DGCHeaderStyle" TargetType="DataGridColumnHeader">
<Setter Property="Height" Value="30"/>
<Setter Property="Background" Value="LightBlue" />
<Setter Property="Foreground" Value="Black"/>
<Setter Property="FontSize" Value="14" />
<Setter Property="FontFamily" Value="Calibri" />
</Style>
</Window.Resources>

Listing 13

The code snipet in Listing 15 sets the Style of the DataGrid using the Style property.

<DataGrid x:Name="McDataGrid" Margin="0" AutoGenerateColumns="False" SelectionUnit="Cell"
Style="{DynamicResource DGHeaderStyle}">

Listing 14

The output looks as in Figure 8.

Figure 8

Summary

In this first article of the Mastering WPF DataGrid series, we saw how to show and hide a DataGrid column header and manage its appearance.

In the next article of this series, I will cover the basics of the DataGrid rows and their formatting.

<<Previous Article Next Article>>

3 Comments

Join the conversation! Your thoughts help the community grow.

R S6y ago
AutoGenerateColumns="False" then no data display in datagrid. How data is appeared in datagrid in your code ?
Knarf Vand7y ago
AutoGenerateColumns="False" should be set to true right ?
Vithal Wadje12y ago
good one,thanks for sharing