Printer Friendly Version      Send     
Click to Rate and Give Feedback
MSDN
MSDN Library
Web Development
Silverlight
Controls
 DataGrid Styles and Templates
Silverlight 2
DataGrid Styles and Templates
[This topic is pre-release documentation and is subject to change in future releases. Blank topics are included as placeholders.]

This topic describes the styles and templates for the DataGrid control. For more information, see Styling and Templating Overview.

The following table lists the elements for the DataGrid control.

DataGrid Element

Description

RootElement

The root of the control.

CellsPresenterElement

The placeholder for the DataGrid cells.

ColumnHeadersPresenterElement

The placeholder for the DataGrid column headers.

RowHeadersPresenterElement

The placeholder for the DataGrid row headers.

FocusVisualElement

The visual element that is used to show the focus around a cell.

HorizontalScrollBarElement

The ScrollBar used to scroll the DataGrid horizontally.

VerticalScrollBarElement

The ScrollBar used to scroll the DataGrid vertically.

The following table lists the states for the DataGrid control.

DataGrid State

Description

Normal State

The default state.

Unfocused State

The state that is triggered when the DataGrid loses the focus.

The following table lists the elements for a DataGridRow class.

DataGridRow Element

Description

RootElement

The root of the control.

CellsPresenterElement

The placeholder for the DataGridRow cells.

DetailsPresenterElement

The placeholder for the DataGridRow details section.

The following table lists the states for a DataGridRow class.

DataGridRow State

Description

Normal State

The default state.

Normal AlternatingRow State

The default state for rows with an odd-numbered index.

Normal DetailsVisible State

The state that is triggered when the details section of the row is visible.

Normal Editing State

The state that is triggered when the row is in edit mode.

Normal Selected State

The state that is triggered when the row is selected.

Unfocused Editing State

The state that is triggered when the row is in edit mode and the DataGrid loses the focus.

Unfocused Selected State

The state that is triggered when the row is selected and the DataGrid loses the focus.

MouseOver State

The state that is triggered when the mouse pointer is positioned over the row.

MouseOver Editing State

The state that is triggered when the row is in edit mode and the mouse pointer is positioned over the row.

MouseOver Selected State

The state that is triggered when the row is selected and the mouse pointer is positioned over the row.

MouseOver Unfocused Editing State

The state that is triggered when the DataGrid does not have the focus and the mouse pointer is positioned over the row.

MouseOver Unfocused Selected State

The state that is triggered when the row is selected, the DataGrid does not have the focus, and the mouse positioned is positioned over the row.

The following table lists the elements for the DataGridRowHeader class.

DataGridRowHeader Element

Description

RootElement

The root of the control.

The following table lists the states for the DataGridRowHeader class.

DataGridRowHeader State

Description

Normal State

The default state.

Normal CurrentRow State

The state that is triggered when the row associated with the header is the current row.

Normal EditingRow State

The state that is triggered when the row associated with the header is in edit mode.

Normal Selected State

The state that is triggered when the row associated with the header is selected.

Normal CurrentRow Selected State

The state that is triggered when the row associated with the header is the current row and is selected.

Unfocused EditingRow State

The state that is triggered when the row associated with the header is in edit mode and the DataGrid does not have the focus.

Unfocused Selected State

The state that is triggered when the row associated with the header is selected and the DataGrid does not have the focus.

Unfocused CurrentRow Selected State

The state that is triggered when the row associated with the header is the current row, is selected, and the DataGrid does not have the focus.

MouseOver State

The state that is triggered when the mouse pointer is positioned over the row associated with the header.

MouseOver CurrentRow State

The state that is triggered when the row associated with the header is the current row and the mouse pointer is positioned over the row.

MouseOver EditingRow State

The state that is triggered when the row associated with the header is in edit mode and the mouse pointer is positioned over the row.

MouseOver Selected State

The state that is triggered when the row associated with the header is selected and the mouse pointer is positioned over the row.

