C# 自定義時間進度條
這篇文章對我幫助極大，我模仿着寫了兩遍大概摸清楚了自定義控件的流程。http://www.javashuo.com/article/p-qqasooqt-md.html 感謝大佬 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);
}
時間刻度呢？總得去生成吧，因此咱們要計算一下，每一個刻度之間間隔多少秒鐘，畢竟進度條的最小值爲零，最大值爲開始時間和最小時間間隔的秒數。
因此：一、計算間隔
二、計算時間刻度的座標
三、畫出來
/// <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
收穫
一、markdown 不會使，排版全用######
####### 我太難了
html
二、在UserControl中，若是不是其餘控件的事件，那麼將事件替換爲OnXXX(),例如：Click替換爲OnClick(),這樣好像比較快，尤爲是鼠標事件
三、注意循環調用，好比修改 BarCurValue時修改了this.trackBar.value還加了事件,而後又在this.trackBar的valueChanged事件中修改了BarCurValue,而後就會發現vs好像累了，它不想理你了，怎麼挑逗都不起做用了outofstrack?仍是其餘的啥玩意。就是這兩個發生了循環調用
四、這個版本有點小問題，修改辦法放在收穫中
其餘，未知，忘記了，等我記起了再補充。退朝~
完整內容
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");
}
}
}
哦，要和大佬的例子放在一塊兒，由於借用了他的控件和事件。還有，大佬的文章末尾有大佬代碼的下載連接，嘿嘿~
沒有七個#號的樣式
####### 不信你看markdown
轉載請註明出處
相關文章
- 1. Qt自定義進度條
- 2. 自定義進度條
- 3. 自定義的進度條
- 4. 自定義進度條demo
- 5. android自定義進度條
- 6. 自定義View 進度條
- 7. 自定義Progress進度條
- 8. 自定義進度條（ProgressBar）
- 9. flutter-自定義進度條
- 10. Android自定義進度條
- 更多相關文章...
- • 自定義TypeHandler - MyBatis教程
- • MySQL自定義函數（CREATE FUNCTION） - MySQL教程
- • RxJava操作符（十）自定義操作符
- • C# 中 foreach 遍歷的用法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Appium入門
- 2. Spring WebFlux 源碼分析(2)-Netty 服務器啓動服務流程 --TBD
- 3. wxpython入門第六步（高級組件）
- 4. CentOS7.5安裝SVN和可視化管理工具iF.SVNAdmin
- 5. jedis 3.0.1中JedisPoolConfig對象缺少setMaxIdle、setMaxWaitMillis等方法，問題記錄
- 6. 一步一圖一代碼，一定要讓你真正徹底明白紅黑樹
- 7. 2018-04-12—（重點）源碼角度分析Handler運行原理
- 8. Spring AOP源碼詳細解析
- 9. Spring Cloud（1）
- 10. python簡單爬去油價信息發送到公衆號
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Qt自定義進度條
- 2. 自定義進度條
- 3. 自定義的進度條
- 4. 自定義進度條demo
- 5. android自定義進度條
- 6. 自定義View 進度條
- 7. 自定義Progress進度條
- 8. 自定義進度條（ProgressBar）
- 9. flutter-自定義進度條
- 10. Android自定義進度條