Export (0) Print
Expand All

DataGrid Styles and Templates

Silverlight

This topic describes the styles and templates for the DataGrid control. You can modify the default ControlTemplate to give the control a unique appearance. For more information, see Customizing the Appearance of an Existing Control by Using a ControlTemplate.

The following table lists the named parts for the DataGrid control.

Part

Type

Description

Root

Grid

The root of the control.

BackgroundGradient

Rectangle

The background gradient for the column header when the column is being dragged from one position to another. For more information, see DragIndicatorStyle.

BackgroundRectangle

Rectangle

The placeholder for the column header when the column is being dragged from one position to another. For more information, see DragIndicatorStyle.

BottomLeftCorner

Rectangle

The leftmost cell in the bottom row when a horizontal scroll bar and row headers are visible. This element appears to the left of the horizontal scroll bar and underneath the row header.

BottomRightCorner

Rectangle

The rightmost space in the bottom row when the there is a horizontal scroll bar. This element appears to the right of the horizontal scroll bar and underneath the vertical scroll bar.

ColumnHeadersAndRowsSeparator

Rectangle

The visual element that is used to separate the column headers and the data rows.

ColumnHeadersPresenter

DataGridColumnHeadersPresenter

The placeholder for column headers.

DisabledVisualElement

Border

The visual element that is used to make the control appear dimmed when Control.IsEnabled is false.

FrozenColumnScrollBarSpacer

Rectangle

The space that is to the left of the horizontal scroll bar and underneath the frozen columns when FrozenColumnCount is greater than zero.

HorizontalScrollBar

ScrollBar

The horizontal scroll bar.

RowsPresenter

DataGridRowsPresenter

The placeholder for rows.

SortIcon

Path

The sort direction indicator that is shown when a sorted column is being dragged from one position to another. For more information, see DragIndicatorStyle.

TopLeftCornerHeader

DataGridColumnHeader

The leftmost cell in the header row, at the top of the row-header column.

TopRightCornerHeader

DataGridColumnHeader

The rightmost cell in the header row, at the top of the vertical scroll bar column.

ValidationSummary

ValidationSummary

The control used to display a list of validation errors.

VerticalScrollBar

ScrollBar

The vertical scroll bar.

The following table lists the states for the DataGrid control.

DataGrid State

VisualStateGroupName

Description

Normal

CommonStates

The default state.

Disabled

CommonStates

The state that is triggered when Control.IsEnabled is false.

Valid

ValidationStates

The state that is triggered when DataGrid.IsValid is true.

Invalid

ValidationStates

The state that is triggered when DataGrid.IsValid is false.

Unsorted

SortStates

The state that is triggered when data in a column is not sorted and the column is being dragged from one position to another.

SortAscending

SortStates

The state that is triggered when data in a column is sorted in ascending order and the column is being dragged from one position to another.

SortDescending

SortStates

The state that is triggered when data in a column is sorted in descending order and the column is being dragged from one position to another.

The following table lists the Style properties of the DataGrid control. You must set the TargetType property when you create a Style.

Property Name

Target Type

Description

CellStyle

DataGridCell

The style that is used when rendering cells.

ColumnHeaderStyle

DataGridColumnHeader

The style that is used when rendering column headers.

DragIndicatorStyle

ContentControl

The style that is used when rendering the drag indicator that is displayed while dragging column headers.

DropLocationIndicatorStyle

ContentControl

The style that is used when rendering the drop location indicator that is displayed after dragging column headers.

RowHeaderStyle

DataGridRowHeader

The style that is used when rendering row headers.

RowStyle

DataGridRow

The style that is used when rendering rows.

RowGroupHeaderStyles

DataGridRowGroupHeader

The collection of styles that is used when rendering row group headers.

The following table lists the named parts for a DataGridRow class.

Part

Type

Description

Root

DataGridFrozenGrid

The root of the control.

BackgroundRectangle

Rectangle

The background rectangle for the row.

BottomGridLine

Rectangle

The bottom gridline.

CellsPresenter

DataGridCellsPresenter

The placeholder for cells.

DetailsPresenter

DataGridDetailsPresenter

The placeholder for the row details section.

InvalidVisualElement

Rectangle

The visual element that is used to display the error indicator when DataGridRow.IsValid is false.

RowHeader

DataGridRowHeader

The row header is the leftmost cell. It is used as a row selector and current row indicator.

The following table lists the states for the DataGridRow class.

DataGridRow State

VisualStateGroupName

Description

Normal

CommonStates

The default state.

NormalAlternatingRow

CommonStates

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

NormalEditing

CommonStates

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

NormalSelected

CommonStates

The state that is triggered when the row is selected.

