Winform自定义控件-进度条/图片图标进度条

[前言]
时间紧迫(bushanyanci),在此就不做过多介绍了.
[功能原理]
实现一个自定义进度条,进度条的目的就是作为显示进度的数据可视化控件,具体原理就是填充两种或多种不同颜色比例的矩形框或Path,主要有两种方法实现:
1.重绘/重写控件;
2.自定义控件;
由于本人没有深入研究过重绘/重写,本文主要是自定义控件.
[样式展示]
1.原生样式进度条,百分比、背景和前景颜色可自定义:

2.带图片/图标显示进度进度条,图片/图标、背景、前景、百分比、圆角可自定义

[原生样式]
1.新建用户控件

2.使用OnPaint事件来绘制前景色,只定义了进度比值,报错请引用using System.Drawing;

   public partial class ProgressBarControl : UserControl
    {
        private int val;//进度值
        private Color PBackgroundColor = Color.FromArgb(217, 218, 219);//初始化颜色
        private Color PForegroundColor=Color.Green;
        public ProgressBarControl()
        {
            InitializeComponent();
        }
        /// <summary>
        /// 背景色
        /// </summary>
        public Color pBackgroundColor
        {
            get
            {
                return PBackgroundColor;
            }
            set
            {
                PBackgroundColor = value;
                this.BackColor = PBackgroundColor;
            }
        }
        /// <summary>
        /// 前景色
        /// </summary>
        public Color pForegroundColor
        {
            get
            {
                return PForegroundColor;
            }
            set
            {
                PForegroundColor = value;
            }
        }
        /// <summary>
        /// 当前值
        /// </summary>
        public int Val
        {
            get
            {
                return val;
            }
            set
            {
                    val = value;
                    this.Invalidate();
            }
        }
        protected override void OnPaint(PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            SolidBrush brush = new SolidBrush(PForegroundColor);
            float percent = val / 100f;
            Rectangle rect = this.ClientRectangle;
            rect.Width = (int)((float)rect.Width * percent);
            rect.Height = this.Height;
            Console.WriteLine("宽度:{0}", rect.Width);
            g.FillRectangle(brush, rect);
            brush.Dispose();
            g.Dispose();
        }

    }

3.使用:同项目内直接拖到使用控件或Form上,不同项目使用生成的dll(在此不介绍了),设置对应的值.

4.使用后样式

[图片/图标样式]
1.新建用户控件,调整好控件尺寸,同上,在此就不上图了.
2.往控件上添加一个PictureBox控件,该控件用于显示进度的图片/图标,尺寸可根据图片/图标大小更改,如果图片固定在此可以先添加图片(添加图片方法为向PictureBox的Image选择资源图片),也可以留属性接口动态添加图片路径;

3.通过自定义控件的Paint事件来填充Path,因项目固定我这里只留了百分比值属性,圆角值/背景/图片等属性在此就不一一封装了.

    public partial class ProgressBarPic : UserControl
    {
        public ProgressBarPic()
        {
            InitializeComponent();
        }
        private int percentageValues = 0;
        /// <summary>
        /// 百分比值(0~100)
        /// </summary>
        public int PercentageValues
        { 
            set {
                if (value>=0 && value<=100)
                {
                    percentageValues = value;
                    this.Invalidate();
                }
                else
                {
                    percentageValues = 0;
                }
            } 
        }
        /*进度条样式*/
        private GraphicsPath CreateRound(Rectangle rectangle, int r)
        {
            int l = 2 * r;
            // 把圆角矩形分成八段直线、弧的组合，依次加到路径中 
            GraphicsPath gp = new GraphicsPath();
            gp.AddLine(new Point(rectangle.X + r, rectangle.Y), new Point(rectangle.Right - r, rectangle.Y));
            gp.AddArc(new Rectangle(rectangle.Right - l, rectangle.Y, l, l), 270F, 90F);
            gp.AddLine(new Point(rectangle.Right, rectangle.Y + r), new Point(rectangle.Right, rectangle.Bottom - r));
            gp.AddArc(new Rectangle(rectangle.Right - l, rectangle.Bottom - l, l, l), 0F, 90F);
            gp.AddLine(new Point(rectangle.Right - r, rectangle.Bottom), new Point(rectangle.X + r, rectangle.Bottom));
            gp.AddArc(new Rectangle(rectangle.X, rectangle.Bottom - l, l, l), 90F, 90F);
            gp.AddLine(new Point(rectangle.X, rectangle.Bottom - r), new Point(rectangle.X, rectangle.Y + r));
            gp.AddArc(new Rectangle(rectangle.X, rectangle.Y, l, l), 180F, 90F);
            return gp;
        }
        protected override void OnResize(EventArgs eventargs)
        {
            base.Refresh();
        }
        private void ProgressBarPic_Paint(object sender, PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            g.Clear(this.BackColor);
            if (percentageValues == 0)
            {
                /*画背景*/
                Rectangle rect = e.ClipRectangle;
                rect = new Rectangle(43, 21, 530 - 1, 12);
                g.SmoothingMode = SmoothingMode.AntiAlias;//消除锯齿
                GraphicsPath round = CreateRound(rect, 5);
                g.FillPath(new SolidBrush(Color.FromArgb(217, 218, 219)), round);

                /*画前景进度*/
                //rect = new Rectangle(43, 21, ((530 * percentageValues) / 100) - 1, 12);
                //g.SmoothingMode = SmoothingMode.AntiAlias;//消除锯齿
                //round = CreateRound(rect, 5);
                //g.FillPath(new SolidBrush(Color.FromArgb(25, 176, 132)), round);
                /*图片位移*/
                pictureBox1.Location = new Point(((530 * percentageValues) / 100), 0);
            }
            else
            {
                /*画背景*/
                Rectangle rect = e.ClipRectangle;
                rect = new Rectangle(43, 21, 530 - 1, 12);
                g.SmoothingMode = SmoothingMode.AntiAlias;//消除锯齿
                GraphicsPath round = CreateRound(rect, 5);
                g.FillPath(new SolidBrush(Color.FromArgb(217, 218, 219)), round);

                /*画前景进度*/
                rect = new Rectangle(43, 21, ((530 * percentageValues) / 100) - 1, 12);
                g.SmoothingMode = SmoothingMode.AntiAlias;//消除锯齿
                round = CreateRound(rect, 5);
                g.FillPath(new SolidBrush(Color.FromArgb(25, 176, 132)), round);
                /*图片位移*/
                pictureBox1.Location = new Point(((530 * percentageValues) / 100), 0);
            }
        }
    }

4.使用:通过修改PercentageValues来改变进度值.
5.使用后样式

[后语]
由于工作原因,没有过多时间来优化控件,控件较为粗糙,内部bug可能存在很多,各位朋友同仁如发现异常请轻喷并与我及时联系,以免误导他人.
本章完