前提

入行已经7,8年了，一直想做一套漂亮点的自定义控件，于是就有了本系列文章。

GitHub：https://github.com/kwwwvagaa/NetWinformControl

码云：https://gitee.com/kwwwvagaa/net_winform_custom_control.git

如果觉得写的还行，请点个 star 支持一下吧

欢迎前来交流探讨：企鹅群568015492

准备工作

梳理一下需求，我们需要一个横向的节点列表控件，可以进行左右翻页

根据上面所写的需求，我们需要分为2步操作，1：创建项控件，2：创建列表控件

开始

首先我们创建项控件，添加一个用户控件，命名UCHorizontalListItem

代码量并不多，我们看下完整代码

 1 // 版权所有  黄正辉  交流群：568015492   QQ：623128629
 2 // 文件名称：UCHorizontalListItem.cs
 3 // 创建日期：2019-08-15 16:01:13
 4 // 功能描述：HorizontalList
 5 // 项目地址：https://gitee.com/kwwwvagaa/net_winform_custom_control
 6 using System;
 7 using System.Collections.Generic;
 8 using System.ComponentModel;
 9 using System.Drawing;
10 using System.Data;
11 using System.Linq;
12 using System.Text;
13 using System.Windows.Forms;
14 
15 namespace HZH_Controls.Controls
16 {
17     [ToolboxItem(false)]
18     public partial class UCHorizontalListItem : UserControl
19     {
20         public event EventHandler SelectedItem;
21         private KeyValuePair<string, string> _DataSource = new KeyValuePair<string, string>();
22         public KeyValuePair<string, string> DataSource
23         {
24             get { return _DataSource; }
25             set
26             {
27                 _DataSource = value;
28                 int intWidth = ControlHelper.GetStringWidth(value.Value, lblTitle.CreateGraphics(), lblTitle.Font);
29                 if (intWidth < 50)
30                     intWidth = 50;
31                 this.Width = intWidth + 20;
32                 lblTitle.Text = value.Value;
33                 SetSelect(false);
34             }
35         }
36         public UCHorizontalListItem()
37         {
38             InitializeComponent();
39             this.Dock = DockStyle.Right;
40             this.MouseDown += Item_MouseDown;
41             this.lblTitle.MouseDown += Item_MouseDown;
42             this.ucSplitLine_H1.MouseDown += Item_MouseDown;
43         }
44 
45         void Item_MouseDown(object sender, MouseEventArgs e)
46         {
47             if (SelectedItem != null)
48                 SelectedItem(this, e);
49         }
50 
51         public void SetSelect(bool bln)
52         {
53             if (bln)
54             {
55                 lblTitle.ForeColor = Color.FromArgb(255, 77, 59);
56                 ucSplitLine_H1.Visible = true;
57                 this.lblTitle.Padding = new Padding(0, 0, 0, 5);
58             }
59             else
60             {
61                 lblTitle.ForeColor = Color.FromArgb(64, 64, 64);
62                 ucSplitLine_H1.Visible = false;
63                 this.lblTitle.Padding = new Padding(0, 0, 0, 0);
64             }
65         }
66     }
67 }

