這篇文章對我幫助極大，我模仿着寫了兩遍大概摸清楚了自定義控件的流程。https://www.cnblogs.com/lesliexin/p/13265707.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);
}
時間刻度呢？總得去生成吧，所以我們要計算一下，每個刻度之間間隔多少秒鍾，畢竟進度條的最小值為零，最大值為開始時間和最小時間間隔的秒數。
所以：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");
}
}
}
哦，要和大佬的例子放在一起，因為借用了他的控件和事件。還有，大佬的文章末尾有大佬代碼的下載鏈接，嘿嘿~
沒有七個#號的樣式
####### 不信你看