MouseOver CurrentRow Selected State

The state that is triggered when the row associated with the header is the current row, is selected, and the mouse pointer is positioned over the row.

MouseOver Unfocused EditingRow State

The state that is triggered when the row associated with the header is in edit mode, has the mouse pointer positioned over it, and the DataGrid does not have the focus.

MouseOver Unfocused Selected State

The state that is triggered when mouse pointer is positioned over the row associated with the header and the DataGrid does not have the focus.

MouseOver Unfocused CurrentRow Selected State

The state that is triggered when the row associated with the header is the current row, has the mouse pointer positioned over it, and the DataGrid does not have the focus.

The following table lists the elements for the DataGridColumnHeader class.

DataGridColumnHeader Element

Description

RootElement

The root of the control.

The following table lists the states for the DataGridColumnHeader class.

DataGridColumnHeader State

Description

Normal State

The default state.

MouseOver State

The state that is triggered when the mouse pointer is positioned over the column header.

Pressed State

The state that is triggered when the column header is pressed.

The following table lists the elements for the DataGridCell class.

DataGridCell Element

Description

RootElement

The root of the control.

The following table lists the states for the DataGridCell class.

DataGridCell State

Description

Normal State

The default state.

Normal Current State

The state that is triggered when the cell is the current cell.

Normal Editing State

The state that is triggered when the cell is in edit mode.

Unfocused Current State

The state that is triggered when the cell is the current cell and the DataGrid does not have the focus.

Unfocused Editing State

The state that is triggered when the cell is in edit mode and the DataGrid does not have the focus.

MouseOver State

The state that is triggered when the mouse pointer is positioned over the cell.

MouseOver Current State

The state that is triggered when the cell is the current cell and the mouse pointer is positioned over it.

MouseOver Editing State

The state that is triggered when the cell is in edit mode, and the mouse pointer is positioned over the cell.

MouseOver Unfocused Current State

The state that is triggered when the cell is the current cell, the mouse pointer is positioned over it, and the DataGrid does not have the focus.

MouseOver Unfocused Editing State

The state that is triggered when the cell is in edit mode, the mouse pointer is positioned over it, and the DataGrid does not have the focus.

The following example shows how to add custom styles as StaticResource values. For more information, see Styling and Templating Overview. In this example, the StaticResource values refer to x:Key attribute values that you must add to the Style elements when you modify them for your project.

XAML
<DataGrid x:Name="dataGrid1"
    Style="{StaticResource newDataGridStyle}" 
    ColumnHeaderStyle="{StaticResource newColumnHeaderStyle}"
    RowHeaderStyle="{StaticResource newRowHeaderStyle}"
    RowStyle="{StaticResource newRowStyle}" >
    <DataGrid.Columns>
        <DataGridTextBoxColumn 
            DisplayMemberBinding="{Binding LastName}"  
            CellStyle="{StaticResource newCellStyle}" />
    </DataGrid.Columns>
</DataGrid>

The following examples show the default styles and templates for the DataGrid, DataGridCell, DataGridRow, DataGridColumnHeader, and DataGridRowHeader classes. To customize these styles, add the following XAML to your project, add an x:Key attribute to each Style element, and then reference the styles as shown in the previous example.

