發行項
11/17/2011

DataGrid Styles and Templates

Microsoft Silverlight will reach end of support after October 2021. Learn more.

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.

DataGrid Parts

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.

DataGrid States

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.

DataGrid Style Properties

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.

DataGridRow Parts

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.

DataGridRow States

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.

DataGridRow Style Properties

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.

DataGridRowHeader Parts

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.

DataGridRowHeader States

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.

DataGridRowGroupHeader Parts

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.

DataGridRowGroupHeader States

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.

DataGridRowGroupHeader Style Properties

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.

DataGridColumnHeader Parts

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.

DataGridColumnHeader States

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.

DataGridCell Parts

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.

DataGridCell States

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.

Default Template

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

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

共用方式為