1、控件效果

2、案例实现

1、代码实现

代码如下（示例）：

using System;
using System.ComponentModel;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;

namespace WW_Controls
{
    public partial class CircularProgressBar : UserControl
    {
        public CircularProgressBar()
        {
            InitializeComponent();
            InitializeControlStyles();
        }

        private void InitializeControlStyles()
        {
            this.SetStyle(ControlStyles.AllPaintingInWmPaint |
                          ControlStyles.DoubleBuffer |
                          ControlStyles.ResizeRedraw |
                          ControlStyles.Selectable |
                          ControlStyles.SupportsTransparentBackColor |
                          ControlStyles.UserPaint, true);
        }

        // 自定义属性
        [Browsable(true)]
        [Category("自定义属性")]
        [Description("默认背景色")]
        public Color BaseColor { get; set; } = Color.FromArgb(93, 107, 15);

        [Browsable(true)]
        [Category("自定义属性")]
        [Description("中心圆颜色")]
        public Color InnerColor { get; set; } = Color.White;

        [Browsable(true)]
        [Category("自定义属性")]
        [Description("标题文本内容")]
        public string TitleName { get; set; } = "标题文本";

        [Browsable(true)]
        [Category("自定义属性")]
        [Description("标题文本字体")]
        public Font TitleFont { get; set; } = new Font("微软雅黑", 10.5f);

        [Browsable(true)]
        [Category("自定义属性")]
        [Description("数值文本字体")]
        public Font ValueTextFont { get; set; } = new Font("微软雅黑", 10.5f);

        [Browsable(true)]
        [Category("自定义属性")]
        [Description("圆环宽度")]
        public int GapWidth { get; set; } = 25;

        [Browsable(true)]
        [Category("自定义属性")]
        [Description("渐变圆环起始颜色")]
        public Color GradientStartColor { get; set; } = Color.Blue;

        [Browsable(true)]
        [Category("自定义属性")]
        [Description("渐变圆环末端颜色")]
        public Color GradientEndColor { get; set; } = Color.Red;

        [Browsable(true)]
        [Category("自定义属性")]
        [Description("最大值")]
        public float MaxValue { get; set; } = 1000.0f;

        [Browsable(true)]
        [Category("自定义属性")]
        [Description("实际值")]
        public float ActualValue { get; set; } = 600.0f;

        [Browsable(true)]
        [Category("自定义属性")]
        [Description("显示模式")]
        public bool IsPercentShow { get; set; } = true;

        [Browsable(true)]
        [Category("自定义属性")]
        [Description("单位")]
        public string Unit { get; set; } = string.Empty;

        protected override void OnPaint(PaintEventArgs e)
        {
            base.OnPaint(e);
            Graphics graphics = e.Graphics;
            graphics.SmoothingMode = SmoothingMode.AntiAlias;
            graphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.ClearTypeGridFit;

            Rectangle rectangle = new Rectangle(1, 1, this.Width - 2, this.Height - 2);
            graphics.FillEllipse(new SolidBrush(BaseColor), rectangle);

            LinearGradientBrush brush = new LinearGradientBrush(rectangle, GradientStartColor, GradientEndColor, 150.0f);
            float angle = (ActualValue / MaxValue) * 360;
            graphics.FillPie(brush, rectangle, -90, angle);

            graphics.FillEllipse(new SolidBrush(InnerColor), new Rectangle(1 + GapWidth, 1 + GapWidth, this.Width - 2 * (1 + GapWidth), this.Height - 2 * (1 + GapWidth)));

            StringFormat stringFormat = new StringFormat { Alignment = StringAlignment.Center };

            Rectangle titleRect = new Rectangle(0, 0, this.Width, this.Height / 2);
            stringFormat.LineAlignment = StringAlignment.Far;
            graphics.DrawString(TitleName, TitleFont, new SolidBrush(ForeColor), titleRect, stringFormat);

            Rectangle valueRect = new Rectangle(0, this.Height / 2, this.Width, this.Height / 2);
            stringFormat.LineAlignment = StringAlignment.Near;
            string showValue = IsPercentShow ? (MaxValue <= 0 ? "0.0%" : $"{(int)(ActualValue / MaxValue * 100)}%") : $"{ActualValue}{Unit}";
            graphics.DrawString(showValue, ValueTextFont, new SolidBrush(ForeColor), valueRect, stringFormat);
        }
    }
}

2、代码解释

• 初始化控件样式： 通过设置各种ControlStyles来优化控件的绘制性能和外观。
• 自定义属性： 通过定义一系列可公开访问的属性，允许用户在设计时或运行时轻松修改控件的行为和外观。
• 绘图逻辑： 利用Graphics对象提供的方法绘制基础圆、渐变扇形、内圆以及文本。

3、使用示例

将此控件拖放到你的窗体上，并在属性窗口中调整各个属性，即可看到不同的视觉效果。例如，你可以改变GradientStartColor和GradientEndColor来尝试不同的渐变效果。

4、总结

通过本文的介绍，你应该已经掌握了如何创建一个带有渐变效果的环形进度条控件。这不仅可以提高你的编程技能，还能为你的应用程序增添独特的视觉体验。希望这篇文章对你有所帮助！如果你有任何问题或建议，请随时留言讨论！让我们共同进步，创造更多精彩的UI组件吧！