XAML
<Style TargetType="local:DataGrid"
    xmlns:local="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    xmlns:primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows"
    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows">

    <Setter Property="RowBackground">
        <Setter.Value>
            <SolidColorBrush Color="#FFF2F2F2"/>
        </Setter.Value>
    </Setter>
    <Setter Property="AlternatingRowBackground">
        <Setter.Value>
            <SolidColorBrush Color="#FFFFFFFF"/>
        </Setter.Value>
    </Setter>
    <Setter Property="HorizontalGridlinesBrush">
        <Setter.Value>
            <SolidColorBrush Color="#FFACACAC"/>
        </Setter.Value>
    </Setter>
    <Setter Property="VerticalGridlinesBrush">
        <Setter.Value>
            <SolidColorBrush Color="#FFACACAC"/>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:DataGrid">
                <Border BorderBrush="#FF000000" BorderThickness="1">
                <Border BorderBrush="#FFFFFFFF" BorderThickness="1">
                <Border BorderBrush="#FFA4A4A4" BorderThickness="1">

                <Grid Name="RootElement">
                    <Grid.Resources>
                        <ControlTemplate x:Key="TopLeftHeaderTemplate" TargetType="local:DataGridColumnHeader">
                            <Grid Name="RootElement">
                                <Grid.Background>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0.28,0.71">
                                        <GradientStop Color="#FFF9FAFA" Offset="0"/>
                                        <GradientStop Name="StopColor2" Color="#FFEDF1F4" Offset="0.37259"/>
                                        <GradientStop Name="StopColor3" Color="#FFE2E8EF" Offset="0.372881"/>
                                        <GradientStop Name="StopColor4" Color="#FFC3C9CD" Offset="1"/>
                                    </LinearGradientBrush>
                                </Grid.Background>

                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>

                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>

                                <Line Stretch="Fill" Grid.Column="1" Grid.RowSpan="2" X1="0" X2="0" Y1="0" Y2="1" StrokeThickness="1" Stroke="#FFA4A4A4" />
                                <Line Stretch="Fill" Grid.ColumnSpan="2" Grid.Row="2" X1="0" X2="1" Y1="0" Y2="0" StrokeThickness="1" Stroke="#FFA4A4A4" />
                                <!--<Line Stretch="Fill" Grid.RowSpan="2" X1="0" X2="0" Y1="0" Y2="1" StrokeThickness="1" Stroke="{TemplateBinding SeparatorBrush}" Visibility="{TemplateBinding SeparatorVisibility}"/>-->
                                <Rectangle Stretch="Fill" StrokeThickness="2" Stroke="#FFFFFFFF" Grid.RowSpan="2"/>
                                <!-- TODO: Make this autosize
                                <Path Margin="1,1,1,0" Stretch="Fill" Data="F1 M 547.239,124.863L 430.795,124.863L 430.795,135.106C 447.845,138.848 467.753,140.997 489.017,140.997C 510.281,140.997 530.188,138.848 547.239,135.106L 547.239,124.863 Z ">
                                    <Path.Fill>
                                        <LinearGradientBrush StartPoint="0.5125,-0.0864589" EndPoint="0.5125,1.00202">
                                            <GradientStop Color="#B3FFFFFF" Offset="0"/>
                                            <GradientStop Color="#3CFFFFFF" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Path.Fill>
                                </Path>
                                -->
                            </Grid>
                        </ControlTemplate>

                        <ControlTemplate x:Key="TopRightHeaderTemplate" TargetType="local:DataGridColumnHeader">
                            <Grid Name="RootElement">
                                <Grid.Background>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0.28,0.71">
                                        <GradientStop Color="#FFF9FAFA" Offset="0"/>
                                        <GradientStop Name="StopColor2" Color="#FFEDF1F4" Offset="0.37259"/>
                                        <GradientStop Name="StopColor3" Color="#FFE2E8EF" Offset="0.372881"/>
                                        <GradientStop Name="StopColor4" Color="#FFC3C9CD" Offset="1"/>
                                    </LinearGradientBrush>
                                </Grid.Background>

                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>

                                <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>

                                <!--<Line Stretch="Fill" Grid.Column="1" Grid.RowSpan="2" X1="0" X2="0" Y1="0" Y2="1" StrokeThickness="1" Stroke="#FFA4A4A4" />-->
                                <Line Stretch="Fill" Grid.ColumnSpan="2" Grid.Row="2" X1="0" X2="1" Y1="0" Y2="0" StrokeThickness="1" Stroke="#FFA4A4A4" />
                                <Line Stretch="Fill" Grid.RowSpan="2" X1="0" X2="0" Y1="0" Y2="1" StrokeThickness="1" Stroke="{TemplateBinding SeparatorBrush}" Visibility="{TemplateBinding SeparatorVisibility}"/>
                                <Rectangle Stretch="Fill" StrokeThickness="2" Stroke="#FFFFFFFF" Grid.Column="1" Grid.RowSpan="2"/>
                                <!-- TODO: Make this autosize
                                <Path Grid.Column="1" Margin="1,1,1,0" Stretch="Fill" Data="F1 M 547.239,124.863L 430.795,124.863L 430.795,135.106C 447.845,138.848 467.753,140.997 489.017,140.997C 510.281,140.997 530.188,138.848 547.239,135.106L 547.239,124.863 Z ">
                                    <Path.Fill>
                                        <LinearGradientBrush StartPoint="0.5125,-0.0864589" EndPoint="0.5125,1.00202">
                                            <GradientStop Color="#B3FFFFFF" Offset="0"/>
                                            <GradientStop Color="#3CFFFFFF" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Path.Fill>
                                </Path>
                                -->
                            </Grid>
                        </ControlTemplate>
                    </Grid.Resources>

                    <Grid.Background>
                        <SolidColorBrush Color="Transparent" />
                    </Grid.Background>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <!-- Row 0 -->
                    <local:DataGridColumnHeader Name="TopLeftCornerHeaderElement" Template="{StaticResource TopLeftHeaderTemplate}" />
                    <local:DataGridColumnHeadersPresenter Name="ColumnHeadersPresenterElement" Grid.Column="1"/>
                    <local:DataGridColumnHeader Name="TopRightCornerHeaderElement" Grid.Column="2" Template="{StaticResource TopRightHeaderTemplate}" />

                    <!-- Row 1 -->
                    <local:DataGridRowsPresenter Name="RowsPresenterElement" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" />
                    <primitives:ScrollBar Name="VerticalScrollbarElement" Orientation="Vertical" Grid.Column="2" Grid.Row="1" Width="18" />

                    <!-- Row 2 -->
                    <Rectangle Fill="#FFE7E7E7" Grid.Row="2" Grid.ColumnSpan="2" />
                    <primitives:ScrollBar Name="HorizontalScrollbarElement" Orientation="Horizontal" HorizontalAlignment="Right" Grid.Column="1" Grid.Row="2" Height="18" />
                    <Rectangle Fill="#FFE7E7E7" Grid.Column="2" Grid.Row="2" />
                 </Grid>
                </Border>
                </Border>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

