如何在 wpf 中制作多色分段进度条？

Posted 2023-03-30

【中文标题】如何在 wpf 中制作多色分段进度条？

【英文标题】：How can I make a multi-colored segmented progress bar in wpf?

【发布时间】：2015-11-13 06:43:19

【问题描述】：

我正在尝试创建一个用作分段进度条的 UserControl。输入是对象的集合，每个对象都有一个类别、一个持续时间属性和状态属性。 UserControl 应该拉伸父控件的宽度和高度。集合中的每个项目都应该代表进度条的一部分；段的颜色与状态有关，段的宽度与时长有关，覆盖在段上的文本将与类别或其他内容有关。

自定义进度条示例：

文本可能是集合项的 ID，顶部段颜色与状态相关，底部颜色与类别相关，宽度与持续时间相关。

我考虑过的一些选项：

制作一个堆栈面板，并以某种方式定义每个项目的宽度并将整个项目包装在一个视图框中，以使其拉伸高度和宽度。如何控制文本大小，如何使内容适合高度，如何将堆栈面板绑定到集合？ 为网格控件创建一个附加属性，该属性将动态创建列并将集合项映射到网格。看起来工作量很大，我希望有一个更简单的解决方案，因为我的要求非常具体。 也许有办法覆盖统一网格以使其不统一？ 也许我应该只使用所有代码隐藏并通过遍历我的集合来绘制矩形？

无论哪种方式，我都在祈祷有人可能知道我的问题的简单解决方案。

【参考方案1】：

这是自定义进度条解决方案的完整工作建议。

代码在这里：http://1drv.ms/1QmAVuZ

1 .如果所有步骤的宽度不一样，我更喜欢使用具有列和不同宽度的网格

这些列是根据以下类动态构建的：

public class StepItem

    public int Length  get; set; 
    public int Index  get; set; 
    public String  Label  get; set; 
    public Brush Brush  get; set; 

2。我选择实现一个CustomControl并继承ItemsControl

CustomControl，因为我不想处理Progressbar 模板部分的实现。

ItemsControl 因为：

-我想向ItemsSource 属性提供StepItems 的集合

-ItemsControl 可以有一些DataTemplate 作为每个项目的模板

-ItemsControl 可以有任何Panel 如Grid 作为模板呈现项目的集合

3.该组件在 Generic.xaml 中有模板

-layoutGrid 会有“连续的彩虹”

-overlayGrid 将根据进度部分显示在步骤上或完全结束（如果没有进度）

-ItemsPresenter会呈现DataTemplates对应每个StepItem的集合

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="x:Type local:ProgressItemsControl">
            <Border BorderBrush="TemplateBinding BorderBrush"
                    BorderThickness="TemplateBinding BorderThickness">
                <Grid x:Name="layoutGrid">
                    <ItemsPresenter SnapsToDevicePixels="TemplateBinding SnapsToDevicePixels"/>
                    <Grid x:Name="overlayGrid" Width="100" HorizontalAlignment="Right" Background="White"/>
                </Grid>
            </Border>
        </ControlTemplate>
    </Setter.Value>
</Setter>

4.自定义 ItemsPanel 以使用 Grid（而不是垂直布局）

<Setter Property="ItemsPanel">
    <Setter.Value>
        <ItemsPanelTemplate >
            <Grid x:Name="stepsGrid" IsItemsHost="True" />
        </ItemsPanelTemplate>
    </Setter.Value>
</Setter>

5.在组件的代码后面，列宽的设置

int i = 0;
foreach (StepItem stepItem in ItemsSource)

    total += stepItem.Length;
    var columnDefinition = new ColumnDefinition()  Width = new GridLength(stepItem.Length, GridUnitType.Star) ;
    stepsGrid.ColumnDefinitions.Add(columnDefinition);
    Grid.SetColumn(stepsGrid.Children[i], stepItem.Index);
    i++;

6.用于声明可监控的依赖属性的代码

（摘录）

public int Value

    get  return (int)GetValue(ValueProperty); 
    set  SetValue(ValueProperty, value); 

// Using a DependencyProperty as the backing store for Value.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty ValueProperty =
    DependencyProperty.Register("Value", typeof(int), typeof(ProgressItemsControl), new PropertyMetadata(0));

7.组件的使用

<local:CustomProgressBar
    x:Name="customProgressBar1"
    HorizontalAlignment="Left" Height="50" Margin="32,49,0,0"      
    VerticalAlignment="Top" Width="379"/>

8.为组件提供数据

private List<StepItem> stepItems = new List<StepItem>
            new StepItem
                Index=0,
                Label="Step1",
                Length=20,
                Brush = new SolidColorBrush(Color.FromArgb(255,255,0,0)),
            new StepItem
                Index=4,
                Label="Step5",
                Length=25,
                Brush = new SolidColorBrush(Color.FromArgb(255,0,128,0)),
           ,
        ;
void MainWindow_Loaded(object sender, RoutedEventArgs e)

    progressItemsControl1.ItemsSource = stepItems;

问候