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

Winform自定义控件-进度条/图片图标进度条相关推荐

进度条图片，进度条素材
Bootstrap4+MySQL前后端综合实训-Day02-AM【Bootstrap4(入门、环境搭建、文字排版、颜色、表格、图片、进度条、折叠、输入框组、模态框)、Font Awesome字体图标】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录 Typora语法 Day01-知识回顾 1.前端部分 flex布局 2.Bootstr ...
c#WinForm自定义控件渐变颜色的进度条
C#WinForm工具箱自带的ProgressBar进度条控件的颜色默认为绿色,没有属性用来修改,很不方便.所以我们就需要重绘ProgressBar控件来达到我们想要的效果. 完成效果: 实现了进度条 ...
Java渐变进度条_Android ProgressBar自定义图片进度，自定义渐变色进度条
java.lang.Object ↳android.view.View ↳android.widget.ProgressBar 直接子类 AbsSeekBar 间接子类 RatingBar, Seek ...
android进度条的图标,Android进度条相关应用技巧解析
Android手机操作系统中有很多功能在实际应用中体现了非常大的作用.比如在这里为大家介绍的Android进度条的实现,就可以帮助大家解决一些相应的问题.那么大家就一起来看看这方面的相关方法吧. ●进 ...
Android可触摸圆形进度条,Android 可滚动圆形进度条滑块和进度在进度条上面跟着滚动...
Android 可滚动圆形进度条滑块和进度在进度条上面跟着滚动.package com.example.test; import android.content.Context; import an ...
Android 之 ProgressDialog用法介绍（矩形进度条和圆形进度条）
2019独角兽企业重金招聘Python工程师标准>>> 布局文件: <LinearLayout xmlns:android="http://schemas.andro ...
Android自定义半圆进度条半圆渐变色进度条带指示半圆开口大小可自由修改
Android自定义半圆进度条半圆渐变色进度条带指示半圆开口大小可自由修改首先我们来看下效果图不同的开口大小只需要修改一个参数即可半圆1: 半圆2: 半圆3: 如果是你想要的效果,就直接滑动 ...
android 动态改变进度条,Android条纹进度条的实现(调整view宽度仿进度条)
Android条纹进度条的实现(调整view宽度仿进度条) 发布时间:2020-10-03 16:14:24 来源:脚本之家阅读:89 作者:RustFisher 前言本文主要给大家介绍了关于An ...

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

Winform自定义控件-进度条/图片图标进度条相关推荐

最新文章

热门文章