Saturday, July 28, 2012

WPF DataGrid ColumnHeaderStyle (LinearGradientBrush)

This post is part of series called WPF Styles where you can find many different styles for your WPF application.

Due to several requests to share XAML code of the DataGrid style that been used in my examples, today I'm sharing with you a ColumnHeaderStyle. Just to remind, this is how the DataGrid looks like:

WPF DataGrid ColumnHeaderStyle LinearGradientBrush

So the ColumnHeaderStyle for this DataGrid is following:
<Style x:Key="HeaderStyle" TargetType="DataGridColumnHeader">
    <Setter Property="Background" Value="{StaticResource HeaderBrush}" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="BorderBrush" Value="{StaticResource HeaderBorderBrush}" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="MinWidth" Value="0" />
    <Setter Property="MinHeight" Value="30" />
    <Setter Property="Cursor" Value="Hand" />

<LinearGradientBrush x:Key="HeaderBrush" StartPoint="0.5,0" EndPoint="0.5,1">
    <GradientStop Color="#FF6B8E95" Offset="0"/>
    <GradientStop Color="#FF14A7C1" Offset="1"/>
    <GradientStop Color="#FF1E424E" Offset="0.509"/>
    <GradientStop Color="#FF1D4855" Offset="0.542"/>
    <GradientStop Color="#FF1D4855" Offset="0.542"/>
    <GradientStop Color="#FF193A44" Offset="0.526"/>

<LinearGradientBrush x:Key="HeaderBorderBrush" StartPoint="0.5,0" EndPoint="0.5,1">
    <GradientStop Color="#FF1D1D1D" Offset="0.614"/>
    <GradientStop Color="#FF007F96" Offset="0.853"/>
    <GradientStop Color="#FF0AEAFA" Offset="1"/>
LinearGradientBrush adds some fancy look to the column headers. To apply the style for your DataGrid just write following:
<DataGrid Name="dataGrid1" ColumnHeaderStyle="{StaticResource HeaderStyle}"/>


  1. I have face the problem "the resource cannot be resolved ". pls help me.
    Thanks in Advance

    1. You probably have mistype in resource name.
      Check carefully resource names.

    2. Thanks for sharing man!
      This is awesome!!

  2. cambiarle el orden de los párrafos ,,primero declarar los LinearGradientBrush y después el Style

  3. '{DependencyProperty.UnsetValue}' is not a valid value for property 'BorderBrush this error shows in my code

  4. '{DependencyProperty.UnsetValue}' is not a valid value for property 'BorderBrush
    this shows error in my code