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

No comments:

Post a Comment