使用Winform开发自定义用户控件，以及实现相关自定义事件的处理

肖舸

在我们一些非标的用户界面中，我们往往需要自定义用户控件界面，从而实现不同的内容展示和处理规则，本篇内容介绍使用Winform开发自定义用户控件，以及实现相关自定义事件的处理。
1、用户控件的界面分析

对于比较规范的界面，需要进行一定的分析，以便从中找到对应的规则，逐步细化为自定义用户控件的方式。例如对于由下面多个集合组成的界面内容。

 我们截取其中之一，也就是有这些内容多个组合而成，集合可以通过布局TableLayoutPanel（表格布局）或者FlowLayoutPanel（顺序流布局）来添加即可。

 而其中之一的内容，不同的颜色方格又可以定义为一个用户控件，因此最终有多个小方格组成的用户控件的。

而单个用户控件，可能承载不同的内容，我们可以定义更多的接口属性以及一些事件来处理相关的逻辑。
甚至，我能还可以在一个单元格里面放置更多的内容，如放置一些特殊的标签来展示信息。

2、自定义用户控件的接口和实现

为了使用户控件更加规范化，我们可以定义一个接口，声明相关的属性和处理方法，如下代码所示。

1.     /// <summary>
2.     /// 自定义控件的接口
3.     /// </summary>
4.     public interface INumber
5.     {
6.         /// <summary>
7.         /// 数字
8.         /// </summary>
9.         string Number { get; set; }
11.         /// <summary>
12.         /// 数值颜色
13.         /// </summary>
14.         Color Color { get; set; }
16.         /// <summary>
17.         /// 显示文本
18.         /// </summary>
19.         string Animal { get; set; }
21.         /// <summary>
22.         /// 显示文本
23.         /// </summary>
24.         string WuHan { get; set; }
26.         /// <summary>
27.         /// 设置选中的内容的处理
28.         /// </summary>
29.         /// <param name="data">事件数据</param>
30.         void SetSelected(ClickEventData data);
31.     }

复制代码

然后我们创建一个用户控件，并命名为NumberItem，并使它继承前面定义的接口 INumber ，实现相关的属性和事件，如下代码所示。

