[前言]
时间紧迫(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可能存在很多,各位朋友同仁如发现异常请轻喷并与我及时联系,以免误导他人.
本章完