MouseOver

CommonStates

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

MouseOverEditing

CommonStates

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

MouseOverSelected

CommonStates

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

MouseOverUnfocusedEditing

CommonStates

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

MouseOverUnfocusedSelected

CommonStates

The state that is triggered when the row is selected, the mouse pointer is positioned over the row, and the DataGrid loses the focus.

UnfocusedEditing

CommonStates

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

UnfocusedSelected

CommonStates

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

Valid

ValidationStates

The state that is triggered when DataGridRow.IsValid is true.

Invalid

ValidationStates

The state that is triggered when DataGridRow.IsValid is false.

The following table lists the Style properties of the DataGridRow class. You must set the TargetType property when you create a Style.

Property Name

Target Type

Description

HeaderStyle

DataGridRowHeader

The style that is used when rendering this row header.

The following table lists the named parts for the DataGridRowHeader class.

Part

Type

Description

Root

Grid

The root of the control.

BackgroundRectangle

Rectangle

The background rectangle for the row header.

CurrentRowGlyph

Path

The glyph shown in the row header to indicate that a row is selected.

EditingRowGlyph

Path

The glyph shown in the row header to indicate that a row is in editing mode.

HorizontalSeparator

Rectangle

The visual element that is used to separate the column of row headers and the data columns.

RowInvalidVisualElement

Rectangle

The visual element that is used to display the error indicator when DataGridRow.IsValid is false.

The following table lists the states for the DataGridRowHeader class.

DataGridRowHeader State

VisualStateGroupName

Description

Normal

CommonStates

The default state.

NormalCurrentRow

CommonStates

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

NormalCurrentRowSelected

CommonStates

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

NormalEditingRow

CommonStates

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

NormalSelected

CommonStates

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

MouseOver

CommonStates

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

MouseOverCurrentRow

CommonStates

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.

MouseOverCurrentRowSelected

CommonStates

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.

MouseOverEditingRow

CommonStates

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.

MouseOverSelected

CommonStates

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

MouseOverUnfocusedCurrentRowSelected

CommonStates

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

MouseOverUnfocusedEditingRow

CommonStates

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

MouseOverUnfocusedSelected

CommonStates

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

UnfocusedCurrentRowSelected

CommonStates

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

UnfocusedEditingRow

CommonStates

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

UnfocusedSelected

CommonStates

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

RowValid

ValidationStates

The state that is triggered when DataGridRow.IsValid is true.

RowInvalid

ValidationStates

The state that is triggered when DataGridRow.IsValid is false.

The following table lists the named parts for the DataGridRowGroupHeader class.

Part

Type

Description

Root

Grid

The root of the control.

CollapsedArrow

Path

The indicator that is displayed in the row group header when the group is collapsed.

ExpandedArrow

Path

The indicator that is displayed in the row group header when the group is expanded.

ExpanderButton

ToggleButton

The button that is used to expand and collapse the row group.

FocusVisual

Rectangle

The visual element that is used to indicate the row group header has focus.

IndentSpacer

Rectangle

The visual element used to indent sub groups. See SublevelIndent.

ItemCountElement

TextBlock

The text block that is used to display the item count in the row group header. See ItemCountVisibility.

PropertyNameElement

TextBlock

The text block that is used to display the property name in the row group header. See PropertyNameVisibility.

RowHeader

DataGridRowHeader

The row header is the leftmost cell. It is used as a row selector and current row indicator.

The following table lists the states for the DataGridRowGroupHeader class.

DataGridRowHeader State

VisualStateGroupName

Description

Regular

CurrentStates

The default state.

Current

CurrentStates

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

Checked

CheckStates

The state that is triggered when the ExpanderButton part is checked.

Unchecked

CheckStates

The state that is triggered when the ExpanderButton part is unchecked.

Normal

CommonStates

The default state of ExpanderButton part.

Disabled

CommonStates

The state that is triggered when the ExpanderButton part is disabled.

MouseOver

CommonStates

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

Pressed

CommonStates

The state that is triggered when the mouse pointer is positioned over the ExpanderButton part and the mouse left button is down.

The following table lists the Style properties of the DataGridRowGroupHeader class. You must set the TargetType property when you create a Style.

Property Name

Target Type

Description

HeaderStyle

DataGridRowHeader

The style that is used when rendering this row group header.

The following table lists the named parts for the DataGridColumnHeader class.

Part

Type

Description

Root

Grid

The root of the control.

BackgroundGradient

Rectangle

The background gradient for the column headers (excludes top-left corner and top-right corner).

BackgroundRectangle

Rectangle

The background rectangle for the column headers (excludes top-left corner and top-right corner).

SortIcon

Path

