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

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

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

7 comments:

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

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

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

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

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

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

    ReplyDelete