在WPF ProgressBar中嵌入ItemsControl实现多色进度显示求助

原代码问题分析 #

• 你将ItemsControl定义在ProgressBar.Resources中，这只是资源声明，不会被实际渲染，因此看不到任何分段效果。
• ProgressBar的设计逻辑是通过单一Value值驱动进度展示，本身不支持多段不同颜色的自定义，强行嵌套ItemsControl不符合其定位。

解决方案：用ItemsControl构建分段进度条 #

直接使用ItemsControl实现，它天然支持绑定集合生成多个可视化项，完美匹配多步骤、多颜色的进度展示需求。

XAML代码

<UserControl x:Class="YourNamespace.StepProgressBar"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <!-- 外层边框模拟进度条容器 -->
        <Border Width="200" Height="15" Background="LightGray" BorderBrush="Black" BorderThickness="1">
            <ItemsControl ItemsSource="{Binding Steps}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <!-- 横向排列所有步骤分段 -->
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <!-- 单个步骤的进度块 -->
                        <Border Width="{Binding SegmentWidth}" 
                                Background="{Binding StatusColor}"
                                BorderBrush="Black"
                                BorderThickness="0,0,1,0">
                            <!-- 可选：添加步骤编号文本 -->
                            <!-- <TextBlock Text="{Binding StepNumber}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="8"/> -->
                        </Border>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Border>
    </Grid>
</UserControl>

ViewModel与后台代码

using System.Collections.ObjectModel;
using System.Windows.Media;

public class StepProgressViewModel : Utility.PropertyChangedNotification
{
    public ObservableCollection<StepItem> Steps { get; set; }

    // 进度条总宽度，用于计算分段宽度
    private double _totalProgressWidth = 200;
    public double TotalProgressWidth
    {
        get => _totalProgressWidth;
        set => SetValue(() => TotalProgressWidth, value);
    }

    public StepProgressViewModel()
    {
        Steps = new ObservableCollection<StepItem>();
        // 示例：30个步骤，穿插绿色（正确）和红色（错误）
        for (int i = 0; i < 30; i++)
        {
            Steps.Add(new StepItem
            {
                StepNumber = i + 1,
                StatusColor = i % 3 == 0 ? new SolidColorBrush(Colors.Red) : new SolidColorBrush(Colors.Green),
                SegmentWidth = TotalProgressWidth / 30
            });
        }
    }
}

public class StepItem : Utility.PropertyChangedNotification
{
    public int StepNumber { get; set; }

    private Brush _statusColor;
    public Brush StatusColor
    {
        get => _statusColor;
        set => SetValue(() => StatusColor, value);
    }

    private double _segmentWidth;
    public double SegmentWidth
    {
        get => _segmentWidth;
        set => SetValue(() => SegmentWidth, value);
    }
}

UserControl构造函数

public StepProgressBar()
{
    InitializeComponent();
    DataContext = new StepProgressViewModel();
}

关键说明 #

• 外层Border替代原ProgressBar的容器作用，提供灰色背景和边框。
• ItemsControl通过横向StackPanel实现分段的水平排列，每个分段对应一个步骤的状态。
• 支持动态更新：修改任意StepItem的StatusColor，UI会自动刷新；增减步骤只需操作Steps集合。

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