【WinForm】自定义控件（进度控制条）
上篇说了如何创建自定义控件，接下来说说如何自定义属性，如何绘制控件，以进度控制条为例，先上效果图
这里只实现了简单的进度控制功能，该控件由三部分组成，总长度（底部白色矩形），已加载长度（灰色矩形），控制块（黑色矩形），百分比
1、首先创建一个类库，命名为MySlider， 继承自 Control 类
public class MySlider : Control
{
public MySlider()
{
this.SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.OptimizedDoubleBuffer | ControlStyles.ResizeRedraw | ControlStyles.UserPaint, true);
}
}
在构造函数中设置控件Style，ControlStyles枚举可以参考
http://technet.microsoft.com/zh-cn/subscriptions/system.windows.forms.controlstyles.aspx
2、接下来，我们需要定义以下变量，并对一些变量进行一些默认设置
Rectangle foreRect;
Rectangle backRect;
Rectangle setRect;
Color backgroundColor = Color.White;
Color foregroundColor = Color.Gray;
Color setRectColor = Color.Black;
Color fontColor = Color.Black;
int maximum = 100;
int minimum = 0;
double myValue = 0;
bool showPercent;
float fontSize = 9;
FontFamily myFontFamily = new FontFamily("宋体");
3、再来，设置属性值
View Code
View Code [Category("General"), Description("Show Percent Tag"), Browsable(true)]
public bool ShowPercentTag
{
get { return showPercent; }
set
{
showPercent = value;
Invalidate();
}
}
[Category("General"), Description("Control's Maximum"), Browsable(true)]
public int Maximum
{
get { return maximum; }
set
{
maximum = value;
Invalidate();
}
}
[Category("General"), Description("Control's Minimum"), Browsable(true)]
public int Minimum
{
get { return minimum; }
set
{
minimum = value;
Invalidate();
}
}
[Category("General"), Description("Control's FontSize"), Browsable(true)]
public float FontSize
{
get { return fontSize; }
set
{
this.fontSize = value;
Invalidate();
}
}
[Category("General"), Description("Control's FontFamily"), Browsable(true)]
public FontFamily MyFontFamily
{
get { return myFontFamily; }
set
{
this.myFontFamily = value;
Invalidate();
}
}
[Category("Color"), Browsable(true)]
public Color BackgroundColor
{
get { return backgroundColor; }
set
{
this.backgroundColor = value;
Invalidate();
}
}
[Category("Color"), Browsable(true)]
public Color ForegroundColor
{
get { return foregroundColor; }
set
{
this.foregroundColor = value;
Invalidate();
}
}
[Category("Color"), Browsable(true)]
public Color SetRectColor
{
get { return setRectColor; }
set
{
this.setRectColor = value;
Invalidate();
}
}
[Category("Color"), Browsable(true)]
public Color FontColor
{
get { return fontColor; }
set
{
this.fontColor = value;
Invalidate();
}
}
还有一个myValue没有设置，后面会讲到
4、接下来要确定控件的位置，我们根据 Width 和 Height 属性来确定矩形的位置，由于Control 类也有这两个属性，我们在前面加上new覆盖掉原有的属性
[Category("General"), Description("Control's Width"), Browsable(true)]
public new int Width
{
get { return base.Width; }
set
{
base.Width = value;
foreRect.X = backRect.X = base.Width / 20;
backRect.Width = base.Width * 9 / 10;
foreRect.Width = (int)(myValue / maximum * backRect.Width);
setRect.X = (int)(myValue / maximum * (backRect.Width - backRect.Height) + foreRect.X);
Invalidate();
}
}
[Category("General"), Description("Control's Height"), Browsable(true)]
public new int Height
{
get { return base.Height; }
set
{
base.Height = value;
foreRect.Height = backRect.Height = setRect.Height = setRect.Width = base.Height / 3;
foreRect.Y = backRect.Y = setRect.Y = base.Height / 3;
Invalidate();
}
}
通过Width 和 Height 属性，计算出三个矩形的位置和大小，接下来是Value属性
5、在进度控制条中，这个Value属性比较重要，我们经常需要相应这个Value值变化的事件，例如，播放音乐的时候，用户拖动进度条改变Value时，需要使音乐播放到相应的位置
所以在这里我们先定义一个事件，当外部为该事件添加了响应函数时，事件就会生效，否则为OnValueChanged的值为null
protected EventHandler OnValueChanged;
public event EventHandler ValueChanged
{
add
{
if (OnValueChanged != null)
{
foreach (Delegate d in OnValueChanged.GetInvocationList())
{
if (object.ReferenceEquals(d, value)) { return; }
}
}
OnValueChanged = (EventHandler)Delegate.Combine(OnValueChanged, value);
}
remove
{
OnValueChanged = (EventHandler)Delegate.Remove(OnValueChanged, value);
}
}
6、接下来定义Value属性
当Value值改变的时候,重新设置矩形的进度，控制块的位置，并且重绘控件
[Category("General"), Description("Control's Value"), Browsable(true)]
public double Value
{
get { return myValue; }
set
{
if (myValue < Minimum)
throw new ArgumentException("小于最小值");
if (myValue > Maximum)
throw new ArgumentException("超过最大值");
myValue = value;
foreRect.Width = (int)(myValue / maximum * backRect.Width);
setRect.X = (int)(myValue / maximum * (backRect.Width - backRect.Height) + backRect.X);
if ((myValue - maximum) > 0)
{
foreRect.Width = backRect.Width;
setRect.X = backRect.Width - backRect.Height + backRect.X;
}
//如果添加了响应函数,则执行该函数
if (OnValueChanged != null)
{
OnValueChanged(this, EventArgs.Empty);
}
Invalidate();
}
}
这样，属性就算添加完了，有一个地方需要注意的，Value属性内如果对进度条的值进行修改，使用myValue变量，而在其他地方，则用Value属性
7、接下来是绘制控件，从过重载OnPaint方法对控件进行绘制
protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e);
DrawRect(e.Graphics);
DrawText(e.Graphics);
}
private void DrawRect(Graphics e)
{
Pen pen = new Pen(this.foregroundColor);
e.FillRectangle(new SolidBrush(this.backgroundColor), backRect);
e.DrawRectangle(new Pen(Color.Black), backRect);
e.FillRectangle(new SolidBrush(this.foregroundColor), foreRect);
e.DrawRectangle(new Pen(Color.Black), foreRect);
e.FillRectangle(new SolidBrush(this.setRectColor), setRect);
e.DrawRectangle(new Pen(Color.Black), setRect);
}
private void DrawText(Graphics e)
{
Point point = new Point();
point.X = this.backRect.X + this.backRect.Width * 3 / 7;
point.Y = this.backRect.Y + this.backRect.Height / 3;
SolidBrush brush = new SolidBrush(fontColor);
Font font = new Font(myFontFamily, this.fontSize);
string percent = ((int)this.myValue).ToString() + "%";
StringFormat format = new StringFormat();
format.Alignment = StringAlignment.Center;
format.LineAlignment = StringAlignment.Center;
e.DrawString(percent, font, brush, backRect, format);
}
使用Graphics进行绘制，这里有个要点，通过设置StringFormat可以让文字居中显示
8、最后还有一个方法OnResize，在设计时，修改控件的大小会调用这个方法，比如：拖动边缘的箭头改变控件的大小时，控件也要做相应的改变时，就可以重载该方法，如果没有重载，就只有在修改完成后才更新控件，不懂的可以自己试一下 : )
protected override void OnResize(EventArgs e)
{
base.OnResize(e);
this.Width = Width;
this.Height = Height;
Invalidate();
}
好了，控件算是绘制完成了
对了，还有，控件绘制完了，却不能操作，还要对控件进行操作
9、这里通过三个鼠标事件函数，让鼠标可以拖动控制条
在构造函数中添加下面语句
this.MouseDown += MySlider_MouseDown;
this.MouseMove += MySlider_MouseMove;
this.MouseUp += MySlider_MouseUp;
添加三个辅助变量，添加响应函数
Point originPoint;
Point originsetRectPoint;
bool setRectDown = false;
void MySlider_MouseUp(object sender, MouseEventArgs e)
{
setRectDown = false;
}
void MySlider_MouseMove(object sender, MouseEventArgs e)
{
if (setRectDown)
{
int dd = e.Location.X - originPoint.X;
double percent = (double)(originsetRectPoint.X + dd - this.backRect.X) / (this.backRect.Width - this.backRect.Height);
if (percent < 0)
{
this.Value = minimum;
this.foreRect.Width = 0;
this.setRect.X = backRect.X;
}
else if (percent > 1)
{
this.Value = maximum;
this.foreRect.Width = this.backRect.Width;
this.setRect.X = backRect.X + backRect.Width - backRect.Height;
}
else
{
this.Value = percent * maximum;
this.foreRect.Width = (int)(percent * this.backRect.Width);
this.setRect.X = originsetRectPoint.X + dd;
}
Invalidate();
}
}
void MySlider_MouseDown(object sender, MouseEventArgs e)
{
if (setRect.Contains(e.Location))
{
this.originPoint = e.Location;
originsetRectPoint = this.setRect.Location;
this.setRectDown = true;
}
}
到这里，一个自定义的进度控制条算是完成了，功能比较简单，大家可以自己完善
