DataGrid Styles and Templates

.NET Framework (current version)
 

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 Creating a ControlTemplate.

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

PartTypeDescription
PART_ColumnHeadersPresenterDataGridColumnHeadersPresenterThe row that contains the column headers.

When you create a ControlTemplate for a DataGrid, your template might contain an ItemsPresenter within a ScrollViewer. (The ItemsPresenter displays each item in the DataGrid; the ScrollViewer enables scrolling within the control). If the ItemsPresenter is not the direct child of the ScrollViewer, you must give the ItemsPresenter the name, ItemsPresenter.

The default template for the DataGrid contains a ScrollViewer control. For more information about the parts defined by the ScrollViewer, see ScrollViewer Styles and Templates.

The following table lists the visual states for the DataGrid control.

VisualState NameVisualStateGroup NameDescription
NormalCommonStatesThe default state.
DisabledCommonStatesThe control is disabled.
InvalidFocusedValidationStatesThe control is not valid and has focus.
InvalidUnfocusedValidationStatesThe control is not valid and does not have focus.
ValidValidationStatesThe control is valid.

The DataGridCell element does not have any named parts.

The following table lists the visual states for the DataGridCell element.

VisualState NameVisualStateGroup NameDescription
NormalCommonStatesThe default state.
MouseOverCommonStatesThe mouse pointer is positioned over the cell.
FocusedFocusStatesThe cell has focus.
UnfocusedFocusStatesThe cell does not have focus
CurrentCurrentStatesThe cell is the current cell.
RegularCurrentStatesThe cell is not the current cell.
DisplayInteractionStatesThe cell is in display mode.
EditingInteractionStatesThe cell is in edit mode.
SelectedSelectionStatesThe cell is selected.
UnselectedSelectionStatesThe cell is not selected.
InvalidFocusedValidationStatesThe cell is not valid and has focus.
InvalidUnfocusedValidationStatesThe cell is not valid and does not have focus.
ValidValidationStatesThe cell is valid.

The DataGridRow element does not have any named parts.

The following table lists the visual states for the DataGridRow element.

VisualState NameVisualStateGroup NameDescription
NormalCommonStatesThe default state.
MouseOverCommonStatesThe mouse pointer is positioned over the row.
MouseOver_EditingCommonStatesThe mouse pointer is positioned over the row and the row is in edit mode.
MouseOver_SelectedCommonStatesThe mouse pointer is positioned over the row and the row is selected.
MouseOver_Unfocused_EditingCommonStatesThe mouse pointer is positioned over the row, the row is in edit mode, and does not have focus.
MouseOver_Unfocused_SelectedCommonStatesThe mouse pointer is positioned over the row, the row is selected, and does not have focus.
Normal_AlternatingRowCommonStatesThe row is an alternating row.
Normal_EditingCommonStatesThe row is in edit mode.
Normal_SelectedCommonStatesThe row is selected.
Unfocused_EditingCommonStatesThe row is in edit mode and does not have focus.
Unfocused_SelectedCommonStatesThe row is selected and does not have focus.
InvalidFocusedValidationStatesThe control is not valid and has focus.
InvalidUnfocusedValidationStatesThe control is not valid and does not have focus.
ValidValidationStatesThe control is valid.

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

PartTypeDescription
PART_TopHeaderGripperThumbThe element that is used to resize the row header from the top.
PART_BottomHeaderGripperThumbThe element that is used to resize the row header from the bottom.

The following table lists the visual states for the DataGridRowHeader element.