The sort direction indicator icon that is displayed when a column is sorted.

VerticalSeparator

Rectangle

The visual element that is used to separate each column header cell from the column headers next to it.

The following table lists the states for the DataGridColumnHeader class.

DataGridColumnHeader State

VisualStateGroupName

Description

Normal

CommonStates

The default state.

MouseOver

CommonStates

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

Pressed

CommonStates

The state that is triggered when the mouse pointer is positioned over the column header and the left mouse button is down.

SortAscending

SortStates

The state that is triggered when a column is sorted in ascending order.

SortDescending

SortStates

The state that is triggered when a column is sorted in descending order.

Unsorted

SortStates

The state that is triggered when a sorted column becomes unsorted.

The following table lists the named parts for the DataGridCell class.

Part

Type

Description

Root

Grid

The root of the control.

FocusVisual

Rectangle

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

InvalidVisualElement

Rectangle

The visual element that is used to display the error indicator when DataGridCell.IsValid is false.

RightGridLine

Rectangle

The visual element that borders the right side of a cell.

The following table lists the states for the DataGridCell class.

DataGridCell State

VisualStateGroupName

Description

Regular

CurrentStates

The default state.

Current

CurrentStates

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

Normal

CommonStates

The default common state.

MouseOver

CommonStates

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

Focused

FocusStates

The state that is triggered when the cell has focus.

Unfocused

FocusStates

The state that is triggered when the cell loses focus.

Display

InteractionStates

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

Editing

InteractionStates

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

Selected

SelectionStates

The state that is triggered when the cell is selected.

Unselected

SelectionStates

The state that is triggered when the cell is not selected.

Valid

ValidationStates

The state that is triggered when DataGridCell.IsValid is true.

Invalid

ValidationStates

The state that is triggered when DataGridCell.IsValid is false.

The following shows the XML namespace mappings that you have to specify when you work with styles and templates.

<!-- XML Namespace mappings. -->
xmlns:local="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
xmlns:primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows"
xmlns:localprimitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"
xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
Important noteImportant Note:

The default templates for controls in Silverlight 4 still use the Silverlight 3-style prefixes, such as controls: and data: instead of sdk:. This is because the default control templates support Silverlight 3 and Silverlight 4 simultaneously. For more information, see Prefixes and Mappings for Silverlight Libraries.

NoteNote:

The default templates still specify the vsm: XML namespace mapping for the VisualStateManager element for legacy reasons. You can however, use the VisualStateManager element without specifying the vsm: mapping.

The following XAML show the default styles and templates for the DataGrid, DataGridRow, DataGridRowHeader, DataGridColumnHeader, and DataGridCell classes.