XAML
<Style TargetType="local:DataGridCell"
    xmlns:local="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows">

    <!-- TODO: Remove this workaround to force MouseLeftButtonDown event to be raised when root element is clicked. -->
    <Setter Property="Background" Value="Transparent" /> 
    <Setter Property="IsEnabled" Value="true" />
    <Setter Property="Foreground" Value="#FF000000" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Stretch" />
    <Setter Property="Cursor" Value="Arrow" />
    <Setter Property="TextAlignment" Value="Left" />
    <Setter Property="TextWrapping" Value="NoWrap" />
    <Setter Property="FontFamily" Value="Trebuchet MS" />
    <Setter Property="FontSize" Value="12" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:DataGridCell">
                <Grid Name="RootElement" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{TemplateBinding Background}">
                    <Grid.Resources>
                        <Storyboard x:Key="Normal State">
                            <DoubleAnimation Duration="0:0:0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="0" />
                        </Storyboard>
                        <Storyboard x:Key="Normal Current State">
                            <DoubleAnimation Duration="0:0:0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1" />
                        </Storyboard>
                    </Grid.Resources>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <controls:ContentPresenter
                        Content="{TemplateBinding Content}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        Cursor="{TemplateBinding Cursor}"
                        Background="{TemplateBinding Background}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        Padding="{TemplateBinding Padding}"
                        TextAlignment="{TemplateBinding TextAlignment}"
                        TextWrapping="{TemplateBinding TextWrapping}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

                    <!-- TODO Refactor this if SL ever gets a FocusVisualStyle on FrameworkElement -->
                    <Rectangle Name="FocusVisualElement" Stroke="#FF400000" StrokeDashArray=".2 4"
                        HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeDashCap="Round" 
                        IsHitTestVisible="false" Opacity="0" />

                    <Rectangle Name="RightGridlineElement" Grid.Column="1" VerticalAlignment="Stretch" Width="1" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

