如何在WPF DataGrid首列Tag_Name旁添加不同颜色椭圆

你的核心错误是试图将UI元素（StackPanel/Ellipse）与字符串拼接后赋值给string类型的Tag_Name属性——这完全不符合WPF的数据绑定逻辑，UI元素不能直接作为文本数据绑定到列中。以下是正确的实现方案：

步骤1：扩展数据模型 #

首先给Table类新增一个存储椭圆颜色的属性，用来控制每行椭圆的颜色：

public class Table
{
    public string Tag_Name { get; set; }
    public string Tag_Comment { get; set; }
    public float Value { get; set; }
    public string Unit { get; set; }
    public float Lower { get; set; }
    public float Upper { get; set; }
    // 新增：存储椭圆颜色的属性
    public Color EllipseColor { get; set; }
}

步骤2：填充数据时指定颜色 #

填充集合时给每个Table对象设置不同的椭圆颜色：

datagrid_List.Add(new Table 
{ 
    Tag_Name = "Tag1", 
    Tag_Comment = "", 
    Value = 8, 
    Unit = "kj/h", 
    Lower = 9, 
    Upper = 28,
    EllipseColor = Color.FromArgb(255, 255, 255, 0) // 黄色
});
datagrid_List.Add(new Table 
{ 
    Tag_Name = "Tag2", 
    Tag_Comment = "", 
    Value = 45, 
    Unit = "kj/h", 
    Lower = 9, 
    Upper = 12,
    EllipseColor = Color.FromArgb(255, 255, 0, 0) // 红色
});
datagrid_List.Add(new Table 
{ 
    Tag_Name = "Tag3", 
    Tag_Comment = "", 
    Value = 25, 
    Unit = "kj/h", 
    Lower = 9, 
    Upper = 98,
    EllipseColor = Color.FromArgb(255, 0, 255, 0) // 绿色
});
dataGrid.ItemsSource = datagrid_List;

步骤3：自定义DataGrid列模板（推荐XAML实现） #

将原来的Tag_Name文本列替换为DataGridTemplateColumn，在模板中用StackPanel同时放置椭圆和文本：

<DataGrid x:Name="dataGrid" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <!-- 自定义Tag_Name列：椭圆+文本 -->
        <DataGridTemplateColumn Header="Tag_Name">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="2">
                        <Ellipse Width="8" Height="8" Stroke="Black" StrokeThickness="2" Margin="0 0 4 0">
                            <Ellipse.Fill>
                                <SolidColorBrush Color="{Binding EllipseColor}" />
                            </Ellipse.Fill>
                        </Ellipse>
                        <TextBlock Text="{Binding Tag_Name}" VerticalAlignment="Center" />
                    </StackPanel>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        <!-- 其他列保持原样 -->
        <DataGridTextColumn Header="Tag_Comment" Binding="{Binding Tag_Comment}" />
        <DataGridTextColumn Header="Value" Binding="{Binding Value}" />
        <DataGridTextColumn Header="Unit" Binding="{Binding Unit}" />
        <DataGridTextColumn Header="Lower" Binding="{Binding Lower}" />
        <DataGridTextColumn Header="Upper" Binding="{Binding Upper}" />
    </DataGrid.Columns>
</DataGrid>

可选：代码方式生成列（不推荐） #

如果必须用代码生成列，需要自定义颜色转画刷的转换器，再构建模板：

先实现转换器 #

public class ColorToBrushConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return value is Color color ? new SolidColorBrush(color) : Brushes.Transparent;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

然后生成列 #

dataGrid.AutoGenerateColumns = false;
dataGrid.Columns.Clear();

// 创建自定义Tag_Name列
var tagNameColumn = new DataGridTemplateColumn { Header = "Tag_Name" };
var stackPanelFactory = new FrameworkElementFactory(typeof(StackPanel));
stackPanelFactory.SetValue(StackPanel.OrientationProperty, Orientation.Horizontal);
stackPanelFactory.SetValue(StackPanel.VerticalAlignmentProperty, VerticalAlignment.Center);

// 添加椭圆
var ellipseFactory = new FrameworkElementFactory(typeof(Ellipse));
ellipseFactory.SetValue(Ellipse.WidthProperty, 8.0);
ellipseFactory.SetValue(Ellipse.HeightProperty, 8.0);
ellipseFactory.SetValue(Ellipse.StrokeProperty, Brushes.Black);
ellipseFactory.SetValue(Ellipse.StrokeThicknessProperty, 2.0);
ellipseFactory.SetBinding(Ellipse.FillProperty, new Binding("EllipseColor") { Converter = new ColorToBrushConverter() });
stackPanelFactory.AppendChild(ellipseFactory);

// 添加文本
var textBlockFactory = new FrameworkElementFactory(typeof(TextBlock));
textBlockFactory.SetBinding(TextBlock.TextProperty, new Binding("Tag_Name"));
textBlockFactory.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Center);
textBlockFactory.SetValue(TextBlock.MarginProperty, new Thickness(4,0,0,0));
stackPanelFactory.AppendChild(textBlockFactory);

// 设置模板
tagNameColumn.CellTemplate = new DataTemplate { VisualTree = stackPanelFactory };
dataGrid.Columns.Add(tagNameColumn);

// 添加其他列
dataGrid.Columns.Add(new DataGridTextColumn { Header = "Tag_Comment", Binding = new Binding("Tag_Comment") });
dataGrid.Columns.Add(new DataGridTextColumn { Header = "Value", Binding = new Binding("Value") });
dataGrid.Columns.Add(new DataGridTextColumn { Header = "Unit", Binding = new Binding("Unit") });
dataGrid.Columns.Add(new DataGridTextColumn { Header = "Lower", Binding = new Binding("Lower") });
dataGrid.Columns.Add(new DataGridTextColumn { Header = "Upper", Binding = new Binding("Upper") });

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