<Style TargetType="local:DataGrid">
    <Setter Property="RowBackground" Value="#AAEAEFF4" />
    <Setter Property="AlternatingRowBackground" Value="#00FFFFFF" />
    <Setter Property="Background" Value="#FFFFFFFF" />
    <Setter Property="HeadersVisibility" Value="Column" />
    <Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
    <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
    <Setter Property="SelectionMode" Value="Extended" />
    <Setter Property="CanUserReorderColumns" Value="True" />
    <Setter Property="CanUserResizeColumns" Value="True" />
    <Setter Property="CanUserSortColumns" Value="True" />
    <Setter Property="AutoGenerateColumns" Value="True" />
    <Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected" />
    <Setter Property="BorderBrush">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFA3AEB9" Offset="0"/>
                <GradientStop Color="#FF8399A9" Offset="0.375"/>
                <GradientStop Color="#FF718597" Offset="0.375"/>
                <GradientStop Color="#FF617584" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="DragIndicatorStyle">
        <Setter.Value>
            <!-- TODO: Change the TargetType to Control when the fix Jolt bugs 18719 is verified -->
            <Style TargetType="ContentControl">
                <Setter Property="Foreground" Value="#7FFFFFFF" />
                <Setter Property="Template">
                    <Setter.Value>
                        <!-- TODO: Change the TargetType to Control when the fix Jolt bugs 18719 is verified -->
                        <ControlTemplate TargetType="ContentControl">
                            <Grid>
                                <vsm:VisualStateManager.VisualStateGroups>
                                    <vsm:VisualStateGroup x:Name="SortStates">
                                        <vsm:VisualState x:Name="Unsorted" />
                                        <vsm:VisualState x:Name="SortAscending">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0"/>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="SortDescending">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0"/>
                                                <DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="(RenderTransform).ScaleY" Duration="0" To="-.9"/>
                                            </Storyboard>
                                        </vsm:VisualState>
                                    </vsm:VisualStateGroup>
                                </vsm:VisualStateManager.VisualStateGroups>

                                <Rectangle x:Name="BackgroundRectangle" Stretch="Fill" Fill="#66808080" Grid.ColumnSpan="2" />

                                <Rectangle x:Name="BackgroundGradient" Stretch="Fill" Grid.ColumnSpan="2" Opacity="0" >
                                    <Rectangle.Fill>
                                        <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                            <GradientStop Color="#FFFFFFFF" Offset="0.015" />
                                            <GradientStop Color="#F9FFFFFF" Offset="0.375" />
                                            <GradientStop Color="#E5FFFFFF" Offset="0.6" />
                                            <GradientStop Color="#C6FFFFFF" Offset="1" />
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>

                                <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition/>
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>

                                    <ContentPresenter Content="{TemplateBinding Content}"/>

                                    <Path Grid.Column="1" Name="SortIcon" Fill="#7FFFFFFF" RenderTransformOrigin=".5,.5" HorizontalAlignment="Left" VerticalAlignment="Center" Opacity="0" Stretch="Uniform" Width="8" Margin="4,0,0,0" Data="F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z ">
                                        <Path.RenderTransform>
                                            <ScaleTransform ScaleX=".9" ScaleY=".9" />
                                        </Path.RenderTransform>
                                    </Path>
                                </Grid>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="DropLocationIndicatorStyle">
        <Setter.Value>
            <Style TargetType="ContentControl">
                <Setter Property="Background" Value="#FF3F4346"/>
                <Setter Property="Width" Value="2"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ContentControl">
                            <Rectangle Fill="{TemplateBinding Background}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="GridLinesVisibility" Value="Vertical" />
    <Setter Property="HorizontalGridLinesBrush" Value="#FFC9CACA" />
    <Setter Property="IsTabStop" Value="True" />
    <Setter Property="VerticalGridLinesBrush" Value="#FFC9CACA" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:DataGrid">
                <Grid>
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="Normal"/>
                            <vsm:VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                    <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="2">
                        <Grid Name="Root" Background="{TemplateBinding Background}">
                            <Grid.Resources>
                                <!--Start: TopLeftHeaderTemplate-->
                                <ControlTemplate x:Key="TopLeftHeaderTemplate" TargetType="localprimitives:DataGridColumnHeader">
                                    <Grid Name="Root">
                                        <Grid.RowDefinitions>
                                            <RowDefinition/>
                                            <RowDefinition/>
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>
                                        <Border BorderThickness="0,0,1,0" BorderBrush="#FFC9CACA" Background="#FF1F3B53" Grid.RowSpan="2">
                                            <Rectangle Stretch="Fill" StrokeThickness="1">
                                                <Rectangle.Fill>
                                                    <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                                        <GradientStop Color="#FCFFFFFF" Offset="0.015" />
                                                        <GradientStop Color="#F7FFFFFF" Offset="0.375" />
                                                        <GradientStop Color="#E5FFFFFF" Offset="0.6" />
                                                        <GradientStop Color="#D1FFFFFF" Offset="1" />
                                                    </LinearGradientBrush>
                                                </Rectangle.Fill>
                                            </Rectangle>
                                        </Border>
                                        <Rectangle VerticalAlignment="Bottom" Width="Auto" StrokeThickness="1" Height="1" Fill="#FFDBDCDC" Grid.RowSpan="2"/>
                                    </Grid>
                                </ControlTemplate>
                                <!--End: TopLeftHeaderTemplate-->

                                <!--Start: TopRightHeaderTemplate-->
                                <ControlTemplate x:Key="TopRightHeaderTemplate" TargetType="localprimitives:DataGridColumnHeader">
                                    <Grid Name="RootElement">
                                        <Grid.RowDefinitions>
                                            <RowDefinition/>
                                            <RowDefinition/>
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>
                                        <Border BorderThickness="1,0,0,0" BorderBrush="#FFC9CACA" Background="#FF1F3B53" Grid.RowSpan="2">
                                            <Rectangle Stretch="Fill">
                                                <Rectangle.Fill>
                                                    <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                                        <GradientStop Color="#FCFFFFFF" Offset="0.015" />
                                                        <GradientStop Color="#F7FFFFFF" Offset="0.375" />
                                                        <GradientStop Color="#E5FFFFFF" Offset="0.6" />
                                                        <GradientStop Color="#D1FFFFFF" Offset="1" />
                                                    </LinearGradientBrush>
                                                </Rectangle.Fill>
                                            </Rectangle>
                                        </Border>
                                    </Grid>
                                </ControlTemplate>
                                <!--End: TopRightHeaderTemplate-->
                            </Grid.Resources>

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

                            <localprimitives:DataGridColumnHeader Name="TopLeftCornerHeader" Template="{StaticResource TopLeftHeaderTemplate}" Width="22" />
                            <localprimitives:DataGridColumnHeadersPresenter Name="ColumnHeadersPresenter" Grid.Column="1"/>
                            <localprimitives:DataGridColumnHeader Name="TopRightCornerHeader" Grid.Column="2" Template="{StaticResource TopRightHeaderTemplate}" />
                            <Rectangle Name="ColumnHeadersAndRowsSeparator" Grid.ColumnSpan="3" VerticalAlignment="Bottom" Width="Auto" StrokeThickness="1" Height="1" Fill="#FFC9CACA"/>

                            <localprimitives:DataGridRowsPresenter Name="RowsPresenter" Grid.ColumnSpan="2" Grid.Row="1" />
                            <Rectangle Name="BottomRightCorner" Fill="#FFE9EEF4" Grid.Column="2" Grid.Row="2" />
                            <Rectangle Name="BottomLeftCorner" Fill="#FFE9EEF4" Grid.Row="2" Grid.ColumnSpan="2" />
                            <ScrollBar Name="VerticalScrollbar" Orientation="Vertical" Grid.Column="2" Grid.Row="1" Width="18" Margin="0,-1,-1,-1"/>

                            <Grid Grid.Column="1" Grid.Row="2">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <Rectangle Name="FrozenColumnScrollBarSpacer" />
                                <ScrollBar Name="HorizontalScrollbar" Grid.Column="1" Orientation="Horizontal" Height="18" Margin="-1,0,-1,-1"/>
                            </Grid>

                            <dataInput:ValidationSummary Name="ValidationSummary" Grid.Row="3" Grid.ColumnSpan="3" MaxHeight="90"/>
                        </Grid>
                    </Border>
                    <Border x:Name="DisabledVisualElement" IsHitTestVisible="False" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" CornerRadius="2" Background="#8CFFFFFF" Opacity="0"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>



