WPF ListBox数据绑定实现列表项按测试结果动态着色问题

解决这个问题的核心是让每个ListBox项绑定自身的测试结果属性，而非全局统一的颜色属性。下面提供两种实用的实现方式：

方案一：使用DataTemplate + DataTrigger（无需额外编写转换器） #

这种方式直接在XAML里通过触发器判断测试结果，设置对应颜色，代码更直观。

1. 定义测试项实体类 #

后台先创建测试项的模型，实现INotifyPropertyChanged以便支持动态更新（如果不需要动态更新，也可以省略，但建议加上）：

public class TestItem : INotifyPropertyChanged
{
    private string _testName;
    private string _testResult;

    public string TestName
    {
        get => _testName;
        set
        {
            _testName = value;
            OnPropertyChanged(nameof(TestName));
        }
    }

    public string TestResult
    {
        get => _testResult;
        set
        {
            _testResult = value;
            OnPropertyChanged(nameof(TestResult));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 准备数据源 #

在窗口/ViewModel中创建测试项集合，并绑定到ListBox：

public ObservableCollection<TestItem> TestItems { get; set; }

public MainWindow()
{
    InitializeComponent();
    TestItems = new ObservableCollection<TestItem>
    {
        new TestItem { TestName = "测试项1", TestResult = "OK" },
        new TestItem { TestName = "测试项2", TestResult = "NOK" },
        new TestItem { TestName = "测试项3", TestResult = "OK" }
    };
    DataContext = this;
}

3. XAML中配置ListBox #

给ListBox设置ItemTemplate，并在TextBlock的Style里添加触发器，根据TestResult的值设置前景色：

<ListBox ItemsSource="{Binding TestItems}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding TestName}">
                <TextBlock.Style>
                    <Style TargetType="TextBlock">
                        <!-- 默认颜色 -->
                        <Setter Property="Foreground" Value="Black"/>
                        <!-- 测试结果为OK时设为绿色 -->
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding TestResult}" Value="OK">
                                <Setter Property="Foreground" Value="Green"/>
                            </DataTrigger>
                            <!-- 测试结果为NOK时设为红色 -->
                            <DataTrigger Binding="{Binding TestResult}" Value="NOK">
                                <Setter Property="Foreground" Value="Red"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </TextBlock.Style>
            </TextBlock>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

方案二：使用IValueConverter（适合复杂颜色逻辑场景） #

如果后续需要扩展更多测试结果对应的颜色，用转换器会更灵活。

1. 实现颜色转换器 #

编写一个实现IValueConverter的类，根据测试结果返回对应的Brush：

public class TestResultToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is string result)
        {
            return result switch
            {
                "OK" => Brushes.Green,
                "NOK" => Brushes.Red,
                _ => Brushes.Black // 默认颜色
            };
        }
        return Brushes.Black;
    }

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

2. XAML中引用转换器 #

先在XAML的资源里声明转换器，然后在绑定Foreground时使用：

<Window.Resources>
    <local:TestResultToColorConverter x:Key="ResultColorConverter"/>
</Window.Resources>

<ListBox ItemsSource="{Binding TestItems}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding TestName}"
                       Foreground="{Binding TestResult, Converter={StaticResource ResultColorConverter}}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

3. 数据源和实体类 #

和方案一的实体类、数据源代码完全一致，无需修改。

两种方案都能实现每个项根据自身测试结果单独设置颜色，你可以根据实际需求选择。如果只是简单的OK/NOK判断，方案一更简洁；如果有更多颜色逻辑需要扩展，方案二更合适。

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