WPF 必备一个简洁实用的自定义进度条组件

前言

在开发WPF应用程序时，进度条（ProgressBar）是一个非常常见的UI元素，用于向用户展示任务的执行进度。

虽然WPF自带的ProgressBar控件功能完备，但其默认样式往往显得单调。最近在参与一个项目时，看到同事实现的一个进度条效果颇为实用，于是将其进行了简化和优化。

本文将分享这个简易但足够满足项目需求的WPF进度条实现，重点在于其可配置的渐变色和实时更新机制。

进度条效果

这个自定义的进度条控件不仅包含了标准的进度显示，还加入了文本标签来实时显示当前进度值。

其核心亮点在于支持通过参数动态切换不同的渐变色主题，使得UI更具灵活性。

功能实现

1、可配置的前景色 (ForegroundColor)

由于原生ProgressBar的Foreground属性在样式中可能被统一设置，为了实现灵活的颜色控制，我们定义了一个自定义属性ForegroundColor。当该属性值改变时，会从资源字典中查找对应的LinearGradientBrush并应用到ProgressBar以及相关的TextBlock上。

public int ForegroundColor
{
    get
    {
        return _foregroundColor;
    }

    set
    {
        _foregroundColor = value;
        LinearGradientBrush lgb = dictionary["ForegroundColor" + value] as LinearGradientBrush;
        if (lgb != null)
            proBar.Foreground = txt.Foreground = percent.Foreground = lgb;
    }
}

上述代码中的dictionary["ForegroundColor" + value]是为了从XAML资源中动态获取预定义的渐变画笔。

以下是几种预设的渐变色样式：

<LinearGradientBrush x:Key="ForegroundColor1" EndPoint="1,0.5" StartPoint="0,0.5">
        <GradientStop Color="#FFBBF586" Offset="0.5"/>
        <GradientStop Color="#FFD4F9C3" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="ForegroundColor2" EndPoint="1,0.5" StartPoint="0,0.5">
        <GradientStop Color="#FF5BE26E" Offset="0.5"/>
        <GradientStop Color="#FF8DEC9C" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="ForegroundColor3" EndPoint="1,0.5" StartPoint="0,0.5">
        <GradientStop Color="#FFB656F2" Offset="0.5"/>
        <GradientStop Color="#FFAE8DFE" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="ForegroundColor4" EndPoint="1,0.5" StartPoint="0,0.5">
        <GradientStop Color="#FF3AE9E9" Offset="0.5"/>
        <GradientStop Color="#FF8DFDFE" Offset="1"/>
</LinearGradientBrush>

2、实时进度文本显示 (ValueText)

为了让用户清晰地看到当前进度数值，我们使用一个TextBlock来显示。

为了确保UI能及时响应数据变化，ValueText属性实现了INotifyPropertyChanged接口。

public string ValueText
{
    get
    {
        return _valueText;
    }

    set
    {
        _valueText = value;
        if (this.PropertyChanged != null)
        {
            this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs("ValueText"));
        }
    }
}

3、后台线程更新进度

为了模拟耗时任务并更新进度条，我们使用BackgroundWorker在后台线程中执行循环。

在循环中，通过Dispatcher.Invoke安全地更新UI线程上的ProgressBar的Value属性，并同步更新ValueText。

private void Bgw_DoWork(object sender, DoWorkEventArgs e)
{
      for (int i = 0; i < BarValue; i++)
      {
            System.Threading.Thread.Sleep(50); // 模拟工作耗时
            proBar.Dispatcher.Invoke(new Action(
                                         delegate
            {
                if (proBar.Value <= BarValue)
                {
                    proBar.Value++;
                }
            }));
            ValueText = i + "";
      }
      ValueText = BarValue + "";
}

总结

本文介绍了一个简化版的WPF进度条控件实现。它通过自定义属性ForegroundColor实现了渐变色的灵活切换，利用INotifyPropertyChanged保证了进度文本的实时更新，并通过BackgroundWorker在后台安全地更新UI。

虽然效果不算炫酷，但其简洁、实用的特点使其非常适合集成到各类项目中，作为基础的进度反馈组件。可以根据需要进一步扩展，例如增加动画效果、更多样式选项或支持不同的进度模式。

关键词

WPF、进度条、ProgressBar、渐变色、BackgroundWorker、INotifyPropertyChanged、UI、XAML

最后

如果你觉得这篇文章对你有帮助，不妨点个赞支持一下！你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助，欢迎随时留言。

也可以加入微信公众号 [DotNet技术匠] 社区，与其他热爱技术的同行一起交流心得，共同成长！

优秀是一种习惯，欢迎大家留言学习！

作者：眾尋 

出处：cnblogs.com/ZXdeveloper/p/7018546.html

声明：网络内容，仅供学习，尊重版权，侵权速删，歉意致谢！