<Style TargetType="local:DataGridRow">
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:DataGridRow">
                <localprimitives:DataGridFrozenGrid Name="Root">
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="Normal"/>
                        <vsm:VisualState x:Name="NormalAlternatingRow">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="0"/>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To=".5"/>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="NormalSelected">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="MouseOverSelected">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="UnfocusedSelected">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Fill).Color" To="#FFE1E7EC"/>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="ValidationStates">
                            <vsm:VisualState x:Name="Valid"/>
                            <vsm:VisualState x:Name="Invalid">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation Storyboard.TargetName="InvalidVisualElement" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>

                    <Grid.Resources>
                        <Storyboard x:Key="DetailsVisibleTransition">
                            <DoubleAnimation Storyboard.TargetName="DetailsPresenter" Storyboard.TargetProperty="ContentHeight" Duration="00:00:0.1" />
                        </Storyboard>
                    </Grid.Resources>

                    <Rectangle x:Name="BackgroundRectangle" Grid.RowSpan="2" Grid.ColumnSpan="2" Opacity="0" Fill="#FFBADDE9"/>
                    <Rectangle x:Name="InvalidVisualElement" Grid.RowSpan="2" Grid.ColumnSpan="2" Opacity="0" Fill="#FFF7D8DB"/>

                    <localprimitives:DataGridRowHeader Grid.RowSpan="3" Name="RowHeader" localprimitives:DataGridFrozenGrid.IsFrozen="True" />
                    <localprimitives:DataGridCellsPresenter Grid.Column="1" Name="CellsPresenter" localprimitives:DataGridFrozenGrid.IsFrozen="True" />
                    <localprimitives:DataGridDetailsPresenter Grid.Row="1" Grid.Column="1" Name="DetailsPresenter" />
                    <Rectangle Grid.Row="2" Grid.Column="1" Name="BottomGridLine" HorizontalAlignment="Stretch" Height="1" />
                </localprimitives:DataGridFrozenGrid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>



