关于WPF（C#）中ProgressBar双颜色显示的技术咨询

嘿，这个需求我之前刚好做过类似的，WPF默认的ProgressBar确实没法直接实现这种分段标记异常的效果，但咱们可以通过自定义ControlTemplate+数据绑定来完美搞定！下面给你一步步拆解实现思路和代码：

核心思路 #

我们需要在ProgressBar的进度区域里，除了正常的进度填充色（比如绿色），还要叠加对应异常位置的红色分段。具体来说：

• 维护一个集合来记录出现异常的迭代索引（比如第5、7次）
• 自定义ProgressBar的模板，用Grid承载正常进度和异常分段
• 通过数据绑定动态生成红色分段，根据索引计算每个分段的位置和宽度

具体实现步骤 #

1. 准备数据和模拟迭代逻辑 #

首先在你的Window后台代码（或者ViewModel）里定义异常索引集合，并模拟迭代过程：

using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Globalization;

public partial class MainWindow : Window
{
    public ObservableCollection<int> ErrorIndices { get; set; } = new ObservableCollection<int>();

    public MainWindow()
    {
        InitializeComponent();
        DataContext = this;
    }

    // 模拟迭代过程，触发异常时记录索引
    private async void StartIteration_Click(object sender, RoutedEventArgs e)
    {
        ProgressBar.Maximum = 25;
        ErrorIndices.Clear(); // 每次迭代前重置异常记录
        for (int i = 1; i <= 25; i++)
        {
            // 模拟第5、7次出现异常的场景
            if (i == 5 || i == 7)
            {
                ErrorIndices.Add(i);
            }
            ProgressBar.Value = i;
            await Task.Delay(200); // 模拟耗时操作
        }
    }
}

2. 实现转换Converter #

我们需要两个Converter来计算异常分段的宽度和左边距，确保分段位置和ProgressBar的最大值匹配：

// 将索引转换为分段宽度的Converter
public class IndexToWidthConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        if (values.Length < 2 || !(values[0] is double actualWidth) || !(parameter is double max))
            return 0;
        
        // 每个分段宽度 = ProgressBar总宽度 / 最大值
        return actualWidth / max;
    }

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

// 将索引转换为左边距的Converter
public class IndexToMarginConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (!(value is int index) || !(parameter is double max))
            return new Thickness(0);
        
        // 左边距 = (索引/最大值) * 100%，确保分段对应正确位置
        return new Thickness((index / max) * 100, 0, 0, 0);
    }

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

3. 自定义ProgressBar的ControlTemplate #

在Window的Resources里定义自定义样式，替换默认的ProgressBar模板：

<Window x:Class="WpfProgressBarDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfProgressBarDemo"
        Title="MainWindow" Height="300" Width="600">
    <Window.Resources>
        <local:IndexToWidthConverter x:Key="IndexToWidthConverter" />
        <local:IndexToMarginConverter x:Key="IndexToMarginConverter" />

        <Style x:Key="CustomProgressBarStyle" TargetType="{x:Type ProgressBar}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ProgressBar}">
                        <Grid x:Name="TemplateRoot" SnapsToDevicePixels="true">
                            <!-- 进度条背景轨道 -->
                            <Border x:Name="PART_Track" Background="#FFE6E6E6" CornerRadius="2" />
                            <!-- 进度显示区域，ClipToBounds确保超出部分被裁剪 -->
                            <Grid x:Name="PART_Indicator" ClipToBounds="true" HorizontalAlignment="Left">
                                <!-- 正常进度的绿色填充 -->
                                <Rectangle x:Name="IndicatorRect" Fill="#FF00BC00" />
                                <!-- 动态生成异常红色分段的ItemsControl -->
                                <ItemsControl ItemsSource="{Binding ErrorIndices}">
                                    <ItemsControl.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <Grid IsItemsHost="True" />
                                        </ItemsPanelTemplate>
                                    </ItemsControl.ItemsPanel>
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <Rectangle Fill="Red"
                                                       Height="Auto"
                                                       <!-- 绑定分段宽度：ProgressBar总宽度 / 最大值 -->
                                                       Width="{Binding ElementName=TemplateRoot, Path=ActualWidth, 
                                                                        Converter={StaticResource IndexToWidthConverter}, 
                                                                        ConverterParameter={Binding ElementName=ProgressBar, Path=Maximum}}">
                                                <Rectangle.Margin>
                                                    <!-- 绑定左边距：(索引/最大值)*100% -->
                                                    <Binding Converter={StaticResource IndexToMarginConverter} 
                                                             ConverterParameter={Binding ElementName=ProgressBar, Path=Maximum}} />
                                                </Rectangle.Margin>
                                            </Rectangle>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                            </Grid>
                            <!-- 可选：默认的光晕效果，不需要可以删掉 -->
                            <Border x:Name="PART_GlowOverlay" CornerRadius="2" Opacity="0.2" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <Grid>
        <ProgressBar x:Name="ProgressBar" 
                     Style="{StaticResource CustomProgressBarStyle}" 
                     Height="20" 
                     Margin="20" />
        <Button Content="开始迭代" 
                Click="StartIteration_Click" 
                Margin="20" 
                VerticalAlignment="Bottom" />
    </Grid>
</Window>

效果说明 #

运行后点击“开始迭代”按钮，ProgressBar会逐步推进，第5和第7个分段会显示红色，其他正常段显示绿色，完美匹配你想要的效果。这个方案的好处是灵活度高，不管最大值怎么改，异常分段都会自动对应正确的位置，而且可以随时添加新的异常索引。

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