View Code

 1 namespace HZH_Controls.Controls
 2 {
 3     partial class UCHorizontalListItem
 4     {
 5         /// <summary> 
 6         /// 必需的设计器变量。
 7         /// </summary>
 8         private System.ComponentModel.IContainer components = null;
 9 
10         /// <summary> 
11         /// 清理所有正在使用的资源。
12         /// </summary>
13         /// <param name="disposing">如果应释放托管资源，为 true；否则为 false。</param>
14         protected override void Dispose(bool disposing)
15         {
16             if (disposing && (components != null))
17             {
18                 components.Dispose();
19             }
20             base.Dispose(disposing);
21         }
22 
23         #region 组件设计器生成的代码
24 
25         /// <summary> 
26         /// 设计器支持所需的方法 - 不要
27         /// 使用代码编辑器修改此方法的内容。
28         /// </summary>
29         private void InitializeComponent()
30         {
31             this.lblTitle = new System.Windows.Forms.Label();
32             this.ucSplitLine_H1 = new HZH_Controls.Controls.UCSplitLine_H();
33             this.SuspendLayout();
34             // 
35             // lblTitle
36             // 
37             this.lblTitle.Dock = System.Windows.Forms.DockStyle.Fill;
38             this.lblTitle.Font = new System.Drawing.Font("微软雅黑", 10F);
39             this.lblTitle.ForeColor = System.Drawing.Color.FromArgb(((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte)(64)))));
40             this.lblTitle.Location = new System.Drawing.Point(1, 0);
41             this.lblTitle.Name = "lblTitle";
42             this.lblTitle.Padding = new System.Windows.Forms.Padding(0, 0, 0, 10);
43             this.lblTitle.Size = new System.Drawing.Size(118, 50);
44             this.lblTitle.TabIndex = 1;
45             this.lblTitle.Text = "分类名称\r\n分类名称";
46             this.lblTitle.TextAlign = System.Drawing.ContentAlignment.MiddleCenter;
47             // 
48             // ucSplitLine_H1
49             // 
50             this.ucSplitLine_H1.BackColor = System.Drawing.Color.FromArgb(((int)(((byte)(255)))), ((int)(((byte)(77)))), ((int)(((byte)(59)))));
51             this.ucSplitLine_H1.Dock = System.Windows.Forms.DockStyle.Bottom;
52             this.ucSplitLine_H1.Location = new System.Drawing.Point(1, 50);
53             this.ucSplitLine_H1.Name = "ucSplitLine_H1";
54             this.ucSplitLine_H1.Size = new System.Drawing.Size(118, 3);
55             this.ucSplitLine_H1.TabIndex = 0;
56             this.ucSplitLine_H1.TabStop = false;
57             // 
58             // UCHorizontalListItem
59             // 
60             this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.None;
61             this.Controls.Add(this.lblTitle);
62             this.Controls.Add(this.ucSplitLine_H1);
63             this.Name = "UCHorizontalListItem";
64             this.Padding = new System.Windows.Forms.Padding(1, 0, 1, 0);
65             this.Size = new System.Drawing.Size(120, 53);
66             this.ResumeLayout(false);
67 
68         }
69 
70         #endregion
71 
72         private UCSplitLine_H ucSplitLine_H1;
73         private System.Windows.Forms.Label lblTitle;
74     }
75 }

View Code

设计效果如图

接着我们来创建列表控件，添加一个用户控件，命名UCHorizontalList

我们看下需要提供哪些属性

public UCHorizontalListItem SelectedItem { get; set; }
        public event EventHandler SelectedItemEvent;
        private int m_startItemIndex = 0;
        private bool isAutoSelectFirst = true;

        public bool IsAutoSelectFirst
        {
            get { return isAutoSelectFirst; }
            set { isAutoSelectFirst = value; }
        }

        private List<KeyValuePair<string, string>> dataSource = null;

        public List<KeyValuePair<string, string>> DataSource
        {
            get { return dataSource; }
            set
            {
                dataSource = value;
                ReloadSource();
            }
        }

我们有时需要刷新列表

 1  public void ReloadSource()
 2         {
 3             try
 4             {
 5                 ControlHelper.FreezeControl(this, true);
 6                 this.panList.SuspendLayout();
 7                 this.panList.Controls.Clear();
 8                 this.panList.Width = this.panMain.Width;
 9                 if (DataSource != null)
10                 {
11                     foreach (var item in DataSource)
12                     {
13                         UCHorizontalListItem uc = new UCHorizontalListItem();
14                         uc.DataSource = item;
15                         uc.SelectedItem += uc_SelectItem;
16                         this.panList.Controls.Add(uc);
17                     }
18                 }
19                 this.panList.ResumeLayout(true);
20                 if (this.panList.Controls.Count > 0)
21                     this.panList.Width = panMain.Width + this.panList.Controls[0].Location.X * -1;
22                 this.panList.Location = new Point(0, 0);
23                 m_startItemIndex = 0;
24                 if (this.panList.Width > panMain.Width)
25                     panRight.Visible = true;
26                 else
27                     panRight.Visible = false;
28                 panLeft.Visible = false;
29                 panList.SendToBack();
30                 panRight.SendToBack();
31                 if (isAutoSelectFirst && DataSource != null && DataSource.Count > 0)
32                 {
33                     SelectItem((UCHorizontalListItem)this.panList.Controls[0]);
34                 }
35             }
36             finally
37             {
38                 ControlHelper.FreezeControl(this, false);
39             }
40         }

还需要处理选中处理

1  private void SelectItem(UCHorizontalListItem item)
2         {
3             if (SelectedItem != null && !SelectedItem.IsDisposed)
4                 SelectedItem.SetSelect(false);
5             SelectedItem = item;
6             SelectedItem.SetSelect(true);
7             if (SelectedItemEvent != null)
8                 SelectedItemEvent(item, null);
9         }

