WPF DataGrid：如何根据单元格内容设置单元格颜色

我正在学习WPF，开发一款应用，通过代码构建表格展示计算数据，目前数据展示功能正常，但遇到两个问题：

1. 尝试用触发器高亮显示内容为"ON"的单元格，代码无效果
2. 手动定义列后，DataGrid左侧出现额外列

当前已实现的代码 #

XAML 初始代码 #

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
    <DataGrid Height="308" Margin="12,21,0,0" Name="mydataGrid" Width="722"/>
</ScrollViewer>

后台创建DataTable代码 #

dt = new DataTable("drx");
DataColumn sfn = new DataColumn("SFN", typeof(int));
DataColumn sbf0 = new DataColumn("subframe0", typeof(string));
DataColumn sbf1 = new DataColumn("subframe1", typeof(string));
DataColumn sbf2 = new DataColumn("subframe2", typeof(string));
DataColumn sbf3 = new DataColumn("subframe3", typeof(string));
DataColumn sbf4 = new DataColumn("subframe4", typeof(string));
DataColumn sbf5 = new DataColumn("subframe5", typeof(string));
DataColumn sbf6 = new DataColumn("subframe6", typeof(string));
DataColumn sbf7 = new DataColumn("subframe7", typeof(string));
DataColumn sbf8 = new DataColumn("subframe8", typeof(string));
DataColumn sbf9 = new DataColumn("subframe9", typeof(string));

dt.Columns.Add(sfn);
dt.Columns.Add(sbf0);
dt.Columns.Add(sbf1);
dt.Columns.Add(sbf2);
dt.Columns.Add(sbf3);
dt.Columns.Add(sbf4);
dt.Columns.Add(sbf5);
dt.Columns.Add(sbf6);
dt.Columns.Add(sbf7);
dt.Columns.Add(sbf8);
dt.Columns.Add(sbf9);

数据绑定代码 #

foreach (var item in data.dataGrid)
{
    DataRow dr = dt.NewRow();
    dr[0] = item.sfn;
    dr[1] = item.subframes[0] ? "ON" : "";
    dr[2] = item.subframes[1] ? "ON" : "";
    dr[3] = item.subframes[2] ? "ON" : "";
    dr[4] = item.subframes[3] ? "ON" : "";
    dr[5] = item.subframes[4] ? "ON" : "";
    dr[6] = item.subframes[5] ? "ON" : "";
    dr[7] = item.subframes[6] ? "ON" : "";
    dr[8] = item.subframes[7] ? "ON" : "";
    dr[9] = item.subframes[8] ? "ON" : "";
    dr[10] = item.subframes[9] ? "ON" : "";

    dt.Rows.Add(dr);
}

mydataGrid.ItemsSource = dt.DefaultView;
mydataGrid.Items.Refresh();

问题解决方法 #

问题1：触发器无法高亮"ON"单元格 #

之前的代码无效有两个核心原因：

• 第一次尝试时绑定路径{Binding Name}错误，DataTable中无此列
• 仅给单个列设置样式，且只作用于内部TextBlock，未填充整个单元格

解决方案：

给DataGridCell设置样式（而非仅ElementStyle），确保背景色覆盖整个单元格，同时为所有需要高亮的列配置正确绑定路径。可以通过全局Style减少重复代码：

全局Style定义（放在Window.Resources中）

<Window.Resources>
    <Style x:Key="HighlightOnCellStyle" TargetType="DataGridCell">
        <Style.Triggers>
            <Trigger Property="Content.Text" Value="ON">
                <Setter Property="Background" Value="LightGreen"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

修改后的DataGrid XAML代码

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
    <DataGrid Height="308" Margin="12,21,0,0" Name="mydataGrid" Width="722" AutoGenerateColumns="False">
        <DataGrid.Columns>
            <DataGridTextColumn Header="SFN" Binding="{Binding SFN}"/>
            <DataGridTextColumn Header="subframe0" Binding="{Binding subframe0}" CellStyle="{StaticResource HighlightOnCellStyle}"/>
            <DataGridTextColumn Header="subframe1" Binding="{Binding subframe1}" CellStyle="{StaticResource HighlightOnCellStyle}"/>
            <DataGridTextColumn Header="subframe2" Binding="{Binding subframe2}" CellStyle="{StaticResource HighlightOnCellStyle}"/>
            <DataGridTextColumn Header="subframe3" Binding="{Binding subframe3}" CellStyle="{StaticResource HighlightOnCellStyle}"/>
            <DataGridTextColumn Header="subframe4" Binding="{Binding subframe4}" CellStyle="{StaticResource HighlightOnCellStyle}"/>
            <DataGridTextColumn Header="subframe5" Binding="{Binding subframe5}" CellStyle="{StaticResource HighlightOnCellStyle}"/>
            <DataGridTextColumn Header="subframe6" Binding="{Binding subframe6}" CellStyle="{StaticResource HighlightOnCellStyle}"/>
            <DataGridTextColumn Header="subframe7" Binding="{Binding subframe7}" CellStyle="{StaticResource HighlightOnCellStyle}"/>
            <DataGridTextColumn Header="subframe8" Binding="{Binding subframe8}" CellStyle="{StaticResource HighlightOnCellStyle}"/>
            <DataGridTextColumn Header="subframe9" Binding="{Binding subframe9}" CellStyle="{StaticResource HighlightOnCellStyle}"/>
        </DataGrid.Columns>
    </DataGrid>
</ScrollViewer>

问题2：DataGrid左侧出现额外列 #

原因是DataGrid默认开启自动生成列（AutoGenerateColumns="True"），手动定义列后，自动生成的列与手动列重复显示，左侧额外列就是自动生成的内容。

解决方案：

在DataGrid标签中添加AutoGenerateColumns="False"，仅显示手动定义的列。

内容的提问来源于stack exchange，提问作者Fran