▪ 前言
.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>
以上是 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>
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>
▪ 高级样式之单元格
此处单元格样式之所说它为高级样式是因为:元素 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>
在上面的代码中,我们将单元格 DataGridCell
的模板修改为:<Border ...><ContentPresenter/></Boder>
,同时将属性 Padding
继承到新的模板中。当然你可以根据需要继续继承其他属性(例如:Height、Margin等等)
代码中的 DataTrigger
主要作用是当选中时应用其样式属性。