DataGrid 樣式和範本

發行項
09/27/2024

本主題說明 DataGrid 控制項的樣式和範本。您可以修改預設 ControlTemplate，為控制項提供唯一的外觀。如需詳細資訊，請參閱建立控制項的範本。

DataGrid 組件

下表列出 DataGrid 控制項的具名組件。

部分	類型	描述
PART_ColumnHeadersPresenter	DataGridColumnHeadersPresenter	包含資料行標頭的資料列。

當您為 DataGrid 建立 ControlTemplate 時，您的範本可能會在 ScrollViewer 內包含 ItemsPresenter。 (ItemsPresenter 會顯示 DataGrid 中的每個項目；ScrollViewer 會在控制項內啟用捲動)。如果 ItemsPresenter 不是 ScrollViewer 的直接子系，則您必須將 ItemsPresenter 命名為 ItemsPresenter。

DataGrid 的預設範本包含 ScrollViewer 控制項。如需 ScrollViewer 所定義組件的詳細資訊，請參閱 ScrollViewer 樣式和範本。

DataGrid 狀態

下表列出 DataGrid 控制項的視覺狀態。

VisualState 名稱	VisualStateGroup 名稱	描述
Normal	CommonStates	預設狀態。
已停用	CommonStates	已停用控制項。
InvalidFocused	ValidationStates	控制項無效且已取得焦點。
InvalidUnfocused	ValidationStates	控制項無效且未取得焦點。
有效	ValidationStates	控制項有效。

DataGridCell 組件

DataGridCell 元素沒有任何具名組件。

DataGridCell 狀態

下表列出 DataGridCell 元素的視覺狀態。

VisualState 名稱	VisualStateGroup 名稱	描述
Normal	CommonStates	預設狀態。
MouseOver	CommonStates	滑鼠指標放在儲存格上方。
焦點	FocusStates	儲存格具有焦點。
未取得焦點	FocusStates	儲存格沒有焦點
目前	CurrentStates	儲存格是目前的儲存格。
一般	CurrentStates	儲存格不是目前的儲存格。
顯示器	InteractionStates	儲存格處於顯示模式。
編輯	InteractionStates	儲存格處於編輯模式。
Selected	SelectionStates	選取儲存格。
未選取	SelectionStates	未選取儲存格。
InvalidFocused	ValidationStates	儲存格無效且具有焦點。
InvalidUnfocused	ValidationStates	儲存格無效且未具有焦點。
有效	ValidationStates	儲存格有效。

DataGridRow 組件

DataGridRow 元素沒有任何具名組件。

DataGridRow 狀態

下表列出 DataGridRow 元素的視覺狀態。

VisualState 名稱	VisualStateGroup 名稱	描述
Normal	CommonStates	預設狀態。
MouseOver	CommonStates	滑鼠指標放在資料列上方。
MouseOver_Editing	CommonStates	滑鼠指標放在資料列上方，而資料列處於編輯模式。
MouseOver_Selected	CommonStates	滑鼠指標放在資料列上方，並選取資料列。
MouseOver_Unfocused_Editing	CommonStates	滑鼠指標放在資料列上方、資料列處於編輯模式，而且沒有焦點。
MouseOver_Unfocused_Selected	CommonStates	滑鼠指標放在資料列上方、選取資料列，而且沒有焦點。
Normal_AlternatingRow	CommonStates	資料列是替代資料列。
Normal_Editing	CommonStates	資料列處於編輯模式。
Normal_Selected	CommonStates	選取資料列。
Unfocused_Editing	CommonStates	資料列處於編輯模式，而且沒有焦點。
Unfocused_Selected	CommonStates	選取資料列，而且沒有焦點。
InvalidFocused	ValidationStates	控制項無效且已取得焦點。
InvalidUnfocused	ValidationStates	控制項無效且未取得焦點。
有效	ValidationStates	控制項有效。

DataGridRowHeader 組件

下表列出 DataGridRowHeader 元素的具名組件。

