【原创】自己动手写控件----XSmartNote控件

一、前面的话

在上一篇博文自己动手写工具----XSmartNote [Beta 3.0]中，用到了若干个自定义控件，其中包含用于显示Note内容的简单的Label扩展控件，用于展示标签内容的label扩展控件，还有包含自定义事件的含checkbox的控件。自定义控件的好处就是其灵活程度很高，不但可以扩展控件的外观，还可以扩展控件的事件，甚至从底层拦截Windows消息进行处理，这也是我喜欢自己写控件的原因。至于自定义控件的几种形式在这里就不说了，有兴趣的小伙伴可以百度一下，下面来看看这些控件的实现过程。

二、控件效果

 

 这部分控件除了上面的TextBoxEx，其他主要是基于Label进行扩展的，有的包含事件，有的包含动态效果，还有的控件只是用于简单地显示信息。

三、控件实现

1、 LabelEx控件

LabelEx控件既包含简单的动态效果，也有自己的事件，首先新建用户控件，继承需要扩展的控件，这里继承的是Label控件，这样就可以使用Label的所有的成员。完善构造函数，并绑定label的LabelEx_TextChanged事件，绑定事件是为了当文字长度发生变化时，LabelEx能够自动适应。然后重写OnPaint方法，绘制自己需要的外观，注意base.OnPaint(e)这句，如果不加上这句代码，控件上的文本是不会显示的。具体看代码：

public partial class LabelEx : Label
{

    #region PARAMS
    private const int WIDTH = 0x0226;//550
    private const int HEIGHT = 0x002F;//47
    #endregion

    #region CONSTRUCTOR
    public LabelEx()
       : base()
    {
        this.Font = new Font(new FontFamily("微软雅黑"), 10.0f);
        InitializeComponent();
        this.AutoSize = false;
        //设置内边距
        this.Padding = new Padding(5);
        //设置外边距
        this.Margin = new Padding(5);
        this.Width = WIDTH;
        this.Height = HEIGHT;
        this.TextChanged += LabelEx_TextChanged;
    }
    #endregion


    #region Property
    public Color NormalBorderColor { get; set; }
    public Color HighLightBorderColor { get; set; }
    #endregion
    
    #region EVENTS
    private void LabelEx_TextChanged(object sender, EventArgs e)
    {
        //文字变化后改变一下当前的大小
        System.Drawing.Size ps = GetPreferredSize(this.Size);
        if (ps.Height < HEIGHT)
        {
            ps.Height = HEIGHT;
        }
        this.Size = new System.Drawing.Size(this.Width, ps.Height);
    }
    #endregion

    #region OVERRIDE
    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);//解决了文字不显示的问题
        Graphics g = e.Graphics;
        int x = this.Width;
        int y = this.Height;
        Point leftTop = new Point(0, 0);
        Point rightTop = new Point(x - 1, 0);
        Point leftBottom = new Point(0, y - 1);
        Point rightBottom = new Point(x - 1, y - 1);
        //绘制四个边缘，避免被背景色填充
        g.DrawLine(new Pen(Color.White), leftTop, rightTop);
        g.DrawLine(new Pen(Color.White), leftBottom, rightBottom);
        g.DrawLine(new Pen(Color.White), leftTop, leftBottom);
        g.DrawLine(new Pen(Color.White), rightTop, rightBottom);
        //画上边缘
        for (int i = 0; i < x - 1; i += 3)
        {
            g.FillRectangle(new SolidBrush(Color.Black), new Rectangle(i, 0, 2, 1));
        }

        //画下边缘
        for (int m = 0; m < x - 1; m += 3)
        {
            g.FillRectangle(new SolidBrush(Color.Black), new Rectangle(m, y - 1, 2, 1));
        }

        //画左边缘
        for (int i = 0; i < y - 1; i += 3)
        {
            g.FillRectangle(new SolidBrush(Color.Black), new Rectangle(0, i, 1, 2));
        }

        //画右边缘
        for (int i = 0; i < y - 1; i += 3)
        {
            g.FillRectangle(new SolidBrush(Color.Black), new Rectangle(x - 1, i, 1, 2));
        }
    }

    public override bool AutoSize
    {
        get
        {
            return false;
        }
    }
    #endregion
}