然后就是翻页功能的处理了

 1  private void panLeft_MouseDown(object sender, MouseEventArgs e)
 2         {
 3             if (this.panList.Location.X >= 0)
 4             {
 5                 this.panList.Location = new Point(0, 0);
 6                 return;
 7             }
 8 
 9             for (int i = m_startItemIndex; i >= 0; i--)
10             {
11                 if (this.panList.Controls[i].Location.X < this.panList.Controls[m_startItemIndex].Location.X - panMain.Width)
12                 {
13                     m_startItemIndex = i + 1;
14                     break; ;
15                 }
16                 if (i == 0)
17                 {
18                     m_startItemIndex = 0;
19                 }
20             }
21 
22             ResetListLocation();
23             panRight.Visible = true;
24             if (this.panList.Location.X >= 0)
25             {
26                 panLeft.Visible = false;
27             }
28             else
29             {
30                 panLeft.Visible = true;
31             }
32             panList.SendToBack();
33             panRight.SendToBack();
34         }
35 
36         private void panRight_MouseDown(object sender, MouseEventArgs e)
37         {
38             if (this.panList.Location.X + this.panList.Width <= this.panMain.Width)
39                 return;
40             if (this.panList.Controls.Count <= 0)
41                 return;
42             for (int i = m_startItemIndex; i < this.panList.Controls.Count; i++)
43             {
44                 if (this.panList.Location.X + this.panList.Controls[i].Location.X + this.panList.Controls[i].Width > panMain.Width)
45                 {
46                     m_startItemIndex = i;
47                     break;
48                 }
49             }
50             ResetListLocation();
51             panLeft.Visible = true;
52             if (panList.Width + panList.Location.X <= panMain.Width)
53                 panRight.Visible = false;
54             else
55                 panRight.Visible = true;
56             panList.SendToBack();
57             panRight.SendToBack();
58         }
59 
60         private void ResetListLocation()
61         {
62             if (this.panList.Controls.Count > 0)
63             {
64                 this.panList.Location = new Point(this.panList.Controls[m_startItemIndex].Location.X * -1, 0);
65             }
66         }

最后向外暴露一个设置选中的功能

 1 public void SetSelect(string strKey)
 2         {
 3             foreach (UCHorizontalListItem item in this.panList.Controls)
 4             {
 5                 if (item.DataSource.Key == strKey)
 6                 {
 7                     SelectItem(item);
 8                     return;
 9                 }
10             }
11         }

以上就是主要东西了，再看下完整代码

  1 // 版权所有  黄正辉  交流群：568015492   QQ：623128629
  2 // 文件名称：UCHorizontalList.cs
  3 // 创建日期：2019-08-15 16:01:06
  4 // 功能描述：HorizontalList
  5 // 项目地址：https://gitee.com/kwwwvagaa/net_winform_custom_control
  6 using System;
  7 using System.Collections.Generic;
  8 using System.ComponentModel;
  9 using System.Drawing;
 10 using System.Data;
 11 using System.Linq;
 12 using System.Text;
 13 using System.Windows.Forms;
 14 
 15 namespace HZH_Controls.Controls
 16 {
 17     public partial class UCHorizontalList : UserControl
 18     {
 19         public UCHorizontalListItem SelectedItem { get; set; }
 20         public event EventHandler SelectedItemEvent;
 21         private int m_startItemIndex = 0;
 22         private bool isAutoSelectFirst = true;
 23 
 24         public bool IsAutoSelectFirst
 25         {
 26             get { return isAutoSelectFirst; }
 27             set { isAutoSelectFirst = value; }
 28         }
 29 
 30         private List<KeyValuePair<string, string>> dataSource = null;
 31 
 32         public List<KeyValuePair<string, string>> DataSource
 33         {
 34             get { return dataSource; }
 35             set
 36             {
 37                 dataSource = value;
 38                 ReloadSource();
 39             }
 40         }
 41 
 42         public UCHorizontalList()
 43         {
 44             InitializeComponent();
 45         }
 46 
 47         public void ReloadSource()
 48         {
 49             try
 50             {
 51                 ControlHelper.FreezeControl(this, true);
 52                 this.panList.SuspendLayout();
 53                 this.panList.Controls.Clear();
 54                 this.panList.Width = this.panMain.Width;
 55                 if (DataSource != null)
 56                 {
 57                     foreach (var item in DataSource)
 58                     {
 59                         UCHorizontalListItem uc = new UCHorizontalListItem();
 60                         uc.DataSource = item;
 61                         uc.SelectedItem += uc_SelectItem;