VisualState NameVisualStateGroup NameDescription
NormalCommonStatesThe default state.
MouseOverCommonStatesThe mouse pointer is positioned over the row.
MouseOver_CurrentRowCommonStatesThe mouse pointer is positioned over the row and the row is the current row.
MouseOver_CurrentRow_SelectedCommonStatesThe mouse pointer is positioned over the row, and the row is current and selected.
MouseOver_EditingRowCommonStatesThe mouse pointer is positioned over the row and the row is in edit mode.
MouseOver_SelectedCommonStatesThe mouse pointer is positioned over the row and the row is selected.
MouseOver_Unfocused_CurrentRow_SelectedCommonStatesThe mouse pointer is positioned over the row, the row is current and selected, and does not have focus.
MouseOver_Unfocused_EditingRowCommonStatesThe mouse pointer is positioned over the row, the row is in edit mode, and does not have focus.
MouseOver_Unfocused_SelectedCommonStatesThe mouse pointer is positioned over the row, the row is selected, and does not have focus.
Normal_CurrentRowCommonStatesThe row is the current row.
Normal_CurrentRow_SelectedCommonStatesThe row is the current row and is selected.
Normal_EditingRowCommonStatesThe row is in edit mode.
Normal_SelectedCommonStatesThe row is selected.
Unfocused_CurrentRow_SelectedCommonStatesThe row is the current row, is selected, and does not have focus.
Unfocused_EditingRowCommonStatesThe row is in edit mode and does not have focus.
Unfocused_SelectedCommonStatesThe row is selected and does not have focus.
InvalidFocusedValidationStatesThe control is not valid and has focus.
InvalidUnfocusedValidationStatesThe control is not valid and does not have focus.
ValidValidationStatesThe control is valid.

The following table lists the named parts for the DataGridColumnHeadersPresenter element.

PartTypeDescription
PART_FillerColumnHeaderDataGridColumnHeaderThe placeholder for column headers.

The following table lists the visual states for the DataGridColumnHeadersPresenter element.

VisualState NameVisualStateGroup NameDescription
InvalidFocusedValidationStatesThe cell is not valid and has focus.
InvalidUnfocusedValidationStatesThe cell is not valid and does not have focus.
ValidValidationStatesThe cell is valid.

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

PartTypeDescription
PART_LeftHeaderGripperThumbThe element that is used to resize the column header from the left.
PART_RightHeaderGripperThumbThe element that is used to resize the column header from the right.

The following table lists the visual states for the DataGridColumnHeader element.

VisualState NameVisualStateGroup NameDescription
NormalCommonStatesThe default state.
MouseOverCommonStatesThe mouse pointer is positioned over the control.
PressedCommonStatesThe control is pressed.
SortAscendingSortStatesThe column is sorted in ascending order.
SortDescendingSortStatesThe column is sorted in descending order.
UnsortedSortStatesThe column is not sorted.
InvalidFocusedValidationStatesThe control is not valid and has focus.
InvalidUnfocusedValidationStatesThe control is not valid and does not have focus.
ValidValidationStatesThe control is valid.