2、LabelExS控件

上面的LabelEx控件只是简单地处理了一下Label控件，而LabelExS控件继承自LabelEx控件，并添加了一些简单的状态控制。这里的重绘方法，和上面的控件大概是一致的，只是稍微做出了修改。不同状态下的绘制代码：

/// <summary>
/// 激活态
/// </summary>
/// <param name="g"></param>
private void DrawHighLightBorder(Graphics g)
{
    int x = this.Width;
    int y = this.Height;
    //画上边缘
    for (int i = 0; i < x - 1; i++)
    {
        g.FillRectangle(new SolidBrush(base.HighLightBorderColor), new Rectangle(i, 0, 1, 1));
    }

    //画下边缘
    for (int m = 0; m < x - 1; m++)
    {
        g.FillRectangle(new SolidBrush(base.HighLightBorderColor), new Rectangle(m, y - 1, 1, 1));
    }

    //画左边缘
    for (int i = 0; i < y - 1; i++)
    {
        g.FillRectangle(new SolidBrush(base.HighLightBorderColor), new Rectangle(0, i, 1, 1));
    }

    //画右边缘
    for (int i = 0; i < y - 1; i++)
    {
        g.FillRectangle(new SolidBrush(base.HighLightBorderColor), new Rectangle(x - 1, i, 1, 1));
    }
}

/// <summary>
/// 常规态
/// </summary>
/// <param name="g"></param>
private void DrawNormalBorder(Graphics g)
{
    int x = this.Width;
    int y = this.Height;
    //画上边缘
    for (int i = 0; i < x - 1; i++)
    {
        g.FillRectangle(new SolidBrush(base.NormalBorderColor), new Rectangle(i, 0, 1, 1));
    }

    //画下边缘
    for (int m = 0; m < x - 1; m++)
    {
        g.FillRectangle(new SolidBrush(base.NormalBorderColor), new Rectangle(m, y - 1, 1, 1));
    }

    //画左边缘
    for (int i = 0; i < y - 1; i++)
    {
        g.FillRectangle(new SolidBrush(base.NormalBorderColor), new Rectangle(0, i, 1, 1));
    }

    //画右边缘
    for (int i = 0; i < y - 1; i++)
    {
        g.FillRectangle(new SolidBrush(base.NormalBorderColor), new Rectangle(x - 1, i, 1, 1));
    }
}

根据状态进行绘制：

protected override void OnPaint(PaintEventArgs e)
{
    base.OnPaint(e);
    switch (State)
    {
        case 0:
            DrawNormalBorder(g);
            break;
        case 1:
            DrawHighLightBorder(g);
            break;
        default:
            DrawNormalBorder(g);
            break;
    }
}

鼠标事件控制，进入或离开的时候，强制区域无效并更新状态，这样OnPaint函数会根据状态进行重新绘制：

/// <summary>
/// 鼠标进入事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void LabelExSolidBorder_MouseEnter(object sender, EventArgs e)
{
    State = 1;
    base.ForeColor = Color.Orange;
    base.HighLightBorderColor = Color.Orange;// ★可配置
    this.Invalidate();
}

/// <summary>
/// 鼠标离开事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void LabelExSolidBorder_MouseLeave(object sender, EventArgs e)
{
    State = 0;
    base.ForeColor = Color.Brown;
    base.NormalBorderColor = Color.White;// ★可配置
    this.Invalidate();
}

 为控件绑定Click事件，执行自定义操作：

/// <summary>
/// 观察者模式，鼠标单击后，执行自定义操作
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void LabelExSolidBorder_Click(object sender, EventArgs e)
{
    MainForm mf = (MainForm)this.TopLevelControl;
    ShowNote += mf.SetText;//绑定事件
    SetSelectedNode += mf.SetSelectedNode;
    
    if (ShowNote != null)
    {
        ShowNote();//自定义操作
    }
}