<Style TargetType="localprimitives:DataGridRowHeader">
    <Setter Property="Background" Value="#99E9EEF4" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="SeparatorBrush" Value="#FFFFFFFF" />
    <Setter Property="SeparatorVisibility" Value="Collapsed"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="localprimitives:DataGridRowHeader">
                <Grid Name="Root">
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="Normal" />
                            <vsm:VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Fill).Color" Duration="0" To="#99D5EAF1"/>
                                    <DoubleAnimation Storyboard.TargetName="CurrentRowGlyph" Storyboard.TargetProperty="Opacity" Duration="0" To="0"/>
                                    <DoubleAnimation Storyboard.TargetName="EditingRowGlyph" Storyboard.TargetProperty="Opacity" Duration="0" To="0"/>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="MouseOverCurrentRowSelected">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Fill).Color" Duration="0" To="#FFD5EAF1"/>
                                    <DoubleAnimation Storyboard.TargetName="CurrentRowGlyph" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                    <DoubleAnimation Storyboard.TargetName="EditingRowGlyph" Storyboard.TargetProperty="Opacity" Duration="0" To="0"/>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="NormalCurrentRow">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="CurrentRowGlyph" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                    <DoubleAnimation Storyboard.TargetName="EditingRowGlyph" Storyboard.TargetProperty="Opacity" Duration="0" To="0"/>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="NormalSelected">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Fill).Color" Duration="0" To="#FFD5EAF1"/>
                                    <DoubleAnimation Storyboard.TargetName="CurrentRowGlyph" Storyboard.TargetProperty="Opacity" Duration="0" To="0"/>
                                    <DoubleAnimation Storyboard.TargetName="EditingRowGlyph" Storyboard.TargetProperty="Opacity" Duration="0" To="0"/>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="NormalEditingRow">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Fill).Color" Duration="0" To="#FFD5EAF1"/>
                                    <DoubleAnimation Storyboard.TargetName="CurrentRowGlyph" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                    <DoubleAnimation Storyboard.TargetName="EditingRowGlyph" Storyboard.TargetProperty="Opacity" Duration="0" To="0"/>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="ValidationStates">
                            <vsm:VisualState x:Name="RowValid"/>
                            <vsm:VisualState x:Name="RowInvalid">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="0"/>
                                    <DoubleAnimation Storyboard.TargetName="RowInvalidVisualElement" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                    <ColorAnimation Storyboard.TargetName="CurrentRowGlyph" Storyboard.TargetProperty="(Fill).(GradientStops)[0].Color" Duration="0" To="#FFDC000C"/>
                                    <ColorAnimation Storyboard.TargetName="CurrentRowGlyph" Storyboard.TargetProperty="(Fill).(GradientStops)[1].Color" Duration="0" To="#FFDC000C"/>
                                    <ColorAnimation Storyboard.TargetName="CurrentRowGlyph" Storyboard.TargetProperty="(Fill).(GradientStops)[2].Color" Duration="0" To="#FFDC000C"/>
                                    <ColorAnimation Storyboard.TargetName="EditingRowGlyph" Storyboard.TargetProperty="(Fill).(GradientStops)[0].Color" Duration="0" To="#FFDC000C"/>
                                    <ColorAnimation Storyboard.TargetName="EditingRowGlyph" Storyboard.TargetProperty="(Fill).(GradientStops)[1].Color" Duration="0" To="#FFDC000C"/>
                                    <ColorAnimation Storyboard.TargetName="EditingRowGlyph" Storyboard.TargetProperty="(Fill).(GradientStops)[2].Color" Duration="0" To="#FFDC000C"/>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>

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

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

                    <Border BorderBrush="#FFFFFFFF" BorderThickness="1,0,1,0" Grid.RowSpan="3" Grid.ColumnSpan="2">
                        <Grid Background="{TemplateBinding Background}">
                            <Rectangle x:Name="RowInvalidVisualElement" Stretch="Fill" Grid.RowSpan="3" Grid.ColumnSpan="2" Fill="#FFF7D8DB" Opacity="0" />
                            <Rectangle x:Name="BackgroundRectangle" Stretch="Fill" Grid.RowSpan="3" Grid.ColumnSpan="2" Fill="Transparent" />
                        </Grid>
                    </Border>
                    <Rectangle Name="HorizontalSeparator" Grid.ColumnSpan="2" Grid.Row="2" Height="1" Margin="1,0,1,0" HorizontalAlignment="Stretch" Fill="{TemplateBinding SeparatorBrush}" Visibility="{TemplateBinding SeparatorVisibility}" />

                    <ContentPresenter Content="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Column="1" Grid.RowSpan="2" />

                    <Path Name="CurrentRowGlyph" VerticalAlignment="Center" HorizontalAlignment="Center" Width="6" Height="10"  Margin="8,0,8,0" Grid.RowSpan="2" Stretch="Fill" Opacity="0" Data="F1 M 511.047,352.682L 511.047,342.252L 517.145,347.467L 511.047,352.682 Z ">
                        <Path.Fill>
                            <LinearGradientBrush StartPoint="0,-.15" EndPoint="0,1.75">
                                <GradientStop Color="#FF84E3FF" Offset="0"/>
                                <GradientStop Color="#FF6ABFD8" Offset="0.5"/>
                                <GradientStop Color="#FF5297AB" Offset="1"/>
                            </LinearGradientBrush>
                        </Path.Fill>
                    </Path>

                    <Path Name="EditingRowGlyph" VerticalAlignment="Center" HorizontalAlignment="Center" Width="6" Height="10"  Margin="8,0,8,0" Grid.RowSpan="2" Stretch="Fill" Opacity="0" Data="F1 M 511.047,352.682L 511.047,342.252L 517.145,347.467L 511.047,352.682 Z ">
                        <Path.Fill>
                            <LinearGradientBrush StartPoint="0,-.15" EndPoint="0,1.75">
                                <GradientStop Color="#FF84E3FF" Offset="0"/>
                                <GradientStop Color="#FF6ABFD8" Offset="0.5"/>
                                <GradientStop Color="#FF5297AB" Offset="1"/>
                            </LinearGradientBrush>
                        </Path.Fill>
                    </Path>

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>



