Silverlight Glass DataGrid 页眉样式
4.92/5 (26投票s)
Silverlight 玻璃风格 DataGrid 页眉，鼠标悬停时带有发光动画。
引言
本文将引导您完成创建玻璃风格 DataGrid-页眉的步骤，包括鼠标悬停和按下状态，以及鼠标悬停时的动画发光效果。本教程使用 Visual Studio 2010 RC 和 Silverlight 4。本文将介绍如何
- 创建 Silverlight 项目
- 创建
DataGrid并绑定示例数据 - 将样式模板应用于
DataGrid - 为
DataGrid页眉创建玻璃效果 - 为鼠标悬停和按下状态创建
VisualStateManager - 在鼠标悬停时为页眉创建发光动画
- 更改不同
DataGrid页眉颜色的样式模板
创建基本的 DataGrid
本节将引导您创建 Silverlight 应用程序和 DataGrid。如果您已经拥有 Silverlight 应用程序并将数据绑定到 DataGrid，则可以跳至“创建 Grid 样式”部分。
创建一个新的 Silverlight 应用程序，并将其命名为 GlassyGrid。在您的 MainPage.xaml 文件中，创建一个 StackPanel，然后从工具栏拖放一个 DataGrid。
<StackPanel HorizontalAlignment="Center" Margin="0,20,0,20" >
<sdk:DataGrid Name="dataGrid1" Height="235"
Width="400" AutoGenerateColumns="True"
HorizontalAlignment="Center" />
</StackPanel>
为 DataGrid 创建示例数据
在您的 Silverlight 项目中创建一个名为 Data.cs 的新类。现在，将以下代码添加到您的 Data 类中
public string Column1 { get; set; }
public string Column2 { get; set; }
public int Column3 { get; set; }
public bool Column4 { get; set; }
打开 MainPage.xaml.cs 文件并将您的 MainPage 函数更改为此
public MainPage()
{
InitializeComponent();
List<Data> source = new List<Data>();
int itemsCount = 100;
for (int i = 0; i < itemsCount; i++)
{
source.Add(new Data()
{
Column1 = "Data" + i,
Column2 = "Second Column" + i,
Column3 = i,
Column4 = (i % 2 == 0)
});
}
// Bind the datagrid
dataGrid1.ItemsSource = source;
}
这会创建一些数据并将数据绑定到 DataGrid。运行应用程序，您应该会看到基本的 DataGrid。下一节将引导您完成创建样式并将其应用于 DataGrid 的步骤。
创建样式资源字典
为了增强 DataGrid 的外观和感觉，我们创建了可以应用于 DataGrid 的样式。样式通常可以放在项目中的 ResourceDictionary 文件中。ResourceDictionary 提供了一个哈希表/字典实现，其中包含 WPF 应用程序的组件使用的键控 WPF 资源，可用于存储我们 DataGrid 的可重用样式。要创建样式资源字典，请右键单击您的应用程序项目，然后选择添加 -> 新建文件夹。将文件夹命名为 Assets。右键单击 Assets 文件夹，然后选择添加 -> 新建项。选择“Silverlight 资源字典”并将“名称:”更改为 Styles.xaml。
现在，您的解决方案中应该有一个 Styles.xaml 文件
在 App.xaml 文件中的 Application.Resources 标签中包含新创建的 Styles.xaml 文件
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Assets/Styles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
创建 Grid 样式
现在创建一个样式来修改 DataGrid 的行颜色和 GridLines 以及其他几个样式。在创建 DataGrid 的新样式之前，需要将以下引用添加到 ResourceDictionary 标签中
xmlns:local="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
xmlns:localprimitives="clr-namespace:System.Windows.Controls.
Primitives;assembly=System.Windows.Controls.Data"
添加以下 Style。这会创建一个名为 DataGridStyle 的新样式，目标是 DataGrid。
<Style x:Key="DataGridStyle" TargetType="local:DataGrid">
<Setter Property="RowBackground" Value="#FFFFFF" />
<Setter Property="AlternatingRowBackground" Value="#EBEBED" />
<Setter Property="RowHeight" Value="18" />
<Setter Property="GridLinesVisibility" Value="All"/>
<Setter Property="HeadersVisibility" Value="Column" />
<Setter Property="HorizontalGridLinesBrush" Value="#A0A0A0" />
<Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="SelectionMode" Value="Single" />
<Setter Property="CanUserReorderColumns" Value="False" />
<Setter Property="CanUserResizeColumns" Value="False" />
<Setter Property="CanUserSortColumns" Value="True" />
<Setter Property="AutoGenerateColumns" Value="True" />
<Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected" />
</Style>
您的 Styles.xaml 文件应该如下所示
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
xmlns:localprimitives="clr-namespace:System.Windows.Controls.
Primitives;assembly=System.Windows.Controls.Data">
<Style x:Key="DataGridStyle" TargetType="local:DataGrid">
<Setter Property="RowBackground" Value="#FFFFFF" />
<Setter Property="AlternatingRowBackground" Value="#EBEBED" />
<Setter Property="RowHeight" Value="18" />
<Setter Property="GridLinesVisibility" Value="All"/>
<Setter Property="HeadersVisibility" Value="Column" />
<Setter Property="HorizontalGridLinesBrush" Value="#A0A0A0" />
<Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="SelectionMode" Value="Single" />
<Setter Property="CanUserReorderColumns" Value="False" />
<Setter Property="CanUserResizeColumns" Value="False" />
<Setter Property="CanUserSortColumns" Value="True" />
<Setter Property="AutoGenerateColumns" Value="True" />
<Setter Property="RowDetailsVisibilityMode"
Value="VisibleWhenSelected" />
</Style>
接下来，我们需要在 MainPage.xaml 文件中的 DataGrid 中告诉它使用此 Style。将 Style="{StaticResource DataGridStyle}" 添加到 DataGrid 控件
<sdk:DataGrid Name="dataGrid1" Height="235" Width="400"
AutoGenerateColumns="True" HorizontalAlignment="Center"
Style="{StaticResource DataGridStyle}" />
运行应用程序，您应该会看到带有交替行颜色和网格线的 DataGrid。
为 DataGrid 页眉创建玻璃效果样式模板
在这里，我们将为我们的 DataGrid 页眉创建一个玻璃效果模板，并为页眉添加三种状态：正常、鼠标悬停和按下。我们将像以前一样创建一个新样式，其中包含 FontSize 和 Foreground 等属性。我们还将更改 DataGrid 以在渲染列页眉时使用新的页眉模板样式。
<Style TargetType="localprimitives:DataGridColumnHeader"
x:Key="DataGridHeaderGlassEffect" >
<Setter Property="FontSize" Value="11"/ >
<Setter Property="Foreground" Value="#EEEEEE"/>
</Style>
<sdk:DataGrid Name="dataGrid1" Height="235"
Width="400" AutoGenerateColumns="True"
HorizontalAlignment="Center" Style="{StaticResource DataGridStyle}"
ColumnHeaderStyle="{StaticResource DataGridHeaderGlassEffect}" />
接下来，我们为 DataGrid 页眉创建一个样式模板。紧跟在 Setter Property-Foreground 之后，添加以下代码
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="localprimitives:DataGridColumnHeader">
</ControlTemplate>
</Setter.Value>
</Setter>
ControlTemplate 用于自定义目标对象的外观和感觉 — 在我们的例子中是 DataGrid 页眉。这是 WPF 最强大的功能之一，您可以在其中创建期望的用户体验。为了放置我们将要创建的控件，我们首先创建一个 Grid 对象，它将作为我们元素的占位符。在 ControlTemplate 标签内创建网格
<Grid Name="Root">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
</Grid>
Grid 包含 3 列和 3 行，因此我们可以将页眉文本、排序图标和列分隔符放置在相应的位置。首先，我们创建一个 Rectangle 来显示页眉的背景颜色。我们使用 #FF679800 来表示绿色。这被放置在 Grid 标签内，紧跟在 GridColumnDefinition 之后。
<Rectangle x:Name="BackgroundRectangle" Stretch="Fill"
Fill="#FF679800" Grid.ColumnSpan="2" Grid.RowSpan="2" />
1. 创建页眉文本
要显示页眉的文本，我们使用 ContentPresenter 并将其命名为 HeaderText。为了设置 ContentPresenter 的属性，我们使用 {TemplateBinding}。TemplateBinding 将控件模板中属性的值链接到模板化控件上其他公开属性的值。这样，ContentPresenter 就会设置文本数据，并根据网格本身的公开属性设置光标、对齐方式和边距。
<ContentPresenter x:Name="HeaderText" Grid.RowSpan="2"
Content="{TemplateBinding Content}" Cursor="{TemplateBinding Cursor}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}" />
2. 创建列分隔符
我们为列分隔符创建另一个 Rectangle。分隔符的颜色来自 DataGrid 的 SeparatorBrush 属性。如果 DataGrid 没有 SeparatorBrush 的值，它将采用默认颜色。我们也不希望在 DataGrid 的 GridLinesVisibility 属性设置为不显示网格线时显示分隔符。
<Rectangle Name="VerticalSeparator" Grid.RowSpan="2"
Grid.Column="2" Width="1" VerticalAlignment="Stretch"
Fill="{TemplateBinding SeparatorBrush}"
Visibility="{TemplateBinding SeparatorVisibility}" />
3. 创建排序图标
为了创建排序图标，我们使用路径标记语法 [msdn:Path Markup Syntax]。基本上，我们想使用路径坐标 (-3,3) - (3,3) - (0,0) - (-3,3) 来构建排序图标。
因此，我们排序图标的 Data 将是 "F1 M -3,3 L 3,3 L 0,0 Z"。“F1”表示填充规则为非零，“Z”在结尾表示终点应连接到起点。
<Path Grid.RowSpan="2" Name="SortIcon" HorizontalAlignment="Left"
VerticalAlignment="Center" Opacity="0"
Grid.Column="1" Stretch="Uniform" Width="8"
Data="F1 M -3,3 L 3,3 L 0,0 Z ">
<Path.Fill>
<SolidColorBrush Color="#FFFFFFFF" />
</Path.Fill>
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="SortIconTransform" />
</TransformGroup>
</Path.RenderTransform>
</Path>
我们还在 RenderTransform 下添加了一个 ScaleTransform，用于在降序排序时翻转图像。我们将对象的 Opacity 设置为 "0" 而不是 "1"，因为我们只希望在单击列页眉时显示排序图标。这将由我们稍后将讨论的 VisualStateManager 控制。
4. 创建玻璃效果
我们现在已经创建了基本的页眉结构，包括背景、文本、分隔符和排序图标。要创建玻璃效果，我们创建三个层。一个称为“shine”，它在正常状态下创建玻璃的外观；一个称为“glow”，它在鼠标悬停时创建发光效果；另一个称为“dark”，它在按下状态下创建较暗的背景。我们将这些层放置在 Borders 中。我们将把它放在 BackgroundRectangle 和 HeaderText 之间。
<Border BorderBrush="Transparent" BorderThickness="1,1,1,1"
Grid.ColumnSpan="3" Grid.RowSpan="3">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.5*"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<!--dark-->
<Border HorizontalAlignment="Stretch" Margin="0,0,0,0"
x:Name="dark" Width="Auto"
Grid.ColumnSpan="3" Grid.RowSpan="3"
Background="#66000000" Opacity="0"/>
<!--glow -->
<Border Opacity="0" HorizontalAlignment="Stretch"
x:Name="glow" Width="Auto"
Grid.RowSpan="2" Grid.ColumnSpan="3">
<Border.Background>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform ScaleX="1.7" ScaleY="2.2"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="-0.3" Y="-0.1"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#B2FFFFFF" Offset="0"/>
<GradientStop Color="#00FFFFFF" Offset="1"/>
</RadialGradientBrush>
</Border.Background>
</Border>
<!--shine -->
<Border HorizontalAlignment="Stretch" Margin="0,0,0,0"
x:Name="shine" Width="Auto" Grid.ColumnSpan="3">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,0.9" StartPoint="0.5,0.1">
<GradientStop Color="#99FFFFFF" Offset="0"/>
<GradientStop Color="#33FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
</Border>
运行应用程序，您应该会看到带有玻璃页眉的 DataGrid。
添加视觉状态
请注意，即使在鼠标悬停和按下状态下，网格的外观也相同。并且在对页眉进行排序时，排序图标不会显示。我们现在要解决这个问题。我们将为此目的使用 VisualStateManager。VisualStateManager 使您能够为控件指定状态、控件处于特定状态时的外观以及控件何时更改状态。将以下引用包含在 ResourceDictionary 中
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
1. 排序图标状态
我们有三种排序图标状态 — 'Unsorted'、'SortAscending' 和 'SortDescending'。在 <Grid Name="Root"> 标签和三个排序状态之间创建一个 <vsm:VisualStateManager.VisualStateGroups>。
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="SortStates" >
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="00:00:0.1" />
</vsm:VisualStateGroup.Transitions>
<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="SortIconTransform"
Storyboard.TargetProperty="ScaleY"
Duration="0" To="-1" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
为了在排序状态下显示排序图标，我们需要将 "SortIcon" 层的 Opacity 从 0 更改为 1。这是通过使用 DoubleAnimation [mdsn:DoubleAnimation] 来实现的。DoubleAnimation 使用线性插值在指定持续时间内对属性值进行动画处理。TargetName 指定必须受动画影响的控件，TargetProperty 指定会受影响的控件属性。在我们的例子中，TargetName 设置为 "SortIcon" 控件，TargetProperty 设置为 "Opacity"。我们将 Opacity 的值从 0 更改为 1。我们需要动画立即生效，因此将 Duration 属性设置为 0。
因此，在 SortAscending 状态下，我们将 "SortIcon" 的 Opacity 从 0 更改为 1，以便图标可见；在 SortDescending 状态下，我们还将 ScaleY 从 1 更改为 -1，从而反转排序图标。
2. 鼠标悬停和按下状态
接下来，添加正常、鼠标悬停和按下状态的视觉状态
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="glow"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="shine"
Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="dark"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.0000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:00.0010000" Storyboard.TargetName="glow"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
在 MouseOver 状态下，我们通过在 4 秒内将 "glow" 层的 Opacity 从 0 更改为 1 来创建动画淡入发光效果。这是通过使用样条关键帧实现的，例如 DoubleAnimationUsingKeyFrames 段中的 SplineDoubleKeyFrame [mdsn:DoubleAnimationUsingKeyFrames]。DoubleAnimationUsingKeyFrames 沿一组 KeyFrames 对属性值进行动画处理。SplineDoubleKeyFrame 在值之间创建可变过渡。KeyTime 指定特定关键帧应发生的确切时间 — 在我们的例子中是 4 秒 ("00:00:00.4000000")。同样，Storyboard.TargetName 设置为 "glow" 控件，Storyboard.TargetProperty 设置为 "glow" 控件的 "Opactity"。
在 Pressed 状态下，我们隐藏 "glow" 和 "shine" 层，并显示 "dark" 层。"BackgroundRectangle" 对象在按下状态下透过 "dark" 层显示。
…就这样！
运行应用程序，您应该会看到 DataGrid 页眉的以下状态
这是完整的 Styles.xaml 文件
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:System.Windows.Controls;
assembly=System.Windows.Controls.Data"
xmlns:localprimitives="clr-namespace:System.Windows.Controls.
Primitives;assembly=System.Windows.Controls.Data"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
<Style x:Key="DataGridStyle" TargetType="local:DataGrid">
<Setter Property="RowBackground" Value="#FFFFFF" />
<Setter Property="AlternatingRowBackground" Value="#EBEBED" />
<Setter Property="RowHeight" Value="18" />
<Setter Property="GridLinesVisibility" Value="All"/>
<Setter Property="HeadersVisibility" Value="Column" />
<Setter Property="HorizontalGridLinesBrush" Value="#A0A0A0" />
<Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="SelectionMode" Value="Single" />
<Setter Property="CanUserReorderColumns" Value="False" />
<Setter Property="CanUserResizeColumns" Value="False" />
<Setter Property="CanUserSortColumns" Value="True" />
<Setter Property="AutoGenerateColumns" Value="True" />
<Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected" />
</Style >
<Style TargetType="localprimitives:DataGridColumnHeader"
x:Key="DataGridHeaderGlassEffect" >
<Setter Property="FontSize" Value="11"/>
<Setter Property="Foreground" Value="#EEEEEE"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="localprimitives:DataGridColumnHeader">
<Grid Name="Root">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Rectangle x:Name="BackgroundRectangle" Stretch="Fill"
Fill="#FF679800" Grid.ColumnSpan="2"
Grid.RowSpan="2" />
<Border BorderBrush="Transparent"
BorderThickness="1,1,1,1"
Grid.ColumnSpan="3" Grid.RowSpan="3">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.5*"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<!--dark-->
<Border HorizontalAlignment="Stretch"
Margin="0,0,0,0" x:Name="dark"
Width="Auto" Grid.ColumnSpan="3"
Grid.RowSpan="3"
Background="#66000000"
Opacity="0"/>
<!--glow-->
<Border Opacity="0"
HorizontalAlignment="Stretch" x:Name="glow"
Width="Auto" Grid.RowSpan="2"
Grid.ColumnSpan="3">
<Border.Background>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform ScaleX="1.7"
ScaleY="2.2"/>
<SkewTransform AngleX="0"
AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="-0.3"
Y="-0.1"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#B2FFFFFF"
Offset="0"/>
<GradientStop Color="#00FFFFFF"
Offset="1"/>
</RadialGradientBrush>
</Border.Background>
</Border>
<!--shine-->
<Border HorizontalAlignment="Stretch"
Margin="0,0,0,0" x:Name="shine"
Width="Auto"
Grid.ColumnSpan="3">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,0.9"
StartPoint="0.5,0.1">
<GradientStop Color="#99FFFFFF"
Offset="0"/>
<GradientStop Color="#33FFFFFF"
Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
</Border>
<ContentPresenter x:Name="HeaderText"
Grid.RowSpan="2"
Content="{TemplateBinding Content}"
Cursor="{TemplateBinding Cursor}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}" />
<Rectangle Name="VerticalSeparator"
Grid.RowSpan="2" Grid.Column="2"
Width="1" VerticalAlignment="Stretch"
Fill="{TemplateBinding SeparatorBrush}"
Visibility="{TemplateBinding SeparatorVisibility}" />
<Path Grid.RowSpan="2" Name="SortIcon"
RenderTransformOrigin=".5,.5"
HorizontalAlignment="Left"
VerticalAlignment="Center" Opacity="0"
Grid.Column="1" Stretch="Uniform"
Width="8" Data="F1 M -3,3 L 3,3 L 0,0 Z ">
<Path.Fill>
<SolidColorBrush Color="#FFFFFFFF" />
</Path.Fill>
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="SortIconTransform" />
</TransformGroup>
</Path.RenderTransform>
</Path>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="SortStates" >
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="00:00:0.1" />
</vsm:VisualStateGroup.Transitions>
<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="SortIconTransform"
Storyboard.TargetProperty="ScaleY"
Duration="0" To="-1" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="glow"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame
KeyTime="00:00:00.4000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="shine"
Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="dark"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame
KeyTime="00:00:00.0000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:00.0010000"
Storyboard.TargetName="glow"
Storyboard.TargetProperty=
"(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
更改页眉颜色
DataGrid 页眉的基本颜色主题由 "BackgroundRectangle" Rectangle 对象设置。要创建具有任何其他颜色的 DataGrid 页眉，您只需将 "BackgroundRectangle" Rectangle 对象的 Fill 属性更改为任何其他颜色即可。其他所有内容，包括动画发光和排序，都将保持不变。您还可以通过修改样式模板来修改 DataGrid 页眉的外观和感觉，例如为网格页眉创建圆角边框等。可下载的源代码包含这些示例。