The following example shows how to define a ControlTemplate for the DataGrid control and its associated types.

  <BooleanToVisibilityConverter x:Key="bool2VisibilityConverter" />

  <!--Style and template for the button in the upper left corner of the DataGrid.-->
  <Style TargetType="{x:Type Button}"
         x:Key="{ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, 
    TypeInTargetAssembly={x:Type DataGrid}}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
          <Grid>
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="MouseOver">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                  Storyboard.TargetProperty="(Shape.Fill).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlMouseOverColor}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                  Storyboard.TargetProperty="(Shape.Fill).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlPressedColor}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Disabled">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                   Storyboard.TargetName="Arrow">
                      <DiscreteObjectKeyFrame KeyTime="0"
                                              Value="{x:Static Visibility.Collapsed}" />
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Rectangle x:Name="Border"
                       SnapsToDevicePixels="True">
              <Rectangle.Stroke>
                <LinearGradientBrush EndPoint="0.5,1"
                                     StartPoint="0.5,0">
                  <GradientStop Color="{DynamicResource BorderLightColor}"
                                Offset="0" />
                  <GradientStop Color="{DynamicResource BorderMediumColor}"
                                Offset="1" />
                </LinearGradientBrush>
              </Rectangle.Stroke>
              <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1"
                                     StartPoint="0.5,0">
                  <GradientStop Color="{DynamicResource ControlLightColor}"
                                Offset="0" />
                  <GradientStop Color="{DynamicResource ControlMediumColor}"
                                Offset="1" />
                </LinearGradientBrush>
              </Rectangle.Fill>
            </Rectangle>
            <Polygon x:Name="Arrow"
                     HorizontalAlignment="Right"
                     Margin="8,8,3,3"
                     Opacity="0.15"
                     Points="0,10 10,10 10,0"
                     Stretch="Uniform"
                     VerticalAlignment="Bottom">
              <Polygon.Fill>
                <SolidColorBrush Color="{DynamicResource GlyphColor}" />
              </Polygon.Fill>
            </Polygon>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!--Style and template for the DataGrid.-->
  <Style TargetType="{x:Type DataGrid}">
    <Setter Property="Foreground"
            Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
    <Setter Property="BorderBrush">
      <Setter.Value>
        <LinearGradientBrush EndPoint="0.5,1"
                             StartPoint="0.5,0">
          <GradientStop Color="{DynamicResource BorderLightColor}"
                        Offset="0" />
          <GradientStop Color="{DynamicResource BorderDarkColor}"
                        Offset="1" />
        </LinearGradientBrush>
      </Setter.Value>
    </Setter>
    <Setter Property="BorderThickness"
            Value="1" />
    <Setter Property="RowDetailsVisibilityMode"
            Value="VisibleWhenSelected" />
    <Setter Property="ScrollViewer.CanContentScroll"
            Value="true" />
    <Setter Property="ScrollViewer.PanningMode"
            Value="Both" />
    <Setter Property="Stylus.IsFlicksEnabled"
            Value="False" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type DataGrid}">
          <Border x:Name="border"
                  SnapsToDevicePixels="True"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  BorderThickness="{TemplateBinding BorderThickness}"
                  Padding="{TemplateBinding Padding}">
            <Border.Background>
              <SolidColorBrush Color="{DynamicResource ControlLightColor}" />
            </Border.Background>
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Disabled">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (SolidColorBrush.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{DynamicResource ControlLightColor}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Normal" />
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <ScrollViewer x:Name="DG_ScrollViewer"
                          Focusable="false"
                          Background="Black">
              <ScrollViewer.Template>
                <ControlTemplate TargetType="{x:Type ScrollViewer}">
                  <Grid>
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="Auto" />
                      <ColumnDefinition Width="*" />
                      <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                      <RowDefinition Height="Auto" />
                      <RowDefinition Height="*" />
                      <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <Button Focusable="false"
                            Command="{x:Static DataGrid.SelectAllCommand}"
                            Style="{DynamicResource {ComponentResourceKey 
                        ResourceId=DataGridSelectAllButtonStyle, 
                        TypeInTargetAssembly={x:Type DataGrid}}}"
                            Visibility="{Binding HeadersVisibility, 
                        ConverterParameter={x:Static DataGridHeadersVisibility.All}, 
                        Converter={x:Static DataGrid.HeadersVisibilityConverter}, 
                        RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"
                            Width="{Binding CellsPanelHorizontalOffset, 
                        RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" />

                    <DataGridColumnHeadersPresenter x:Name="PART_ColumnHeadersPresenter"
                                                    Grid.Column="1"
                                                    Visibility="{Binding HeadersVisibility, 
                        ConverterParameter={x:Static DataGridHeadersVisibility.Column}, 
                        Converter={x:Static DataGrid.HeadersVisibilityConverter}, 
                        RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" />

                    <ScrollContentPresenter x:Name="PART_ScrollContentPresenter"
                                            Grid.ColumnSpan="2"
                                            Grid.Row="1"
                                            CanContentScroll="{TemplateBinding CanContentScroll}" />

                    <ScrollBar x:Name="PART_VerticalScrollBar"
                               Grid.Column="2"
                               Grid.Row="1"
                               Orientation="Vertical"
                               ViewportSize="{TemplateBinding ViewportHeight}"
                               Maximum="{TemplateBinding ScrollableHeight}"
                               Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                               Value="{Binding VerticalOffset, Mode=OneWay, 
                        RelativeSource={RelativeSource TemplatedParent}}"/>

                    <Grid Grid.Column="1"
                          Grid.Row="2">
                      <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="{Binding NonFrozenColumnsViewportHorizontalOffset, 
                            RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" />
                        <ColumnDefinition Width="*" />
                      </Grid.ColumnDefinitions>

                      <ScrollBar x:Name="PART_HorizontalScrollBar"
                                 Grid.Column="1"
                                 Orientation="Horizontal"
                                 ViewportSize="{TemplateBinding ViewportWidth}"
                                 Maximum="{TemplateBinding ScrollableWidth}"
                                 Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                 Value="{Binding HorizontalOffset, Mode=OneWay, 
                          RelativeSource={RelativeSource TemplatedParent}}"/>
                    </Grid>
                  </Grid>
                </ControlTemplate>
              </ScrollViewer.Template>
              <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
            </ScrollViewer>
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
    <Style.Triggers>
      <Trigger Property="IsGrouping"
               Value="true">
        <Setter Property="ScrollViewer.CanContentScroll"
                Value="false" />
      </Trigger>
    </Style.Triggers>
  </Style>

  <!--Style and template for the DataGridCell.-->
  <Style TargetType="{x:Type DataGridCell}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type DataGridCell}">
          <Border x:Name="border"
                  BorderBrush="Transparent"
                  BorderThickness="1"
                  Background="Transparent"
                  SnapsToDevicePixels="True">
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="FocusStates">
                <VisualState x:Name="Unfocused" />
                <VisualState x:Name="Focused" />
              </VisualStateGroup>
              <VisualStateGroup x:Name="CurrentStates">
                <VisualState x:Name="Regular" />
                <VisualState x:Name="Current">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="border"
                                                  Storyboard.TargetProperty="(Border.BorderBrush).
                        (SolidColorBrush.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource DatagridCurrentCellBorderColor}" />
                    </ColorAnimationUsingKeyFrames
                                                  >
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!--Style and template for the DataGridRow.-->
  <Style TargetType="{x:Type DataGridRow}">
    <Setter Property="Background">
      <Setter.Value>
        <SolidColorBrush Color="{DynamicResource ControlLightColor}" />
      </Setter.Value>
    </Setter>
    <Setter Property="SnapsToDevicePixels"
            Value="true" />
    <Setter Property="Validation.ErrorTemplate"
            Value="{x:Null}" />
    <Setter Property="ValidationErrorTemplate">
      <Setter.Value>
        <ControlTemplate>
          <TextBlock Foreground="Red"
                     Margin="2,0,0,0"
                     Text="!"
                     VerticalAlignment="Center" />
        </ControlTemplate>
      </Setter.Value>
    </Setter>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type DataGridRow}">
          <Border x:Name="DGR_Border"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  BorderThickness="{TemplateBinding BorderThickness}"
                  SnapsToDevicePixels="True">
            <Border.Background>
              <LinearGradientBrush EndPoint="0.5,1"
                                   StartPoint="0.5,0">
                <GradientStop Color="Transparent"
                              Offset="0" />
                <GradientStop Color="{DynamicResource ControlLightColor}"
                              Offset="1" />
              </LinearGradientBrush>
            </Border.Background>
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />

                <!--Provide a different appearance for every other row.-->
                <VisualState x:Name="Normal_AlternatingRow">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[0].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ContentAreaColorLight}" />
                    </ColorAnimationUsingKeyFrames>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)">

                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ContentAreaColorDark}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>

                <!--In this example, a row in Editing or selected mode has an
                identical appearances. In other words, the states 
                Normal_Selected, Unfocused_Selected, Normal_Editing, 
                MouseOver_Editing, MouseOver_Unfocused_Editing,
                and Unfocused_Editing are identical.-->
                <VisualState x:Name="Normal_Selected">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[0].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlMediumColor}" />
                    </ColorAnimationUsingKeyFrames>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlDarkColor}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>

                <VisualState x:Name="Unfocused_Selected">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[0].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlMediumColor}" />
                    </ColorAnimationUsingKeyFrames>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlDarkColor}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>

                <VisualState x:Name="Normal_Editing">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[0].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlMediumColor}" />
                    </ColorAnimationUsingKeyFrames>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlDarkColor}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>

                <VisualState x:Name="MouseOver_Editing">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[0].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlMediumColor}" />
                    </ColorAnimationUsingKeyFrames>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlDarkColor}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>

                <VisualState x:Name="MouseOver_Unfocused_Editing">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[0].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlMediumColor}" />
                    </ColorAnimationUsingKeyFrames>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlDarkColor}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>

                <VisualState x:Name="Unfocused_Editing">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[0].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlMediumColor}" />
                    </ColorAnimationUsingKeyFrames>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlDarkColor}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>

                <VisualState x:Name="MouseOver">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[0].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlMediumColor}" />
                    </ColorAnimationUsingKeyFrames>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlMouseOverColor}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>

                <!--In this example, the appearance of a selected row 
                that has the mouse over it is the same regardless of
                whether the row is selected.  In other words, the states 
                MouseOver_Editing and MouseOver_Unfocused_Editing are identical.-->
                <VisualState x:Name="MouseOver_Selected">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[0].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlMouseOverColor}" />
                    </ColorAnimationUsingKeyFrames>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlMouseOverColor}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>

                <VisualState x:Name="MouseOver_Unfocused_Selected">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[0].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlMouseOverColor}" />
                    </ColorAnimationUsingKeyFrames>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlMouseOverColor}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

            <SelectiveScrollingGrid>
              <SelectiveScrollingGrid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
              </SelectiveScrollingGrid.ColumnDefinitions>
              <SelectiveScrollingGrid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
              </SelectiveScrollingGrid.RowDefinitions>
              <DataGridCellsPresenter Grid.Column="1"
                                      ItemsPanel="{TemplateBinding ItemsPanel}"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
              <DataGridDetailsPresenter Grid.Column="1"
                                        Grid.Row="1"
                                        Visibility="{TemplateBinding DetailsVisibility}"
                                        SelectiveScrollingGrid.SelectiveScrollingOrientation=
                  "{Binding AreRowDetailsFrozen, 
                  ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical},
                  Converter={x:Static DataGrid.RowDetailsScrollingConverter}, 
                  RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
              <DataGridRowHeader Grid.RowSpan="2"
                                 SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
                                 Visibility="{Binding HeadersVisibility, 
                  ConverterParameter={x:Static DataGridHeadersVisibility.Row}, 
                  Converter={x:Static DataGrid.HeadersVisibilityConverter}, 
                  RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" />
            </SelectiveScrollingGrid>
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!--Style and template for the resize control on the DataGridRowHeader.-->
  <Style x:Key="RowHeaderGripperStyle"
         TargetType="{x:Type Thumb}">
    <Setter Property="Height"
            Value="8" />
    <Setter Property="Background"
            Value="Transparent" />
    <Setter Property="Cursor"
            Value="SizeNS" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type Thumb}">
          <Border Background="{TemplateBinding Background}"
                  Padding="{TemplateBinding Padding}" />
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!--Style and template for the DataGridRowHeader.-->
  <Style TargetType="{x:Type DataGridRowHeader}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type DataGridRowHeader}">
          <Grid>
            <VisualStateManager.VisualStateGroups>
              <!--This example does not specify an appearance for every
                  state.  You can add storyboard to the states that are listed
                  to change the appearance of the DataGridRowHeader when it is
                  in a specific state.-->
              <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Normal_CurrentRow" />
                <VisualState x:Name="Unfocused_EditingRow" />
                <VisualState x:Name="Normal_EditingRow" />
                <VisualState x:Name="MouseOver">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="rowHeaderBorder"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlMouseOverColor}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="MouseOver_CurrentRow" />
                <VisualState x:Name="MouseOver_Unfocused_EditingRow" />
                <VisualState x:Name="MouseOver_EditingRow" />
                <VisualState x:Name="MouseOver_Unfocused_Selected" />
                <VisualState x:Name="MouseOver_Selected" />
                <VisualState x:Name="MouseOver_Unfocused_CurrentRow_Selected" />
                <VisualState x:Name="MouseOver_CurrentRow_Selected" />
                <VisualState x:Name="Unfocused_Selected" />
                <VisualState x:Name="Unfocused_CurrentRow_Selected" />
                <VisualState x:Name="Normal_CurrentRow_Selected" />
                <VisualState x:Name="Normal_Selected" />
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Border x:Name="rowHeaderBorder"
                    Width="10"
                    BorderThickness="1">
              <Border.BorderBrush>
                <LinearGradientBrush EndPoint="0.5,1"
                                     StartPoint="0.5,0">
                  <GradientStop Color="{DynamicResource BorderLightColor}"
                                Offset="0" />
                  <GradientStop Color="{DynamicResource BorderDarkColor}"
                                Offset="1" />
                </LinearGradientBrush>
              </Border.BorderBrush>
              <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1"
                                     StartPoint="0.5,0">
                  <GradientStop Color="{DynamicResource ControlLightColor}"
                                Offset="0" />
                  <GradientStop Color="{DynamicResource ControlMediumColor}"
                                Offset="1" />
                </LinearGradientBrush>
              </Border.Background>
              <StackPanel Orientation="Horizontal">
                <ContentPresenter VerticalAlignment="Center"
                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                <Control SnapsToDevicePixels="false"
                         Template="{Binding ValidationErrorTemplate, 
                    RelativeSource={RelativeSource AncestorType={x:Type DataGridRow}}}"
                         Visibility="{Binding (Validation.HasError), 
                    Converter={StaticResource bool2VisibilityConverter}, 
                    RelativeSource={RelativeSource AncestorType={x:Type DataGridRow}}}" />
              </StackPanel>
            </Border>

            <Thumb x:Name="PART_TopHeaderGripper"
                   Style="{StaticResource RowHeaderGripperStyle}"
                   VerticalAlignment="Top" />
            <Thumb x:Name="PART_BottomHeaderGripper"
                   Style="{StaticResource RowHeaderGripperStyle}"
                   VerticalAlignment="Bottom" />
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!--Style and template for the resize control on the DataGridColumnHeader.-->
  <Style x:Key="ColumnHeaderGripperStyle"
         TargetType="{x:Type Thumb}">
    <Setter Property="Width"
            Value="8" />
    <Setter Property="Background"
            Value="Transparent" />
    <Setter Property="Cursor"
            Value="SizeWE" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type Thumb}">
          <Border Background="{TemplateBinding Background}"
                  Padding="{TemplateBinding Padding}" />
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!--Style and template for the DataGridColumnHeader.-->
  <Style TargetType="{x:Type DataGridColumnHeader}">
    <Setter Property="VerticalContentAlignment"
            Value="Center" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
          <Grid>
            <Border x:Name="columnHeaderBorder"
                    BorderThickness="1"
                    Padding="3,0,3,0">
              <Border.BorderBrush>
                <LinearGradientBrush EndPoint="0.5,1"
                                     StartPoint="0.5,0">
                  <GradientStop Color="{DynamicResource BorderLightColor}"
                                Offset="0" />
                  <GradientStop Color="{DynamicResource BorderDarkColor}"
                                Offset="1" />
                </LinearGradientBrush>
              </Border.BorderBrush>
              <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1"
                                     StartPoint="0.5,0">
                  <GradientStop Color="{DynamicResource ControlLightColor}"
                                Offset="0" />
                  <GradientStop Color="{DynamicResource ControlMediumColor}"
                                Offset="1" />
                </LinearGradientBrush>
              </Border.Background>
              <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
            </Border>

            <Thumb x:Name="PART_LeftHeaderGripper"
                   HorizontalAlignment="Left"
                   Style="{StaticResource ColumnHeaderGripperStyle}" />
            <Thumb x:Name="PART_RightHeaderGripper"
                   HorizontalAlignment="Right"
                   Style="{StaticResource ColumnHeaderGripperStyle}" />
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
    <Setter Property="Background">
      <Setter.Value>
        <LinearGradientBrush EndPoint="0.5,1"
                             StartPoint="0.5,0">
          <GradientStop Color="{DynamicResource ControlLightColor}"
                        Offset="0" />
          <GradientStop Color="{DynamicResource ControlMediumColor}"
                        Offset="1" />
        </LinearGradientBrush>
      </Setter.Value>
    </Setter>
  </Style>

  <!--Style and template for the DataGridColumnHeadersPresenter.-->
  <Style TargetType="{x:Type DataGridColumnHeadersPresenter}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type DataGridColumnHeadersPresenter}">
          <Grid>
            <DataGridColumnHeader x:Name="PART_FillerColumnHeader"
                                  IsHitTestVisible="False" />
            <ItemsPresenter />
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

