C# 自定义时间进度条

这篇文章对我帮助极大，我模仿着写了两遍大概摸清楚了自定义控件的流程。 感谢大佬 leslie_xin

样式

最开始

进度条有更改

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

设置项

正文

首先，我模仿过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("进度条滑块颜色\r\n有值部分的颜色")]
        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("最大值\r\n默认：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("时间刻度之间相隔秒数，小于零表示自适应\r\n单位：秒")]
        public int scaleinterval
        {
            get
            {
                return _scaleinterval;
            }
            set
            {
                _scaleinterval = value;
                //if (_scaleinterval <= 0)
                //{
                //    _scaleinterval = 1800;
                //}
                invalidate();
            }
        }
        private int _realscaleinterval = 1200;
        [category("timetrackbarcontrol"), description("实际相隔的秒数（为了显示自适应时真实的间隔时间）\r\n单位：秒")]
        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 不会使，排版全用######

####### 我太难了

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("进度条滑块颜色\r\n有值部分的颜色")]
        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("最大值\r\n默认：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("时间刻度之间相隔秒数，小于零表示自适应\r\n单位：秒")]
        public int scaleinterval
        {
            get
            {
                return _scaleinterval;
            }
            set
            {
                _scaleinterval = value;
                //if (_scaleinterval <= 0)
                //{
                //    _scaleinterval = 1800;
                //}
                invalidate();
            }
        }
        private int _realscaleinterval = 1200;
        [category("timetrackbarcontrol"), description("实际相隔的秒数（为了显示自适应时真实的间隔时间）\r\n单位：秒")]
        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");
        }
    }
}

哦，要和大佬的例子放在一起，因为借用了他的控件和事件。还有，大佬的文章末尾有大佬代码的下载链接，嘿嘿~

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

转载请注明出处