如何在DataGrid 中设计一个美观的表头

在《WPF 4 DataGrid 控件（基本功能篇）》中我们已经学习了DataGrid 的基本功能及使用方法。本篇将继续介绍自定义DataGrid 样式的相关内容，其中将涉及到ColumnHeader、RowHeader、Row、Cell 的各种样式设置。

ColumnHeaderStyle 属性

一般来讲列表头是用户首先注意的内容，那么如何在DataGrid 中设计一个美观的表头呢。我们既可以在<DataGrid>中通过<DataGrid.ColumnHeaderStyle>来全局定义；也可以针对个别列在<DataGrid.Columns>中通过<DataGridColumn.HeaderStyle>定义。

<DataGrid x:Name="dataGrid" ItemsSource="{Binding}" AutoGenerateColumns="False"

SelectionUnit="CellOrRowHeader" IsReadOnly="True">

<DataGrid.ColumnHeaderStyle>

<Style TargetType="DataGridColumnHeader">

<Setter Property="Background">

<Setter.Value>

<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

<GradientStop Color="White" Offset="0"/>

<GradientStop Color="Yellow" Offset="0.5"/>

<GradientStop Color="White" Offset="1"/>

</LinearGradientBrush>

</Setter.Value>

</Setter>

<Setter Property="Foreground" Value="Black"/>

<Setter Property="FontSize" Value="13" />

</Style>

</DataGrid.ColumnHeaderStyle>

<DataGrid.Columns>

<DataGridTextColumn Header="Name" Binding="{Binding Name}">

<DataGridColumn.HeaderStyle>

<Style TargetType="DataGridColumnHeader">

<Setter Property="Background">

<Setter.Value>

<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

<GradientStop Color="White" Offset="0"/>

<GradientStop Color="SkyBlue" Offset="0.5"/>

<GradientStop Color="White" Offset="1"/>

</LinearGradientBrush>

</Setter.Value>

</Setter>

<Setter Property="Foreground" Value="Black"/>

<Setter Property="FontSize" Value="13"/>

<Setter Property="Width" Value="80"/><Style.Triggers>

<Trigger Property="IsMouseOver" Value="True">

<Setter Property="ToolTip" Value="Sort by Column"/>

</Trigger>

</Style.Triggers>

</Style>

</DataGridColumn.HeaderStyle>

</DataGridTextColumn>

<DataGridTextColumn Header="Age" Binding="{Binding Age}">

<DataGridColumn.HeaderStyle>

<Style TargetType="DataGridColumnHeader">

<Setter Property="Background">

<Setter.Value>

<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

<GradientStop Color="White" Offset="0"/>

<GradientStop Color="LightGreen" Offset="0.5"/>

<GradientStop Color="White" Offset="1"/>

</LinearGradientBrush>

</Setter.Value>

</Setter>

<Setter Property="Foreground" Value="Black"/>

<Setter Property="FontSize" Value="13"/>

<Setter Property="Width" Value="50"/>

</Style>

</DataGridColumn.HeaderStyle>

</DataGridTextColumn>

<DataGridComboBoxColumn Header="Sex"

SelectedItemBinding="{Binding Sex}"

ItemsSource="{Binding Source={StaticResource sexEnum}}">

<DataGridColumn.HeaderStyle>

<Style TargetType="DataGridColumnHeader">

<Setter Property="Background">

<Setter.Value>

<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

<GradientStop Color="White" Offset="0"/>

<GradientStop Color="LightPink" Offset="0.5"/>

<GradientStop Color="White" Offset="1"/>

</LinearGradientBrush>

</Setter.Value>

</Setter>

<Setter Property="Foreground" Value="Black"/>

<Setter Property="FontSize" Value="13"/>

<Setter Property="Width" Value="70"/>

</Style>

</DataGridColumn.HeaderStyle>

</DataGridComboBoxColumn>

<DataGridCheckBoxColumn Header="Pass Exam?" Width="100"

Binding="{Binding Pass}"/>

<DataGridHyperlinkColumn Header="Email" Width="150"

Binding="{Binding Email}"/>

</DataGrid.Columns>

</DataGrid>

其效果如下图所示，Name、Age、Sex 列会按各自的样式显示。未定义样式的Pass Exam 和Email 列将按<DataGrid.ColumnHeaderStyle>全局定义显示，并且当鼠标移置到这两列上方时会有“Sort by Column”提示信息。

RowHeaderStyle 属性

列表头介绍完了下面再来看看行表头，其定义方式与列表头相同，直接在<DataGrid>中加入<DataGrid.RowHeaderStyle>进行全局定义，见如下代码：

<DataGrid.RowHeaderStyle>

<Style TargetType="DataGridRowHeader">

<Setter Property="Content" Value=" ·¤"/>

<Setter Property="Width" Value="10"/>

<Setter Property="Background">

<Setter.Value>

<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">

<GradientStop Color="White" Offset="0"/>

<GradientStop Color="SkyBlue" Offset="1"/>

</LinearGradientBrush>

</Setter.Value>

</Setter>

<Style.Triggers>

<Trigger Property="IsMouseOver" Value="True">

<Setter Property="ToolTip" Value="Select this Row"/>

</Trigger>

</Style.Triggers>

</Style>

</DataGrid.RowHeaderStyle>

效果图：

RowStyle 属性

接下来我们来为行设置样式，使每行的颜色变为蓝色，并且当鼠标移至行上方时，其背景颜色会变为灰色，文字颜色变为白色。

<DataGrid.RowStyle>

<Style TargetType="DataGridRow">

<Setter Property="Background" Value="LightBlue" />

<Style.Triggers>

<Trigger Property="IsMouseOver" Value="True">

<Setter Property="Background" Value="LightGray"/>

<Setter Property="Foreground" Value="White"/>

</Trigger>

</Style.Triggers>

</Style>

</DataGrid.RowStyle>

import fl.data.DataProvider

var dataGrid:DataGrid = new DataGrid()

dataGrid.x = 100

dataGrid.y = 100

dataGrid.setSize(400,200)

addChild(dataGrid)

var d:Array = new Array()

d = [

{姓名:'张三',一月:200,二月:300,三月:400, rowColor:'red'},

{姓名:'李四',一月:300,二月:400,三月:500, rowColor:'green'},

{姓名:'王五',一月:400,二月:500,三月:600, rowColor:'yellow'}

]

dataGrid.dataProvider = new DataProvider(d)

dataGrid.columns = ['姓名','一月','二月' , '三月']//这里就是设置表头的。。

dataGrid.setStyle("cellRenderer", CellStyle1)

DataGrid1.Columns(0).Caption = "列名1"

DataGrid1.Columns(1).Caption = "列名2"

....................

---