The preceding example uses one or more of the following resources.

  <!--Control colors.-->
  <Color x:Key="WindowColor">#FFE8EDF9</Color>
  <Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>
  <Color x:Key="ContentAreaColorDark">#FF7381F9</Color>

  <Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
  <Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
  <Color x:Key="DisabledForegroundColor">#FF888888</Color>

  <Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
  <Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>

  <Color x:Key="ControlLightColor">White</Color>
  <Color x:Key="ControlMediumColor">#FF7381F9</Color>
  <Color x:Key="ControlDarkColor">#FF211AA9</Color>

  <Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
  <Color x:Key="ControlPressedColor">#FF211AA9</Color>


  <Color x:Key="GlyphColor">#FF444444</Color>
  <Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>

  <!--Border colors-->
  <Color x:Key="BorderLightColor">#FFCCCCCC</Color>
  <Color x:Key="BorderMediumColor">#FF888888</Color>
  <Color x:Key="BorderDarkColor">#FF444444</Color>

  <Color x:Key="PressedBorderLightColor">#FF888888</Color>
  <Color x:Key="PressedBorderDarkColor">#FF444444</Color>

  <Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color>
  <Color x:Key="DisabledBorderDarkColor">#FF888888</Color>

  <Color x:Key="DefaultBorderBrushDarkColor">Black</Color>

  <!--Control-specific resources.-->
  <Color x:Key="HeaderTopColor">#FFC5CBF9</Color>
  <Color x:Key="DatagridCurrentCellBorderColor">Black</Color>
  <Color x:Key="SliderTrackDarkColor">#FFC5CBF9</Color>

  <Color x:Key="NavButtonFrameColor">#FF3843C4</Color>

  <LinearGradientBrush x:Key="MenuPopupBrush"
                       EndPoint="0.5,1"
                       StartPoint="0.5,0">
    <GradientStop Color="{DynamicResource ControlLightColor}"
                  Offset="0" />
    <GradientStop Color="{DynamicResource ControlMediumColor}"
                  Offset="0.5" />
    <GradientStop Color="{DynamicResource ControlLightColor}"
                  Offset="1" />
  </LinearGradientBrush>

  <LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill"
                       StartPoint="0,0"
                       EndPoint="1,0">
    <LinearGradientBrush.GradientStops>
      <GradientStopCollection>
        <GradientStop Color="#000000FF"
                      Offset="0" />
        <GradientStop Color="#600000FF"
                      Offset="0.4" />
        <GradientStop Color="#600000FF"
                      Offset="0.6" />
        <GradientStop Color="#000000FF"
                      Offset="1" />
      </GradientStopCollection>
    </LinearGradientBrush.GradientStops>
  </LinearGradientBrush>

For the complete sample, see Styling with ControlTemplates Sample.

Style
ControlTemplate
Control Styles and Templates
Control Customization
Styling and Templating
Customizing the Appearance of an Existing Control by Creating a ControlTemplate

Show: