【原创】自己动手写控件----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;//
     private const int HEIGHT = 0x002F;//
     #endregion

     #region CONSTRUCTOR
     public LabelEx()
        : base()
     {
         this.Font = new Font(new FontFamily("微软雅黑"), 10.0f);
         InitializeComponent();
         this.AutoSize = false;
         //设置内边距
         this.Padding = new Padding();
         //设置外边距
         this.Margin = new Padding();
         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(, );
         Point rightTop = new Point(x - , );
         Point leftBottom = new Point(, y - );
         Point rightBottom = new Point(x - , y - );
         //绘制四个边缘，避免被背景色填充
         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 = ; i < x - ; i += )
         {
             g.FillRectangle(new SolidBrush(Color.Black), new Rectangle(i, , , ));
         }

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

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

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

     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 = ; i < x - ; i++)
     {
         g.FillRectangle(new SolidBrush(base.HighLightBorderColor), new Rectangle(i, , , ));
     }

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

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

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

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

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

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

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

根据状态进行绘制：

 protected override void OnPaint(PaintEventArgs e)
 {
     base.OnPaint(e);
     switch (State)
     {
         case :
             DrawNormalBorder(g);
             break;
         case :
             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 = ;
     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 = ;
     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(, ), new Size(, ));
     Rectangle rect2 = new Rectangle(new Point(, ), new Size(, ));
     Rectangle rect3 = new Rectangle(new Point(, ), new Size(, ));
     Point[] ps = { new Point(, ), new Point(, ) };
     Point[] pq = { new Point(, ), new Point(, ) };
     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[], ps[]);
         g.DrawLine(p, pq[], pq[]);
     }
 }

4、LabelWithCheck控件

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

添加了若干属性：

 [Category("XHB.Controls")]
 [Browsable(true)]
 [Description("设置或获取LabelText宽度")]
 public int LabelWidth
 {
     get
     {
         return labelWidth;
     }
     set
     {
         labelWidth = value + ck.Width + ;
         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上的小工具。注：本文同步发布到我的简书。

作者：悠扬的牧笛

博客地址：http://www.cnblogs.com/xhb-bky-blog/p/5523611.html

声明：本博客原创文字只代表本人工作中在某一时间内总结的观点或结论，与本人所在单位没有直接利益关系。非商业，未授权贴子请以现状保留，转载时必须保留此段声明，且在文章页面明显位置给出原文连接。