C# 自定义时间进度条

  • A+
所属分类：.NET技术
摘要

####### 我太难了
没有七个#号的样式
####### 不信你看
便宜好用的国外VPS推荐

这篇文章对我帮助极大，我模仿着写了两遍大概摸清楚了自定义控件的流程。https://www.cnblogs.com/lesliexin/p/13265707.html 感谢大佬 leslie_xin

样式

最开始

C# 自定义时间进度条

进度条有更改

C# 自定义时间进度条

根据开始时间和结束时间 时间刻度间隔有更改

C# 自定义时间进度条

设置项

C# 自定义时间进度条

正文

首先，我模仿过leslie_xin,写过一个进度条，用于播放视频，但是没有刻度，现在没有刻度不行，所以要搞一个刻度，计划使用GDI+
然后，发现https://www.cnblogs.com/lesliexin/p/13265707.html 这个控件里的长、宽不能修改，不然得自己再计算细节性得问题，就打算继承UserControl，把leslie_xin的进度条拖放进来
```UserControl```就把他当成正常窗口写，改写啥就写啥

正经脸

首先，能够满足自定以的进度条样式吧，比如前景色、背景色、进度的颜色，所以有了
        private Color _BarBackColor = Color.FromArgb(128, 255, 128);         [Category("TimeTrackBarControl"), Description("进度条背景色")]         public Color BarBackColor         {             get             {                 return this.trackBar.BarBackColor;             }             set             {                 _BarBackColor = value;                 this.trackBar.BarBackColor = _BarBackColor;                 Invalidate();             }         }          private Color _BarSliderColor = Color.FromArgb(64, 128, 64);         [Category("TimeTrackBarControl"), Description("进度条滑块颜色rn有值部分的颜色")]         public Color BarSliderColor         {             get             {                 return this.trackBar.SliderColor;             }             set             {                 _BarSliderColor = value;                 this.trackBar.SliderColor = _BarSliderColor;                 Invalidate();             }         }
