长春做网站新格公司湛江网站建设公司

---

前言

最近所实现的功能里，表DataGrid是一个很常用的控件，这篇文章是对DataGrid功能的总览，方便查看

---

一、DataGrid基础功能

1.DataGrid基础属性

DataGrid 使用了 HandyControl库 ，代码如下：

<DataGridx:Name="Result_DataGrid"d:ItemsSource="{d:SampleData ItemCount=7}"RowHeaderWidth="60"AutoGenerateColumns="False"CanUserAddRows="False"HeadersVisibility="All"hc:DataGridAttach.CanUnselectAllWithBlankArea="True"hc:DataGridAttach.ShowRowNumber="True"VirtualizingStackPanel.IsVirtualizing="True"VirtualizingStackPanel.VirtualizationMode="Recycling"ItemsSource="{Binding TestList}"AlternationCount="2"RowStyle="{DynamicResource DataGridRowStyle}"SelectedItem="{Binding SelTestItem}">
</DataGrid>

代码解析：
1）通用基础属性：

• d:ItemsSource=“{d:SampleData ItemCount = 7}” ：设计时数据（只在 Visual Studio 设计器中显示），显示7条示例数据。
• RowHeaderWidth=“60”：设置行标题宽度为60
• AutoGenerateColumns=“False”：不自动生成列，需要手动定义列
• CanUserAddRows=“False”：禁止用户添加新行
• HeadersVisibility=“All”：显示所有标题（行标题和列标题）

2）HandyControl扩展属性:

• hc:DataGridAttach.CanUnselectAllWithBlankArea=“True”：点击空白区域可以取消所有选中项
• hc:DataGridAttach.ShowRowNumber=“True”：显示行号

3）性能优化

• VirtualizingStackPanel.IsVirtualizing=“True”：启用虚拟化，提高大数据量时的性能
• VirtualizingStackPanel.VirtualizationMode=“Recycling”：使用回收虚拟化模式

4）数据绑定

• ItemsSource=“{Binding TestList}”：绑定到 ViewModel 的 TestList 属性作为数据源
• SelectedItem=“{Binding SelTestItem}”：将选中的项绑定到 ViewModel 的 SelTestItem 属性（选中行）

2.DataGridTextColumn属性

代码如下（示例）：

<DataGridx:Name="Result_DataGrid"d:ItemsSource="{d:SampleData ItemCount=7}"RowHeaderWidth="60"ItemsSource="{Binding TestList}"SelectedItem="{Binding SelTestItem}"><DataGrid.Columns><DataGridTextColumnWidth="auto"Binding="{Binding TestName, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"ClipboardContentBinding="{x:Null}"Header="测试名称" /></DataGrid.Columns>
</DataGrid>

DataGridTextColumn 代码解析：

• Width=“auto” ：设置列宽（auto: 自适应宽度 ，NaN: 自动拉伸，100: 设置宽度实际值 ）
• Binding=“{Binding TestName, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}”
  • Binding TestName ：绑定数据对象的TestName属性
  • UpdateSourceTrigger=PropertyChanged ：实时更新
  • Mode = TwoWay ：双向绑定
• Header=“测试名称” ：设置列标题
• ClipboardContentBinding=“{x:Null}” ：禁用该列的剪贴板复制功能

3.DataGridTemplateColumn属性

代码如下：

<DataGridx:Name="Result_DataGrid"d:ItemsSource="{d:SampleData ItemCount=7}"RowHeaderWidth="60"ItemsSource="{Binding TestList}"><DataGrid.Columns><DataGridTemplateColumn CanUserResize="False" Header="测试项目"><DataGridTemplateColumn.CellTemplate><DataTemplate><StackPanel Orientation="Horizontal"><TextBlock Margin="0 0 30 0" Text="{Binding TestProject1, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/><TextBlock Text="{Binding TestProject2, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"></StackPanel></DataTemplate></DataGridTemplateColumn.CellTemplate></DataGridTemplateColumn></DataGrid.Columns>
</DataGrid>

DataGridTemplateColumn 代码解析：

• CanUserResize=“False” ：禁止用户手动调整该列的宽度
• Header=“测试项目” ：设置列标题为"测试项目"
• CellTemplate(单元格模板)：DataTemplate:定义单元格的视觉结构 ，可通过StackPanel 实现输出多个控件

4.表DataGrid点击单元格或行时弹出两个按钮

使用ContextMenu(右侧菜单)，代码如下：

<DataGrid>
<DataGrid.ContextMenu><ContextMenu><MenuItemCommand="{Binding Test1Command}"CommandParameter="{Binding ElementName=Result_DataGrid}"Header="测试1" /><MenuItemCommand="{Binding Test2Command}"CommandParameter="{Binding ElementName=Result_DataGrid}"Header="测试2" /></ContextMenu>
</DataGrid.ContextMenu>
</DataGrid>

二、其他功能

1.表行DataGrid出现斑马纹效果

1）在Resources中编写样式Style，代码如下：

<Window.Resources><Style x:Key="DataGridRowStyle" TargetType="DataGridRow"><Style.Triggers><!--交替行颜色（斑马纹效果）AlternationIndex(交替索引) 为 0 时，背景为白色；AlternationIndex(交替索引) 为 1 时，背景为浅蓝色；--><Trigger Property="AlternationIndex" Value="0"><Setter Property="Background" Value="#FFFFFF" /><!--白色--></Trigger><Trigger Property="AlternationIndex" Value="1"><Setter Property="Background" Value="LightBlue" /><!--浅蓝色--></Trigger><!--  IsMouseOver：鼠标悬停效果  --><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="LightGray" /><!--浅灰色--></Trigger><!-- IsSelected：选中行效果 --><Trigger Property="IsSelected" Value="True"><Setter Property="Background" Value="#FF3393DF" /><!--蓝色--></Trigger></Style.Triggers></Style>
</Window.Resources>

2）在相应的DataGrid使用该样式，代码如下：

<DataGridx:Name="Result_DataGrid"ItemsSource="{Binding TestList}"AlternationCount="2"RowStyle="{DynamicResource DataGridRowStyle}"SelectedItem="{Binding SelTestItem}">
</DataGrid>

代码解析：

• AlternationCount=“2” ：设置交替行模式的循环周期（2：表示两种背景样式交替出现）
• RowStyle=“{DynamicResource DataGridRowStyle}”：将行样式设置为DataGridRowStyle

2.表行DataGrid字体、行背景标红

可通过触发器实现，将触发器写成Style样式，通过调用实现效果，具体分为单条件、多条件触发两种。
1）单条件触发器，代码如下（示例）：

<!--触发器：Results 为 NG 字体变红 -->
<DataTrigger Binding="{Binding TestResult}" Value="NG"><Setter Property="Foreground" Value="Red" />
</DataTrigger>

注：如想实现行背景变红，需改为<Setter Property="Background" Value="Red" />

2）多条件触发器，代码如下（示例）：

<MultiDataTrigger><!--多条件触发器：同时满足MultiDataTrigger.Conditions里的条件--><MultiDataTrigger.Conditions><Condition Binding="{Binding Results}" Value="NG" /><Condition Binding="{Binding ElementName=self, Path=DataContext.isMaskRedChecked}" Value="True" /></MultiDataTrigger.Conditions><MultiDataTrigger.Setters><!--背景为红色，字体为白色--><Setter Property="Background" Value="Red" /><Setter Property="Foreground" Value="White" /></MultiDataTrigger.Setters>
</MultiDataTrigger>

---