---

前言

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

---

一、DataGrid基础功能

1.DataGrid基础属性

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

<DataGrid
    x: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属性

代码如下（示例）：

<DataGrid
    x:Name="Result_DataGrid"
    d:ItemsSource="{d:SampleData ItemCount=7}"
    RowHeaderWidth="60"
    ItemsSource="{Binding TestList}"
    SelectedItem="{Binding SelTestItem}">
    <DataGrid.Columns>
    	<DataGridTextColumn
    		Width="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属性

代码如下：

<DataGrid
    x: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>
        <MenuItem
            Command="{Binding Test1Command}"
            CommandParameter="{Binding ElementName=Result_DataGrid}"
            Header="测试1" />
        <MenuItem
            Command="{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使用该样式，代码如下：

<DataGrid
    x: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>

---