XAML
    <Style TargetType="local:DataGridRow"
        xmlns:local="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data">

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:DataGridRow">
                    <Grid Name="RootElement">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <Grid.Resources>
                            <Storyboard x:Key="Normal State">
                                <ColorAnimation Storyboard.TargetName="fillStop0" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#00000000"/>
                                <ColorAnimation Storyboard.TargetName="fillStop1" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#00000000"/>
                                <ColorAnimation Storyboard.TargetName="fillStop2" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#00000000"/>

                                <ColorAnimation Storyboard.TargetName="strokeStop0" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#00000000"/>
                                <ColorAnimation Storyboard.TargetName="strokeStop1" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#00000000"/>
                            </Storyboard>
                            <Storyboard x:Key="Normal AlternatingRow State">
                                <ColorAnimation Storyboard.TargetName="fillStop0" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#00000000"/>
                                <ColorAnimation Storyboard.TargetName="fillStop1" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#00000000"/>
                                <ColorAnimation Storyboard.TargetName="fillStop2" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#00000000"/>

                                <ColorAnimation Storyboard.TargetName="strokeStop0" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#00000000"/>
                                <ColorAnimation Storyboard.TargetName="strokeStop1" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#00000000"/>
                            </Storyboard>
                            <Storyboard x:Key="MouseOver State">
                                <ColorAnimation Storyboard.TargetName="fillStop0" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#FFF9FAFA"/>
                                <ColorAnimation Storyboard.TargetName="fillStop1" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#FFE6EFF7"/>
                                <ColorAnimation Storyboard.TargetName="fillStop2" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#FFD3E4F5"/>

                                <ColorAnimation Storyboard.TargetName="strokeStop0" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#00000000"/>
                                <ColorAnimation Storyboard.TargetName="strokeStop1" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#00000000"/>
                            </Storyboard>
                            <Storyboard x:Key="Normal Selected State">
                                <ColorAnimation Storyboard.TargetName="fillStop0" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#FFD9EFFF"/>
                                <ColorAnimation Storyboard.TargetName="fillStop1" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#FFBDD2E6"/>
                                <ColorAnimation Storyboard.TargetName="fillStop2" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#FFA1B6CD"/>

                                <ColorAnimation Storyboard.TargetName="strokeStop0" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#FF77B9EB"/>
                                <ColorAnimation Storyboard.TargetName="strokeStop1" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#FF4887CD"/>
                            </Storyboard>
                            <Storyboard x:Key="MouseOver Selected State">
                                <ColorAnimation Storyboard.TargetName="fillStop0" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#FFF9FAFA"/>
                                <ColorAnimation Storyboard.TargetName="fillStop1" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#FFE6EFF7"/>
                                <ColorAnimation Storyboard.TargetName="fillStop2" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#FFD3E4F5"/>

                                <ColorAnimation Storyboard.TargetName="strokeStop0" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#FF77B9EB"/>
                                <ColorAnimation Storyboard.TargetName="strokeStop1" Storyboard.TargetProperty="Color" Duration="00:00:0.001" To="#FF4887CD"/>
                            </Storyboard>
                            <Storyboard x:Key="Normal DetailsVisible State">
                                <DoubleAnimation Storyboard.TargetName="DetailsPresenterElement" Storyboard.TargetProperty="Height" Duration="00:00:0.1" />
                            </Storyboard>
                        </Grid.Resources>

                        <Rectangle Grid.RowSpan="2" Grid.ColumnSpan="2" Name="overlayRectangle" StrokeThickness="1">
                            <Rectangle.Fill>
                                <LinearGradientBrush StartPoint="0.316111,0.0165521" EndPoint="0.316111,0.724833">
                                    <GradientStop Name="fillStop0" Color="#00000000" Offset="0"/>
                                    <GradientStop Name="fillStop1" Color="#00000000" Offset="0.682203"/>
                                    <GradientStop Name="fillStop2" Color="#00000000" Offset="1"/>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                            <Rectangle.Stroke>
                                <LinearGradientBrush StartPoint="0.318122,0.0360108" EndPoint="0.318122,0.715784">
                                    <GradientStop Name="strokeStop0" Color="#00000000" Offset="0"/>
                                    <GradientStop Name="strokeStop1" Color="#00000000" Offset="1"/>
                                </LinearGradientBrush>
                            </Rectangle.Stroke>
                        </Rectangle>

                        <local:DataGridRowHeader Grid.RowSpan="3" Name="RowHeaderElement" />
                        <local:DataGridCellsPresenter Grid.Column="1" Name="CellsPresenterElement" />
                        <local:DataGridDetailsPresenter Grid.Row="1" Grid.Column="1" Name="DetailsPresenterElement" />
                        <Rectangle Grid.Row="2" Grid.Column="1" Name="BottomGridlineElement" HorizontalAlignment="Stretch" Height="1" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

