【1.35 DataGrid指定单元格设置文本颜色】WPF案例代码解析
项目需求
显示如下表格内容,当有 NG 项时判定结果和原因显示为红色
解决思路
我使用了 HandyControl 这个库,在它提供的 DataGrid 样式基础上做了修改
表头那个样式我直接隐藏原表头,然后用 Grid + TextBlock 堆砌,比较方便;
单元格边框我没有修改样式代码,直接再贴了一层 Border
<Grid Grid.RowSpan="2" Margin="6,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="LightGray" BorderThickness="0,0,1,0"/>
<Border Grid.Column="1" BorderBrush="LightGray" BorderThickness="0,0,1,0"/>
<Border Grid.Column="2" BorderBrush="LightGray" BorderThickness="0,0,1,0" Margin="0,23,0,0"/>
<Border Grid.Column="3" BorderBrush="LightGray" BorderThickness="0,0,1,0"/>
<Border Grid.Column="4" BorderBrush="LightGray" BorderThickness="0,0,1,0" Margin="0,23,0,0"/>
<Border Grid.Column="5" BorderBrush="LightGray" BorderThickness="0,0,1,0"/>
<Border Grid.Column="6" BorderBrush="LightGray" BorderThickness="0,0,1,0" Margin="0,23,0,0"/>
<Border Grid.Column="7" BorderBrush="LightGray" BorderThickness="0,0,1,0"/>
<Border Grid.Column="8" BorderBrush="LightGray" BorderThickness="0,0,1,0" Margin="0,23,0,0"/>
<Border Grid.Column="9" BorderBrush="LightGray" BorderThickness="0,0,1,0"/>
<Border Grid.Column="10" BorderBrush="LightGray" BorderThickness="0,0,1,0" Margin="0,23,0,0"/>
<Border Grid.Column="11" BorderBrush="LightGray" BorderThickness="0,0,1,0"/>
<Border Grid.Column="12" BorderBrush="LightGray" BorderThickness="0,0,1,0"/>
</Grid>
由于单元格内容设置了绑定,对其中的几列单独设置单元格样式以便于针对 NG 值设置文本颜色
<!-- 转接片检查 -->
<DataGridTextColumn Width="*" IsReadOnly="True" Binding="{Binding PanDing_pian}" Header="判定" CellStyle="{DynamicResource MyDataGridCellSytleNG_PanDing_pian}"/>
<DataGridTextColumn Width="2*" IsReadOnly="True" Binding="{Binding Ng_pian}" Header="不良原因" CellStyle="{DynamicResource MyDataGridCellSytleNG}"/>
资源样式
根据内容修改文本颜色,如此设计了 5 种样式,对应 5 种判定 NG 结果;
<Style x:Key="MyDataGridCellSytleNG_PanDing_pian" BasedOn="{StaticResource MyDataGridCellSytle}" TargetType="DataGridCell">
<Style.Triggers>
<DataTrigger Binding="{Binding PanDing_pian}" Value="NG">
<Setter Property="Foreground" Value="{DynamicResource DangerBrush}"/>
</DataTrigger>
</Style.Triggers>
</Style>
不良原因则统一设计为一种,并新建一个转换器,将包含文本内容转换为 NG 即可
转换器内容
using System;
using System.Globalization;
using System.Windows.Data;
namespace Wpf_GRP_HJ.GRP_HJ.Converter
/// ----------------------------------------------------------------
/// Author : CoderMan/CoderdMan1012
/// Created Time: 2022/11/26 18:06:59
/// Description :
/// ----------------------------------------------------------------
/// Version Modified Time Modified By Modified Content
/// V1.0.0.0 2022/11/26 18:06:59 CoderMan/CoderdMan1012 首次编写
public class StringToNgConverter : IValueConverter
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
return value == null ? "" : value.ToString() != "" ? "NG" : "";
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
return value;
资源样式
<ct:StringToNgConverter x:Key="StringToNg"/>
<Style x:Key="MyDataGridCellSytleNG" BasedOn="{StaticResource MyDataGridCellSytle}" TargetType="DataGridCell">
<Style.Triggers>
<DataTrigger Binding="{Binding Ng_pian, Converter={StaticResource StringToNg}}" Value="NG">
<Setter Property="Foreground" Value="{DynamicResource DangerBrush}"/>
</DataTrigger>
<DataTrigger Binding="{Binding Ng_tj, Converter={StaticResource StringToNg}}" Value="NG">
<Setter Property="Foreground" Value="{DynamicResource DangerBrush}"/>
</DataTrigger>
<DataTrigger Binding="{Binding Ng_wg, Converter={StaticResource StringToNg}}" Value="NG">
<Setter Property="Foreground" Value="{DynamicResource DangerBrush}"/>
</DataTrigger>
<DataTrigger Binding="{Binding Ng_jc, Converter={StaticResource StringToNg}}" Value="NG">
<Setter Property="Foreground" Value="{DynamicResource DangerBrush}"/>