1.     /// <summary>
2.     /// 自定义用户控件
3.     /// </summary>
4.     public partial class NumberItem : UserControl, INumber
5.     {
6.         /// <summary>
7.         /// 数字
8.         /// </summary>
9.         public string Number { get; set; }
11.         /// <summary>
12.         /// 颜色
13.         /// </summary>
14.         public Color Color { get; set; }
16.         /// <summary>
17.         /// 显示文本
18.         /// </summary>
19.         public string Animal { get; set; }
21.         /// <summary>
22.         /// 显示文本
23.         /// </summary>
24.         public string WuHan { get; set; }

复制代码

其中处理方法SetSelected先保留为空，后面继续完善。

1.         /// <summary>
2.         /// 设置选中的数值
3.         /// </summary>
4.         /// <param name="data">传递的数据</param>
5.         public void SetSelected(ClickEventData data)
6.         {
8.         }

复制代码

由于自定义控件，我们需要跟踪用户的单击处理，并且需要把这个逻辑逐步推动到顶级界面上去进行处理，因此需要定义一个事件信息，如下所示。

1.         /// <summary>
2.         /// 事件处理
3.         /// </summary>
4.         public EventHandler<ClickEventData> ClickEventHandler { get; set; }

复制代码

其中ClickEventData是我们定义的一个数据，用来承载用户单击的类型和值内容的信息结构，如下代码所示。

1.    /// <summary>
2.    /// 对自定义控件触发的事件信息
3.    /// </summary>
4.    public class ClickEventData
5.    {
6.        /// <summary>
7.        /// 事件触发类型
8.        /// </summary>
9.        public ClickEventType ClickEventType { get; set; } = ClickEventType.Number;
11.        /// <summary>
12.        /// 传递值
13.        /// </summary>
14.        public string Value { get; set; }
16.        public ClickEventData()
17.        {
18.        }
20.        /// <summary>
21.        /// 参数化构造
22.        /// </summary>
23.        /// <param name="clickEventType">事件触发类型</param>
24.        /// <param name="value">传递值</param>
25.        public ClickEventData(ClickEventType clickEventType, string value)
26.        {
27.            ClickEventType = clickEventType;
28.            Value = value;
29.        }
30.    }

复制代码

在创建一个整合多个号码数值的一个自定义控件，他也是一个完整的单元之一，我们命名为 LotteryItemControl2。
我们相当于把前面的自定义控件，组合为一个新的用户控件，形成一个相对完整的部分，这里提供两种思路，一种是使用常规的用户控件，拖动已有的用户控件组合而成，如下所示。

 另一种是利用TableLayoutPanel，动态添加控件进行组合，可以根据预设的TableLayout布局实现控件的顺序添加。

表格的行列定义如下所示

两种方式都可以实现类似的效果，我们这里以第一种为例实现。

1.     public partial class LotteryItemControl2 : UserControl    {        /// <summary>
2.         /// 事件处理
3.         /// </summary>
4.         public EventHandler<ClickEventData> ClickEventHandler { get; set; }        ///         /// 第几期        ///         public string Qi { get; set; }        ///         /// 数据列表        ///         public List NumberList { get; set; }

复制代码

数据列表就是展示在自定义控件的数字。在控件中定义一个函数 统一处理数据内容的绑定显示。

1.         /// <summary>
2.         /// 绑定数据
3.         /// </summary>
4.         public void BindData()
5.         {
6.             //控件列表，方便统一处理
7.             var controlList = new List<NumberItem>
8.             {
9.                 this.numberItem1, this.numberItem2, this.numberItem3, this.numberItem4,
10.                 this.numberItem5, this.numberItem6, this.numberItem7
11.             };
13.             this.labelQi.Text = Qi; //设置第几期
14.             for(int i =0; i < this.NumberList.Count; i++)
15.             {
16.                 var control = controlList[i];
17.                 var number = this.NumberList[i];
19.                 var shenxiao = LotteryToolHelper.NumberToShenXiaoDict[number]; //"马";
20.                 var wuhan = LotteryToolHelper.NumberToWuhanDict[number];//"土"
22.                 control.Number = number;
23.                 control.Animal = shenxiao;
24.                 control.WuHan = wuhan;
26.                 var colorStr = LotteryToolHelper.ColorBall[number];
27.                 control.Color = LotteryToolHelper.GetColor(colorStr);  //item % 2 == 0 ? Color.Red : Color.Green;
29.                 control.BindData();
30.                 control.ClickEventHandler += (s, data) =>
31.                 {
32.                     if (ClickEventHandler != null)
33.                     {
34.                         //传递父控件统一处理
35.                         ClickEventHandler(s, data);
36.                     }
37.                 };
38.             }
39.         }

复制代码

其中该控件也可以设置选中，有具体的子控件调用设置选中的处理规则即可。

1.         /// <summary>
2.         /// 遍历控件，设置选中的数值
3.         /// </summary>
4.         /// <param name="data">传递信息</param>
5.         public void SetSelected(ClickEventData data)
6.         {
7.             foreach (var control in this.Controls)
8.             {
9.                 if (control is NumberItem item)
10.                 {
11.                     item.SetSelected(data);
12.                 }
13.             }
14.         }

复制代码

为了提高性能，我们一般往往需要设置窗体或者Panel为双缓冲DoubleBuffered = true。
在主界面的面板中，我们可以添加一个FlowLayoutPanel 来按顺序堆叠用户控件，具体的实现逻辑就是根据从数据库获得的记录进行展示即可。

1.     var controlList = new List<<strong>LotteryItemControl2</strong>>();
2.     foreach (var info in list)
3.     {
4.         var control = new<strong> LotteryItemControl2</strong>();
6.         control.Qi = info.LineNo.ToString("D2");
7.         var numberList = new List<string>()
8.         {
9.             info.No1.ToString("D2"),
10.             info.No2.ToString("D2"),
11.             info.No3.ToString("D2"),
12.             info.No4.ToString("D2"),
13.             info.No5.ToString("D2"),
14.             info.No6.ToString("D2"),
15.             info.No7.ToString("D2"),
16.         };
17.         control.<strong>NumberList</strong> = numberList;
18.         control.BindData();
20.         control.<strong>ClickEventHandler</strong> += (s, data) =>
21.         {
22.             //遍历所有的控件统一处理样式
23.             foreach (var subCtrl in panel.Controls)
24.             {
25.                 if (subCtrl is LotteryItemControl2 lottery)
26.                 {
27.                     lottery.SetSelected(data);
28.                 }
29.             }
30.         };
31.         controlList.Add(control);
32.     }
33.     this.panel.Controls.<strong>AddRange</strong>(controlList.ToArray());

复制代码

以上就是相关的处理逻辑，用来组织自定义用户控件的统一展示处理。
如果需要用户进行不同条件的数据展示，那么展示前，就需要重新清空面板中的控件，如下所示。

1.             //清空界面
2.             while (panel.Controls.Count > 0)
3.             {
4.                 var controltoremove = panel.Controls[0];
5.                 panel.Controls.RemoveAt(0);
6.                 <strong>controltoremove.Dispose()</strong>;
7.             }
8.             panel.Controls.Clear();

复制代码

上面代码记得调用Dispose方法来释放控件资源。
在最小的自定义控件中，我们可能需要根据一些条件进行一些自定义绘制处理，以突出显示不同的内容（重点强调选中项目）。

1. private void NumberItem_Paint(object sender, PaintEventArgs e)

复制代码

如下是一些特殊的绘制处理内容。

1.         private void NumberItem_Paint(object sender, PaintEventArgs e)
2.         {
3.             this.BackColor = (this.BorderStyle == BorderStyle.FixedSingle) ? Color.Yellow : Color.Transparent;
4.             if (this.BorderStyle == BorderStyle.FixedSingle)
5.             {
6.                 IntPtr hDC = GetWindowDC(this.Handle);
7.                 Graphics g = Graphics.FromHdc(hDC);
8.                 ControlPaint.DrawBorder(
9.                 g,
10.                 new Rectangle(0, 0, this.Width, this.Height),
11.                 _borderColor,
12.                 _borderWidth,
13.                 ButtonBorderStyle.Solid,
14.                 _borderColor,
15.                 _borderWidth,
16.                 ButtonBorderStyle.Solid,
17.                 _borderColor,
18.                 _borderWidth,
19.                 ButtonBorderStyle.Solid,
20.                 _borderColor,
21.                 _borderWidth,
22.                 ButtonBorderStyle.Solid);
23.                 g.Dispose();
24.                 ReleaseDC(Handle, hDC);
25.             }
26.         }

复制代码

最终展示效果如下所示，黄色强调的处理，是选中相同号码的处理事件结果绘制。

 
注：本篇随笔借鉴一些特殊的界面来介绍自定义用户控件的处理经验，无其他不良引导，请关注技术本身的分析和处理。
 

来源:https://www.cnblogs.com/wuhuacong/Undeclared/17956908
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！