XAML
<Style TargetType="local:DataGridColumnHeader"
    xmlns:local="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows">

    <Setter Property="SeparatorBrush">
        <Setter.Value>
            <SolidColorBrush Color="#FFA4A4A4"/>
        </Setter.Value>
    </Setter>
    <Setter Property="SeparatorVisibility" Value="Visible"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:DataGridColumnHeader">
                <Grid Name="RootElement">
                    <Grid.Background>
                        <LinearGradientBrush StartPoint="0.276463,-0.00385181" EndPoint="0.276463,0.71">
                            <GradientStop Color="#FFF9FAFA" Offset="0"/>
                            <GradientStop Name="StopColor2" Color="#FFEDF1F4" Offset="0.37259"/>
                            <GradientStop Name="StopColor3" Color="#FFE2E8EF" Offset="0.372881"/>
                            <GradientStop Name="StopColor4" Color="#FFC3C9CD" Offset="1"/>
                        </LinearGradientBrush>
                    </Grid.Background>

                    <Grid.Resources>
                        <Storyboard x:Key="Normal State">
                            <ColorAnimation Storyboard.TargetName="StopColor2" Storyboard.TargetProperty="(Color)" Duration="00:00:0.3" To="#FFEDF1F4"/>
                            <ColorAnimation Storyboard.TargetName="StopColor3" Storyboard.TargetProperty="(Color)" Duration="00:00:0.3" To="#FFE2E8EF"/>
                            <ColorAnimation Storyboard.TargetName="StopColor4" Storyboard.TargetProperty="(Color)" Duration="00:00:0.3" To="#FFC3C9CD"/>
                        </Storyboard>
                        <Storyboard x:Key="MouseOver State">
                            <ColorAnimation Storyboard.TargetName="StopColor2" Storyboard.TargetProperty="(Color)" Duration="00:00:0.3" To="#FFE6EFF7"/>
                            <ColorAnimation Storyboard.TargetName="StopColor3" Storyboard.TargetProperty="(Color)" Duration="00:00:0.3" To="#FFD3E4F5"/>
                            <ColorAnimation Storyboard.TargetName="StopColor4" Storyboard.TargetProperty="(Color)" Duration="00:00:0.3" To="#FF87A5BA"/>
                        </Storyboard>
                        <Storyboard x:Key="Unsorted State">
                            <DoubleAnimation Storyboard.TargetName="SortIconElement" Storyboard.TargetProperty="Opacity" Duration="00:00:0.3" To="0.0"/>
                            <DoubleAnimation Storyboard.TargetName="SortIconTransform" Storyboard.TargetProperty="ScaleY" BeginTime="00:00:0.3" Duration="00:00:0.0" To="1"/>
                        </Storyboard>
                        <Storyboard x:Key="SortedAscending State">
                            <DoubleAnimation Storyboard.TargetName="SortIconElement" Storyboard.TargetProperty="Opacity" Duration="00:00:0.3" To="1.0"/>
                            <DoubleAnimation Storyboard.TargetName="SortIconTransform" Storyboard.TargetProperty="ScaleY" Duration="00:00:0.3" To="-1"/>
                        </Storyboard>
                        <Storyboard x:Key="SortedDescending State">
                            <DoubleAnimation Storyboard.TargetName="SortIconElement" Storyboard.TargetProperty="Opacity" Duration="00:00:0.3" To="1.0"/>
                            <DoubleAnimation Storyboard.TargetName="SortIconTransform" Storyboard.TargetProperty="ScaleY" Duration="00:00:0.3" To="1"/>
                        </Storyboard>
                    </Grid.Resources>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <Rectangle Stretch="Fill" StrokeThickness="2" Stroke="#FFFFFFFF" Grid.ColumnSpan="2" Grid.RowSpan="2"/>
                    <Rectangle Grid.Row="2" Grid.ColumnSpan="3" Height="1" HorizontalAlignment="Stretch" Fill="#FFA4A4A4" />
                    <Rectangle Grid.RowSpan="2" Grid.Column="2" Width="1" VerticalAlignment="Stretch" Fill="{TemplateBinding SeparatorBrush}" Visibility="{TemplateBinding SeparatorVisibility}" />
                    <!-- TODO: Put this back when SL gets ViewBox; Currently this path kills autosizing
                    <Path Margin="1,1,1,0" Stretch="Fill" Grid.ColumnSpan="2" Data="F1 M 547.239,124.863L 430.795,124.863L 430.795,135.106C 447.845,138.848 467.753,140.997 489.017,140.997C 510.281,140.997 530.188,138.848 547.239,135.106L 547.239,124.863 Z ">
                        <Path.Fill>
                            <LinearGradientBrush StartPoint="0.5125,-0.0864589" EndPoint="0.5125,1.00202">
                                <GradientStop Color="#B3FFFFFF" Offset="0"/>
                                <GradientStop Color="#3CFFFFFF" Offset="1"/>
                            </LinearGradientBrush>
                        </Path.Fill>
                    </Path>
                    -->

                    <controls:ContentPresenter Margin="3,0,3,0" Content="{TemplateBinding Content}" VerticalAlignment="Center" />
                    <Path Name="SortIconElement" Margin="3,0,3,0" Opacity="0" Grid.Column="1" Stretch="Uniform" Width="8" Data="F1 M -5.215,0.0L 5.215,0.0L 0,6.099L -5.215,0.0 Z ">
                        <Path.Fill>
                            <SolidColorBrush Color="#FF313131" />
                        </Path.Fill>
                        <Path.RenderTransform>
                            <ScaleTransform Name="SortIconTransform" CenterX="4" CenterY="2.5" ScaleX="1" ScaleY="1" />
                        </Path.RenderTransform>
                    </Path>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

XAML
<Style TargetType="local:DataGridRowHeader"
    xmlns:local="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows">

    <Setter Property="SeparatorBrush">
        <Setter.Value>
            <SolidColorBrush Color="#FFA4A4A4"/>
        </Setter.Value>
    </Setter>
    <Setter Property="SeparatorVisibility" Value="Visible"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:DataGridRowHeader">
                <Grid Name="RootElement">
                    <Grid.Resources>
                        <Storyboard x:Key="Normal State">
                            <DoubleAnimation Storyboard.TargetName="MouseOverRectangle" Storyboard.TargetProperty="Opacity" Duration="00:00:0.2" To="0"/>
                            <DoubleAnimation Storyboard.TargetName="SelectedRectangle" Storyboard.TargetProperty="Opacity" Duration="00:00:0.2"<