C# 自定義時間進度條

• 2021 年 3 月 16 日
• 筆記
• c#, UserControl, 時間進度條, 自定義控件

這篇文章對我幫助極大，我模仿着寫了兩遍大概摸清楚了自定義控件的流程。//www.cnblogs.com/lesliexin/p/13265707.html 感謝大佬 leslie_xin

樣式

最開始

進度條有更改

根據開始時間和結束時間 時間刻度間隔有更改

設置項

正文

首先，我模仿過leslie_xin,寫過一個進度條，用於播放視頻，但是沒有刻度，現在沒有刻度不行，所以要搞一個刻度，計劃使用GDI+

然後，發現//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");
        }
    }
}

哦，要和大佬的例子放在一起，因為借用了他的控件和事件。還有，大佬的文章末尾有大佬代碼的下載鏈接，嘿嘿~

沒有七個#號的樣式
####### 不信你看

轉載請註明出處