<Style TargetType="local:DataGridRowGroupHeader">
    <Setter Property="Cursor" Value="Arrow" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Background" Value="#FFE4E8EA" />
    <Setter Property="Height" Value="20"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:DataGridRowGroupHeader">
                <localprimitives:DataGridFrozenGrid Name="Root" Background="{TemplateBinding Background}">
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CurrentStates">
                            <vsm:VisualState x:Name="Regular"/>
                            <vsm:VisualState x:Name="Current">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                    <localprimitives:DataGridFrozenGrid.Resources>
                        <ControlTemplate x:Key="ToggleButtonTemplate" TargetType="ToggleButton">
                            <Grid Background="Transparent">
                                <vsm:VisualStateManager.VisualStateGroups>
                                    <vsm:VisualStateGroup x:Name="CommonStates">
                                        <vsm:VisualState x:Name="Normal"/>
                                        <vsm:VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ColorAnimation Storyboard.TargetName="CollapsedArrow" Storyboard.TargetProperty="(Stroke).Color" Duration="0" To="#FF6DBDD1"/>
                                                <ColorAnimation Storyboard.TargetName="ExpandedArrow" Storyboard.TargetProperty="(Fill).Color" Duration="0" To="#FF6DBDD1"/>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ColorAnimation Storyboard.TargetName="CollapsedArrow" Storyboard.TargetProperty="(Stroke).Color" Duration="0" To="#FF6DBDD1"/>
                                                <ColorAnimation Storyboard.TargetName="ExpandedArrow" Storyboard.TargetProperty="(Fill).Color" Duration="0" To="#FF6DBDD1"/>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" Storyboard.TargetName="CollapsedArrow" Storyboard.TargetProperty="Opacity" To=".5"/>
                                                <DoubleAnimation Duration="0" Storyboard.TargetName="ExpandedArrow" Storyboard.TargetProperty="Opacity" To=".5"/>
                                            </Storyboard>
                                        </vsm:VisualState>
                                    </vsm:VisualStateGroup>
                                    <vsm:VisualStateGroup x:Name="CheckStates">
                                        <vsm:VisualState x:Name="Checked" />
                                        <vsm:VisualState x:Name="Unchecked">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="CollapsedArrow" Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpandedArrow" Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </vsm:VisualState>
                                    </vsm:VisualStateGroup>
                                </vsm:VisualStateManager.VisualStateGroups>

                                <Path Stretch="Uniform" Data="F1 M 0,0 L 0,1 L .6,.5 L 0,0 Z" Width="5" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="CollapsedArrow" Visibility="Collapsed" Stroke="#FF414345"/>
                                <Path Stretch="Uniform" Data="F1 M 0,1 L 1,1 L 1,0 L 0,1 Z" Width="6" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="ExpandedArrow" Fill="#FF414345"/>
                            </Grid>
                        </ControlTemplate>
                    </localprimitives:DataGridFrozenGrid.Resources>

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

                    <Rectangle Grid.Column="1" Grid.ColumnSpan="5" Fill="#FFFFFFFF" Height="1"/>
                    <Rectangle Grid.Column="1" Grid.Row="1" Name="IndentSpacer" />
                    <ToggleButton Grid.Column="2" Grid.Row="1" Name="ExpanderButton" Height="15" Width="15" IsTabStop="False" Template="{StaticResource ToggleButtonTemplate}" Margin="2,0,0,0"/>

                    <StackPanel Grid.Column="3" Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Center" Margin="0,1,0,1">
                        <TextBlock x:Name="PropertyNameElement" Margin="4,0,0,0" Visibility="{TemplateBinding PropertyNameVisibility}"/>
                        <TextBlock Margin="4,0,0,0" Text="{Binding Name}" />
                        <TextBlock x:Name="ItemCountElement" Margin="4,0,0,0" Visibility="{TemplateBinding ItemCountVisibility}"/>
                    </StackPanel>

                    <Rectangle Grid.Column="1" Grid.ColumnSpan="5" Fill="#FFD3D3D3" Height="1" Grid.Row="2"/>
                    <Rectangle Name="FocusVisual" Grid.Column="1" Grid.ColumnSpan="4" Grid.RowSpan="3" Stroke="#FF6DBDD1" StrokeThickness="1" HorizontalAlignment="Stretch" 
                               VerticalAlignment="Stretch" IsHitTestVisible="false" Opacity="0" />
                    <localprimitives:DataGridRowHeader Name="RowHeader" Grid.RowSpan="3" localprimitives:DataGridFrozenGrid.IsFrozen="True"/>

                </localprimitives:DataGridFrozenGrid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>