部分	類型	描述
PART_TopHeaderGripper	Thumb	用來從頂端調整資料列標頭大小的元素。
PART_BottomHeaderGripper	Thumb	用來從底端調整資料列標頭大小的元素。

DataGridRowHeader 狀態

下表列出 DataGridRowHeader 元素的視覺狀態。

VisualState 名稱	VisualStateGroup 名稱	描述
Normal	CommonStates	預設狀態。
MouseOver	CommonStates	滑鼠指標放在資料列上方。
MouseOver_CurrentRow	CommonStates	滑鼠指標放在資料列上方，且資料列是目前資料列。
MouseOver_CurrentRow_Selected	CommonStates	滑鼠指標放在資料列上方，且資料列為目前資料列並予以選取。
MouseOver_EditingRow	CommonStates	滑鼠指標放在資料列上方，而資料列處於編輯模式。
MouseOver_Selected	CommonStates	滑鼠指標放在資料列上方，並選取資料列。
MouseOver_Unfocused_CurrentRow_Selected	CommonStates	滑鼠指標放在資料列上方、資料列是目前資料列並予以選取，而且沒有焦點。
MouseOver_Unfocused_EditingRow	CommonStates	滑鼠指標放在資料列上方、資料列處於編輯模式，而且沒有焦點。
MouseOver_Unfocused_Selected	CommonStates	滑鼠指標放在資料列上方、選取資料列，而且沒有焦點。
Normal_CurrentRow	CommonStates	資料列是目前資料列。
Normal_CurrentRow_Selected	CommonStates	資料列是目前資料列，並已選取。
Normal_EditingRow	CommonStates	資料列處於編輯模式。
Normal_Selected	CommonStates	選取資料列。
Unfocused_CurrentRow_Selected	CommonStates	資料列是目前資料列、已選取，而且沒有焦點。
Unfocused_EditingRow	CommonStates	資料列處於編輯模式，而且沒有焦點。
Unfocused_Selected	CommonStates	選取資料列，而且沒有焦點。
InvalidFocused	ValidationStates	控制項無效且已取得焦點。
InvalidUnfocused	ValidationStates	控制項無效且未取得焦點。
有效	ValidationStates	控制項有效。

DataGridColumnHeadersPresenter 組件

下表列出 DataGridColumnHeadersPresenter 元素的具名組件。

部分	類型	描述
PART_FillerColumnHeader	DataGridColumnHeader	資料行標頭的預留位置。

DataGridColumnHeadersPresenter States

下表列出 DataGridColumnHeadersPresenter 元素的視覺狀態。

VisualState 名稱	VisualStateGroup 名稱	描述
InvalidFocused	ValidationStates	儲存格無效且具有焦點。
InvalidUnfocused	ValidationStates	儲存格無效且未具有焦點。
有效	ValidationStates	儲存格有效。

DataGridColumnHeader 組件

下表列出 DataGridColumnHeader 元素的具名組件。

部分	類型	描述
PART_LeftHeaderGripper	Thumb	用來從左側調整資料行標頭大小的元素。
PART_RightHeaderGripper	Thumb	用來從右側調整資料行標頭大小的元素。

DataGridColumnHeader 狀態

下表列出 DataGridColumnHeader 元素的視覺狀態。

VisualState 名稱	VisualStateGroup 名稱	描述
Normal	CommonStates	預設狀態。
MouseOver	CommonStates	滑鼠指標移到控制項上。
按下	CommonStates	已按下控制項。
SortAscending	SortStates	資料行是以遞增順序排序。
SortDescending	SortStates	資料行是以遞減順序排序。
Unsorted	SortStates	資料行未排序。
InvalidFocused	ValidationStates	控制項無效且已取得焦點。
InvalidUnfocused	ValidationStates	控制項無效且未取得焦點。
有效	ValidationStates	控制項有效。

DataGrid ControlTemplate 範例

下列範例顯示如何定義 DataGrid 控制項的 ControlTemplate 和其相關聯類型。

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

上述範例使用下列一或多項資源。

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

如需完整的範例，請參閱使用 ControlTemplate 設定樣式範例。

共用方式為