3、 RectangleLabel控件

这个控件和第一个控件差不太多，主要的区别就是外围路径的绘制，由矩形变成了圆角矩形，做成了类似标签的效果，在这里仅仅贴出绘制的代码，大概思路就是绘制两条线段，并在合适的位置再绘制两个半圆形并组合在一起就可以了：

protected override void OnPaint(PaintEventArgs e)
{
    base.OnPaint(e);
    Graphics g = e.Graphics;
    Rectangle rect = new Rectangle(new Point(0, 0), new Size(20, 20));
    Rectangle rect2 = new Rectangle(new Point(20, 10), new Size(40, 20));
    Rectangle rect3 = new Rectangle(new Point(60, 0), new Size(20, 20));
    Point[] ps = { new Point(11, 0), new Point(69, 0) };
    Point[] pq = { new Point(11, 20), new Point(69, 20) };
    float start = 90f;
    float end = 180f;
    float start2 = 270f;
    float end2 = 180f;
    Pen p = new Pen(this.BorderColor, this.BorderWidth);
    SolidBrush sl = new SolidBrush(this.InnerColor);
    {
        g.SmoothingMode = SmoothingMode.HighQuality;
        g.DrawArc(p, rect, start, end);
        g.DrawArc(p, rect3, start2, end2);
        g.DrawLine(p, ps[0], ps[1]);
        g.DrawLine(p, pq[0], pq[1]);
    }
}

4、LabelWithCheck控件

相对来说，这个控件由Label和ChecBox组成，是这些控件中是最复杂的，因为它本身包含了事件信息和对应的逻辑，就不仅仅是绘制那么简单了。该控件直接继承自UserControl，灵活性也比较高。

添加了若干属性：

[Category("XHB.Controls")]
[Browsable(true)]
[Description("设置或获取LabelText宽度")]
public int LabelWidth
{
    get
    {
        return labelWidth;
    }
    set
    {
        labelWidth = value + ck.Width + 13;
        this.Refresh();
    }
}
[Category("XHB.Controls")]
[Browsable(true)]
[Description("指示LabelText是否被选中")]
[DefaultValue(false)]
public bool LabelChecked
{
    get
    {
        return ck.Checked;
    }
    set
    {
        ck.Checked = value;
    }
}

代码中的属性上方包含一些控件特性，用于在设计时进行浏览或操作：

Category : 指示控件的分组信息；
Browsable : 指示控件是否可浏览；
Description : 控件的描述信息；
DefaultValue : 控件的默认值；

自定义事件，LabelWithCheck控件的自定义事件继承自EventArgs类：

/// <summary>
/// 事件参数包含的信息
/// </summary>
public class LabelWithCheckEventArgs :EventArgs
{
    private string _LabelText;
    private Guid _Id;
    public LabelWithCheckEventArgs(Guid id,string labelText)
    {
        this._LabelText = labelText;
        this._Id = id;
    }
    public string LabelText
    {
        get
        {
            return _LabelText;
        }
        set
        {
            _LabelText = value;
        }
    }
    public Guid Id
    {
        get
        {
            return _Id;
        }
        set
        {
            _Id = value;
        }
    }
}

默认情况下，单击控件的非CheckBox所在区域，CheckBox不会变化，下面实现单击整个控件都会改变CheckBox的选中状态，只要加一丢丢代码就好：

/// <summary>
/// 单击Label也可以触发CheckBox的选中事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void lb_Click(object sender, EventArgs e)
{
    ck.Checked = ck.Checked ? false : true;
}

四、总结

自定义控件的开发，其实是有规律可循的，无非就是绘制、状态、逻辑的有序组合，无论是简单的控件还是精美复杂的控件，开发的思路都是一样的，掌握了方法，万变不离其宗。这里列出的控件都是入门级的，是适合初学者的，如果文中有表述失误的地方，请提出来，不仅提高自己，更能避免引人误入歧途。具体的代码还是参考我的GitHub上的小工具。注：本文同步发布到我的简书。