<Style TargetType="localprimitives:DataGridColumnHeader">
    <Setter Property="Foreground" Value="#FF000000" />
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="SeparatorBrush" Value="#FFC9CACA" />
    <Setter Property="Padding" Value="4" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="localprimitives:DataGridColumnHeader">
                <Grid Name="Root">
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="Normal" />
                            <vsm:VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Fill).Color" To="#FF448DCA"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Fill).(GradientStops)[3].Color" To="#7FFFFFFF"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Fill).(GradientStops)[2].Color" To="#CCFFFFFF"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Fill).(GradientStops)[1].Color" To="#F2FFFFFF"/>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Fill).Color" To="#FF448DCA"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Fill).(GradientStops)[0].Color" To="#D8FFFFFF"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Fill).(GradientStops)[1].Color" To="#C6FFFFFF"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Fill).(GradientStops)[2].Color" To="#8CFFFFFF"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Fill).(GradientStops)[3].Color" To="#3FFFFFFF"/>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="SortStates">
                            <vsm:VisualState x:Name="Unsorted" />
                            <vsm:VisualState x:Name="SortAscending">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0"/>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="SortDescending">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0"/>
                                    <DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="(RenderTransform).ScaleY" Duration="0" To="-.9"/>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>

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

                    <Rectangle x:Name="BackgroundRectangle" Stretch="Fill" Fill="#FF1F3B53" Grid.ColumnSpan="2" />

                    <Rectangle x:Name="BackgroundGradient" Stretch="Fill" Grid.ColumnSpan="2" >
                        <Rectangle.Fill>
                            <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                <GradientStop Color="#FCFFFFFF" Offset="0.015" />
                                <GradientStop Color="#F7FFFFFF" Offset="0.375" />
                                <GradientStop Color="#E5FFFFFF" Offset="0.6" />
                                <GradientStop Color="#D1FFFFFF" Offset="1" />
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>

                    <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <ContentPresenter Content="{TemplateBinding Content}"/>

                        <Path Grid.Column="1" Name="SortIcon" Fill="#FF444444" RenderTransformOrigin=".5,.5" HorizontalAlignment="Left" VerticalAlignment="Center" Opacity="0" Stretch="Uniform" Width="8" Margin="4,0,0,0" Data="F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z ">
                            <Path.RenderTransform>
                                <ScaleTransform ScaleX=".9" ScaleY=".9" />
                            </Path.RenderTransform>
                        </Path>
                    </Grid>

                    <Rectangle Name="VerticalSeparator" Grid.Column="1" Width="1" VerticalAlignment="Stretch" Fill="{TemplateBinding SeparatorBrush}" Visibility="{TemplateBinding SeparatorVisibility}" />

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>



<Style TargetType="local:DataGridCell">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Stretch" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:DataGridCell">
                <Grid Name="Root" Background="{TemplateBinding Background}">
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CurrentStates">
                            <vsm:VisualState x:Name="Regular" />
                            <vsm:VisualState x:Name="Current">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="ValidationStates">
                            <vsm:VisualState x:Name="Valid"/>
                            <vsm:VisualState x:Name="Invalid">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="InvalidVisualElement" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                    <ColorAnimation Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="(Fill).Color" Duration="0" To="#FFFFFFFF"/> 
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>

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

                    <Rectangle Name="FocusVisual" Stroke="#FF6DBDD1" StrokeThickness="1" Fill="#66FFFFFF" HorizontalAlignment="Stretch" 
                               VerticalAlignment="Stretch" IsHitTestVisible="false" Opacity="0" />

                    <ContentPresenter
                        Content="{TemplateBinding Content}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        Margin="{TemplateBinding Padding}" />

                    <Rectangle x:Name="InvalidVisualElement" IsHitTestVisible="False" StrokeThickness="1" Stroke="#FFDC000C" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0"/>

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


Community Additions

ADD
Show:
© 2014 Microsoft