然后因为要显示时间、开始时间、结束时间，所以又有了
        private DateTime _StartTime = DateTime.Now.AddHours(-1);         [Category("TimeTrackBarControl"), Description("开始时间")]         public DateTime StartTime         {             get             {                 return _StartTime;             }             set             {                 _StartTime = value;                 //if (_StartTime > _EndTime) _StartTime = _EndTime.AddMinutes(-1);                 _BarMaximum = (_EndTime - _StartTime).TotalSeconds.ToInt();                 this.trackBar.Maximum = _BarMaximum;                 this.trackBar.Minimum = 0;                 Invalidate();             }         }          private DateTime _EndTime = DateTime.Now;         [Category("TimeTrackBarControl"), Description("结束时间")]         public DateTime EndTime         {             get             {                 return _EndTime;             }             set             {                 _EndTime = value;                 //if (_EndTime < _StartTime) _EndTime = _StartTime.AddMinutes(1);                 _BarMaximum = (_EndTime - _StartTime).TotalSeconds.ToInt();                 this.trackBar.Maximum = _BarMaximum;                 this.trackBar.Minimum = 0;                 Invalidate();             }         }
再次因为要纪录进度条的值、最大值、最小值为0，记个der~，（我也不知道为啥会有这样值，脑子可能有它自己的想法）所以还有
        private int _BarMaximum = 0;         [Category("TimeTrackBarControl"), Description("最大值rn默认：0，由开始时间和结束时间决定（只读）")]         public int BarMaximum         {             get             {                 return _BarMaximum;             }         }          private int _BarCurValue = 0;         [Category("TimeTrackBarControl"), Description("当前值")]         public int BarCurValue         {             get             {                 _BarCurValue = this.trackBar.CurValue;                 return _BarCurValue;             }             set             {                 _BarCurValue = value;                 if (_BarCurValue < 0) _BarCurValue = 0;                 if (_BarCurValue > _BarMaximum) _BarCurValue = _BarMaximum;                 this.trackBar.CurValue = _BarCurValue;                 BarCurValueChanged?.Invoke(this, new CurValueEventArgs(_BarCurValue));             }         }
你这个时间刻度总得有颜色吧，总不能是皇帝的时间刻度，进度条的值对应的时间label也得有样式吧，皇帝也没有label啊，所以双有了
        private Color _TimeScaleColor = Color.FromArgb(210, 210, 210);         [Category("TimeTrackBarControl"), Description("时间刻度的颜色")]         public Color TimeScaleColor         {             get             {                 return _TimeScaleColor;             }             set             {                 _TimeScaleColor = value;                 Invalidate();             }         }          private int _ScaleInterval = 1200;         [Category("TimeTrackBarControl"), Description("时间刻度之间相隔秒数，小于零表示自适应rn单位：秒")]         public int ScaleInterval         {             get             {                 return _ScaleInterval;             }             set             {                 _ScaleInterval = value;                 //if (_ScaleInterval <= 0)                 //{                 //    _ScaleInterval = 1800;                 //}                 Invalidate();             }         }         private int _RealScaleInterval = 1200;         [Category("TimeTrackBarControl"), Description("实际相隔的秒数（为了显示自适应时真实的间隔时间）rn单位：秒")]         public int RealScaleInterval         {             get             {                 _RealScaleInterval = _ScaleInterval > 0 ? _ScaleInterval : _RealScaleInterval;                 return _RealScaleInterval;             }         }          private Color _TimeLabelBackColor = Color.FromArgb(255, 192, 192);         [Category("TimeTrackBarControl"), Description("时间label背景色")]         public Color TimeLabelBackColor         {             get             {                 return _TimeLabelBackColor;             }             set             {                 _TimeLabelBackColor = value;                 Invalidate();             }         }          private Color _TimeLabelForeColor = Color.FromArgb(192,255,192);         [Category("TimeTrackBarControl"), Description("时间label前景色")]         public Color TimeLabelForeColor         {             get             {                 return _TimeLabelForeColor;             }             set             {                 _TimeLabelForeColor = value;                 Invalidate();             }         }
最后你这个时间刻度总得能够直接跳到某个时间点吧，所以叒有
        public void SeekByTime(DateTime time)         {             BarCurValue = (time - StartTime).TotalSeconds.ToInt();         }
你搞了那么多样式，总得有人去画吧，所以叕有了
        protected override void OnPaint(PaintEventArgs e)         {             base.OnPaint(e);         }
时间刻度呢？总得去生成吧，所以我们要计算一下，每个刻度之间间隔多少秒钟，毕竟进度条的最小值为零，最大值为开始时间和最小时间间隔的秒数。
所以：1、计算间隔
2、计算时间刻度的坐标
3、画出来
        /// <summary>         /// 微软雅黑 regular 10F 23:56分约占38个像素，现定为45个像素为最小值，时间刻度：60秒为最小值         /// </summary>         /// <returns></returns>         private int SelfAdaption()         {             float radio = 45 * 1.0f / trackBar.Width;//45个像素占进度条总长的比例             double interval = (_EndTime - _StartTime).TotalSeconds * radio;//这个比例下，占多长的时间             if (interval<=60)             {                 interval = 60;             }             else if (interval>60 && interval <= 300)             {                 interval = 300;             }             else if (interval >300 && interval <= 600)             {                 interval = 600;             }             else if (interval >600 && interval <= 1200)             {                 interval = 1200;             }             else if (interval > 1200 && interval <= 1800)             {                 interval = 1800;             }             else if (interval > 1800 && interval <= 3600)             {                 interval = 3600;             }             return Convert.ToInt32(interval);         }          /// <summary>         /// 要划线的坐标         /// </summary>         /// <param name="intervalSec"></param>         /// <returns></returns>         private List<TimeScaleLocation> TimeScaleList()         {             DateTime time = _StartTime;             if (_ScaleInterval<0)             {                 _RealScaleInterval = SelfAdaption();             }             else             {                 _RealScaleInterval = _ScaleInterval;             }             List<TimeScaleLocation> scales = new List<TimeScaleLocation>();             TimeScaleLocation start_scale = new TimeScaleLocation(trackBar.Location.X, trackBar.Location.Y + trackBar.Height / 2, _StartTime);             scales.Add(start_scale);             while (time.AddSeconds(_RealScaleInterval) < _EndTime)             {                 time = time.AddSeconds(_RealScaleInterval);                 int val = (time - _StartTime).TotalSeconds.ToInt();                 float radio = val * 1.0f / _BarMaximum;                 int x = trackBar.Location.X + Convert.ToInt32(trackBar.Width * radio);                 int y = trackBar.Location.Y;                 TimeScaleLocation scale = new TimeScaleLocation(x, y, time);                 scales.Add(scale);             }             int end_x = trackBar.Location.X + trackBar.Width;             int end_y = trackBar.Location.Y + trackBar.Height / 2;             TimeScaleLocation end_scale = new TimeScaleLocation(end_x, end_y, _EndTime);             scales.Add(end_scale);             return scales;         }          // 完全体的OnPaint方法         protected override void OnPaint(PaintEventArgs e)         {             base.OnPaint(e);             ChangeStyle();             e.Graphics.SmoothingMode = SmoothingMode.HighQuality;             Pen pen = new Pen(_TimeScaleColor, 1);             Brush brush = new SolidBrush(_TimeScaleColor);             Font font = new Font("微软雅黑", 10, FontStyle.Regular, GraphicsUnit.Point, (byte)134);             List<TimeScaleLocation> scales = TimeScaleList();             for (int i = 0; i < scales.Count; i++)             {                 TimeScaleLocation item = scales[i];                 int length = 15;                 if (_RealScaleInterval * i % 3600 == 0)                 {                     length = length + trackBar.Height * 1;                 }                 if (i == 0 || i == scales.Count - 1)                 {                     length = (int)(length + trackBar.Height * 1.5);                 }                 if (i == 0)                 {                     item.x -= 1;                 }                 e.Graphics.DrawLine(pen, item.x, item.y, item.x, item.y - length);                 e.Graphics.DrawString(item.time.ToString("HH:mm"), font, brush, new Point(item.x - 19, item.y - length - trackBar.Height * 2));             }         }          // 设置label样式，onpaint方法调用         private void ChangeStyle()         {             this.timeLabel.BackColor = _TimeLabelBackColor;             this.timeLabel.ForeColor = _TimeLabelForeColor;         }
是不是发现有个TimeScaleLocation不知道是啥？
using System;  namespace QAQ.Controls {     /// <summary>     /// 时间刻度信息     /// </summary>     public class TimeScaleLocation     {         /// <summary>         /// time对应在进度条上的点的x坐标         /// </summary>         public int x { get; set; }         /// <summary>         /// time对应在进度条上的点的y坐标         /// </summary>         public int y { get; set; }         /// <summary>         /// time时间点         /// </summary>         public DateTime time{get;set;}          public TimeScaleLocation(int x, int y, DateTime time)         {             this.x = x;             this.y = y;             this.time = time;         }     } }
哦，我亲爱的老伙计，我好像忘记了把事件加上来了，我今天得罚我自己吃三大碗饭，治治我这个不长记性的脑子。所以这个事件我借用那个大佬的
        #region 事件,          public delegate void CurValueChangedEventHandler(object sender, CurValueEventArgs e);         /// <summary>         /// 值发生改变时引发的事件         /// </summary>         public event CurValueChangedEventHandler BarCurValueChanged;          #endregion

收获

1、markdown 不会使，排版全用######

####### 我太难了
C# 自定义时间进度条

2、在UserControl中，如果不是其他控件的事件，那么将事件替换为OnXXX(),例如：Click替换为OnClick(),这样好像比较快，尤其是鼠标事件
3、注意循环调用，比如修改 BarCurValue时修改了this.trackBar.value还加了事件,然后又在this.trackBar的valueChanged事件中修改了BarCurValue,然后就会发现vs好像累了，它不想理你了，怎么挑逗都不起作用了outofstrack?还是其他的啥玩意。就是这两个发生了循环调用
4、这个版本有点小问题，修改办法放在收获中

其他，未知，忘记了，等我记起了再补充。退朝~

完整内容

using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; using System.Drawing.Drawing2D; using System.Windows.Forms;  namespace QAQ.Controls {     [DefaultEvent("CurValueChanged")]     public partial class TimeTrackBarControl : UserControl     {         public TimeTrackBarControl()         {             InitializeComponent();         }          #region 事件          public delegate void CurValueChangedEventHandler(object sender, CurValueEventArgs e);         /// <summary>         /// 值发生改变时引发的事件         /// </summary>         public event CurValueChangedEventHandler BarCurValueChanged;          #endregion          private Color _BarBackColor = Color.FromArgb(128, 255, 128);         [Category("TimeTrackBarControl"), Description("进度条背景色")]         public Color BarBackColor         {             get             {                 return this.trackBar.BarBackColor;             }             set             {                 _BarBackColor = value;                 this.trackBar.BarBackColor = _BarBackColor;                 Invalidate();             }         }          private Color _BarSliderColor = Color.FromArgb(64, 128, 64);         [Category("TimeTrackBarControl"), Description("进度条滑块颜色rn有值部分的颜色")]         public Color BarSliderColor         {             get             {                 return this.trackBar.SliderColor;             }             set             {                 _BarSliderColor = value;                 this.trackBar.SliderColor = _BarSliderColor;                 Invalidate();             }         }           private DateTime _StartTime = DateTime.Now.AddHours(-1);         [Category("TimeTrackBarControl"), Description("开始时间")]         public DateTime StartTime         {             get             {                 return _StartTime;             }             set             {                 _StartTime = value;                 //if (_StartTime > _EndTime) _StartTime = _EndTime.AddMinutes(-1);                 _BarMaximum = (_EndTime - _StartTime).TotalSeconds.ToInt();                 this.trackBar.Maximum = _BarMaximum;                 this.trackBar.Minimum = 0;                 Invalidate();             }         }          private DateTime _EndTime = DateTime.Now;         [Category("TimeTrackBarControl"), Description("结束时间")]         public DateTime EndTime         {             get             {                 return _EndTime;             }             set             {                 _EndTime = value;                 //if (_EndTime < _StartTime) _EndTime = _StartTime.AddMinutes(1);                 _BarMaximum = (_EndTime - _StartTime).TotalSeconds.ToInt();                 this.trackBar.Maximum = _BarMaximum;                 this.trackBar.Minimum = 0;                 Invalidate();             }         }          private int _BarMaximum = 0;         [Category("TimeTrackBarControl"), Description("最大值rn默认：0，由开始时间和结束时间决定（只读）")]         public int BarMaximum         {             get             {                 return _BarMaximum;             }         }          private int _BarCurValue = 0;         [Category("TimeTrackBarControl"), Description("当前值")]         public int BarCurValue         {             get             {                 _BarCurValue = this.trackBar.CurValue;                 return _BarCurValue;             }             set             {                 _BarCurValue = value;                 if (_BarCurValue < 0) _BarCurValue = 0;                 if (_BarCurValue > _BarMaximum) _BarCurValue = _BarMaximum;                 this.trackBar.CurValue = _BarCurValue;                 BarCurValueChanged?.Invoke(this, new CurValueEventArgs(_BarCurValue));             }         }          private Color _TimeScaleColor = Color.FromArgb(210, 210, 210);         [Category("TimeTrackBarControl"), Description("时间刻度的颜色")]         public Color TimeScaleColor         {             get             {                 return _TimeScaleColor;             }             set             {                 _TimeScaleColor = value;                 Invalidate();             }         }          private int _ScaleInterval = 1200;         [Category("TimeTrackBarControl"), Description("时间刻度之间相隔秒数，小于零表示自适应rn单位：秒")]         public int ScaleInterval         {             get             {                 return _ScaleInterval;             }             set             {                 _ScaleInterval = value;                 //if (_ScaleInterval <= 0)                 //{                 //    _ScaleInterval = 1800;                 //}                 Invalidate();             }         }         private int _RealScaleInterval = 1200;         [Category("TimeTrackBarControl"), Description("实际相隔的秒数（为了显示自适应时真实的间隔时间）rn单位：秒")]         public int RealScaleInterval         {             get             {                 _RealScaleInterval = _ScaleInterval > 0 ? _ScaleInterval : _RealScaleInterval;                 return _RealScaleInterval;             }         }          private Color _TimeLabelBackColor = Color.FromArgb(255, 192, 192);         [Category("TimeTrackBarControl"), Description("时间label背景色")]         public Color TimeLabelBackColor         {             get             {                 return _TimeLabelBackColor;             }             set             {                 _TimeLabelBackColor = value;                 Invalidate();             }         }          private Color _TimeLabelForeColor = Color.FromArgb(192,255,192);         [Category("TimeTrackBarControl"), Description("时间label前景色")]         public Color TimeLabelForeColor         {             get             {                 return _TimeLabelForeColor;             }             set             {                 _TimeLabelForeColor = value;                 Invalidate();             }         }         public void SeekByTime(DateTime time)         {             BarCurValue = (time - StartTime).TotalSeconds.ToInt();         }          #region 一些系统事件         protected override void OnPaint(PaintEventArgs e)         {             base.OnPaint(e);             ChangeStyle();             e.Graphics.SmoothingMode = SmoothingMode.HighQuality;             Pen pen = new Pen(_TimeScaleColor, 1);             Brush brush = new SolidBrush(_TimeScaleColor);             Font font = new Font("微软雅黑", 10, FontStyle.Regular, GraphicsUnit.Point, (byte)134);             List<TimeScaleLocation> scales = TimeScaleList();             for (int i = 0; i < scales.Count; i++)             {                 TimeScaleLocation item = scales[i];                 int length = 15;                 if (_RealScaleInterval * i % 3600 == 0)                 {                     length = length + trackBar.Height * 1;                 }                 if (i == 0 || i == scales.Count - 1)                 {                     length = (int)(length + trackBar.Height * 1.5);                 }                 if (i == 0)                 {                     item.x -= 1;                 }                 e.Graphics.DrawLine(pen, item.x, item.y, item.x, item.y - length);                 e.Graphics.DrawString(item.time.ToString("HH:mm"), font, brush, new Point(item.x - 19, item.y - length - trackBar.Height * 2));             }         }          protected override void OnMouseDown(MouseEventArgs e)         {             base.OnMouseDown(e);         }          protected override void OnMouseMove(MouseEventArgs e)         {             base.OnMouseMove(e);         }         protected override void OnMouseUp(MouseEventArgs e)         {             base.OnMouseUp(e);         }         protected override void OnMouseEnter(EventArgs e)         {             base.OnMouseEnter(e);         }         protected override void OnMouseLeave(EventArgs e)         {             base.OnMouseLeave(e);         }          protected override void OnSizeChanged(EventArgs e)         {             base.OnSizeChanged(e);              int x = (this.Width - this.timeLabel.Width) / 2;             int y = this.timeLabel.Location.Y;             this.timeLabel.Location = new Point(x, y);         }          /// <summary>         /// 要划线的坐标         /// </summary>         /// <param name="intervalSec"></param>         /// <returns></returns>         private List<TimeScaleLocation> TimeScaleList()         {             DateTime time = _StartTime;             if (_ScaleInterval<0)             {                 _RealScaleInterval = SelfAdaption();             }             else             {                 _RealScaleInterval = _ScaleInterval;             }             List<TimeScaleLocation> scales = new List<TimeScaleLocation>();             TimeScaleLocation start_scale = new TimeScaleLocation(trackBar.Location.X, trackBar.Location.Y + trackBar.Height / 2, _StartTime);             scales.Add(start_scale);             while (time.AddSeconds(_RealScaleInterval) < _EndTime)             {                 time = time.AddSeconds(_RealScaleInterval);                 int val = (time - _StartTime).TotalSeconds.ToInt();                 float radio = val * 1.0f / _BarMaximum;                 int x = trackBar.Location.X + Convert.ToInt32(trackBar.Width * radio);                 int y = trackBar.Location.Y;                 TimeScaleLocation scale = new TimeScaleLocation(x, y, time);                 scales.Add(scale);             }             int end_x = trackBar.Location.X + trackBar.Width;             int end_y = trackBar.Location.Y + trackBar.Height / 2;             TimeScaleLocation end_scale = new TimeScaleLocation(end_x, end_y, _EndTime);             scales.Add(end_scale);             return scales;         }          /// <summary>         /// 微软雅黑 regular 10F 23:56分约占38个像素，现定为45个像素为最小值，时间刻度：60秒为最小值         /// </summary>         /// <returns></returns>         private int SelfAdaption()         {             float radio = 45 * 1.0f / trackBar.Width;//45个像素占进度条总长的比例             double interval = (_EndTime - _StartTime).TotalSeconds * radio;//这个比例下，占多长的时间             if (interval<=60)             {                 interval = 60;             }             else if (interval>60 && interval <= 300)             {                 interval = 300;             }             else if (interval >300 && interval <= 600)             {                 interval = 600;             }             else if (interval >600 && interval <= 1200)             {                 interval = 1200;             }             else if (interval > 1200 && interval <= 1800)             {                 interval = 1800;             }             else if (interval > 1800 && interval <= 3600)             {                 interval = 3600;             }             return Convert.ToInt32(interval);         }          private void ChangeStyle()         {             this.timeLabel.BackColor = _TimeLabelBackColor;             this.timeLabel.ForeColor = _TimeLabelForeColor;         }         #endregion          /// <summary>         /// 为了实时改变显示的值         /// </summary>         /// <param name="sender"></param>         /// <param name="e"></param>         private void TrackBar_CurValueChanged(object sender, CurValueEventArgs e)         {             BarCurValueChanged?.Invoke(this, new CurValueEventArgs(e.Value));             timeLabel.Text = _StartTime.AddSeconds(e.Value).ToString("HH:mm:ss");         }     } }
哦，要和大佬的例子放在一起，因为借用了他的控件和事件。还有，大佬的文章末尾有大佬代码的下载链接，嘿嘿~

没有七个#号的样式
####### 不信你看

转载请注明出处

便宜好用的国外VPS推荐