WPF 之 DataGrid 入门实践三：样式美化_wpf datagrid 美化

▪ 前言

.Net 对 UI 控件提供了丰富的样式设置属性，但是当你不是很熟练或者长时间没有使用后很容易忘记其样式的属性，这里对常用的 DataGrid 样式设置做个笔记，以便日后查阅。

▪ 基本样式

DataGrid 的视图代码：

# xaml
<DataGrid Style="{StaticResource styleDataGridView}" Height="600">
    <DataGrid.Columns>
        <DataGridTextColumn Header="姓名" Binding="{Binding Path=Name}" />
        <DataGridTextColumn Header="年龄" Binding="{Binding Path=Age}" />
    </DataGrid.Columns>
</DataGrid>
1
2
3
4
5
6
7

以上是 DataGrid 视图的代码，类似于 HTML 代码；其中 Binding 属性是数据绑定时使用的，我们在其他章节会介绍，这里无需关系

DataGrid 的样式代码：

# style
<Style x:Key="styleDataGridView" TargetType="{x:Type DataGrid}">
    <Setter Property="Background" Value="#FFFFFFFF"></Setter>
    <Setter Property="VerticalAlignment" Value="Top"></Setter>
    
    // 设置 DataGrid 只读
    <Setter Property="IsReadOnly" Value="True"></Setter>
    <Setter Property="RowHeaderWidth" Value="0"></Setter>
    
    // 设置 DataGrid 框的 Border 宽度
    <Setter Property="BorderThickness" Value="0"></Setter>
    
    // 禁用行高度自由调整
    <Setter Property="CanUserResizeRows" Value="False"></Setter>
    
    // 自动产生列
    // 如果为 True，那么上面的 DataGrid 会有四列：姓名、年龄、name、age
    // 如果为 Flash，那么上面的 DataGird 只有两列：姓名、年龄
    <Setter Property="AutoGenerateColumns" Value="False"></Setter>
    
    // DataGrid 列表头的样式
    <Setter Property="ColumnHeaderStyle" Value="{DynamicResource styleDataGridViewColumnHeader}"></Setter>
    
    // 数据网格线行 Border 的颜色
    <Setter Property="HorizontalGridLinesBrush">
        <Setter.Value>
            <SolidColorBrush Color="#FFDDDDDD"/>
        </Setter.Value>
    </Setter>
    
    // 数据网格线列 Border 的颜色
    <Setter Property="VerticalGridLinesBrush">
        <Setter.Value>
            <SolidColorBrush Color="#FFEEEEEE"/>
        </Setter.Value>
    </Setter>
</Style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

DataGrid 列表头的样式代码：

# style
<Style x:Key="styleDataGridViewColumnHeader" TargetType="{x:Type DataGridColumnHeader}" >
    <Setter Property="Height" Value="30"></Setter>
    <Setter Property="Padding" Value="10 5 10 5"></Setter>
    <Setter Property="Background" Value="#FFEEEEEE"></Setter>
    <Setter Property="BorderBrush" Value="#FFFFFFFF"></Setter>
    <Setter Property="BorderThickness" Value="0 0 1 0"></Setter>
</Style>
1
2
3
4
5
6
7
8

▪ 高级样式之单元格

此处单元格样式之所说它为高级样式是因为：元素 DataGridCell 无法直接设置 Padding、Height 等属性，而是需要使用 ControlTemplate 属性重构其内置元素。

# style
<Style x:Key="styleDataGridViewCell" TargetType="{x:Type DataGridCell}">
    <Setter Property="Padding" Value="5" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridCell}">
                <Border x:Name="styleDataGridViewCellBorder" Padding="{TemplateBinding Padding}">
                    <ContentPresenter />
                </Border>
                <ControlTemplate.Triggers>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsSelected}" Value="true">
                        <Setter TargetName="styleDataGridViewCellBorder" Property="Background" Value="#CC119EDA"/>
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在上面的代码中，我们将单元格 DataGridCell 的模板修改为：<Border ...><ContentPresenter/></Boder>，同时将属性 Padding 继承到新的模板中。当然你可以根据需要继续继承其他属性（例如：Height、Margin等等）

代码中的 DataTrigger 主要作用是当选中时应用其样式属性。