（四十三）c#Winform自定义控件-Listview

前提

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

github：https://github.com/kwwwvagaa/netwinformcontrol

码云：

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

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

麻烦博客下方点个【推荐】，谢谢

nuget

install-package hzh_controls

目录

用处及效果

使用分页控件效果

不使用分页控件效果

准备工作

我们需要元素控件，需要列表控件，另外为了具有更好的扩展性，元素控件实现接口，方便进行扩展

我们用到了分页控件，如果你还不了解，请移步查看

（十二）c#winform自定义控件-分页控件

我们这里的元素控件用到圆角，故继承基类控件uccontrolbase，如果不了解，请移步查看

（一）c#winform自定义控件-基类控件

开始

添加一个接口，用来约束元素控件

 1  public interface ilistviewitem
 2     {
 3         /// <summary>
 4         /// 数据源
 5         /// </summary>
 6         object datasource { get; set; }
 7         /// <summary>
 8         /// 选中项事件
 9         /// </summary>
10         event eventhandler selecteditemevent;
11         /// <summary>
12         /// 选中处理，一般用以更改选中效果
13         /// </summary>
14         /// <param name="blnselected">是否选中</param>
15         void setselected(bool blnselected);
16     }

添加一个元素控件，命名uclistviewitem，我们这里继承基类控件uccontrolbase，实现接口ilistviewitem

 1 using system;
 2 using system.collections.generic;
 3 using system.componentmodel;
 4 using system.drawing;
 5 using system.data;
 6 using system.linq;
 7 using system.text;
 8 using system.windows.forms;
 9 
10 namespace hzh_controls.controls
11 {
12     [toolboxitem(false)]
13     public partial class uclistviewitem : uccontrolbase, ilistviewitem
14     {
15         private object m_datasource;
16         public object datasource
17         {
18             get
19             {
20                 return m_datasource;
21             }
22             set
23             {
24                 m_datasource = value;
25                 lbltitle.text = value.tostring();
26             }
27         }
28 
29         public event eventhandler selecteditemevent;
30         public uclistviewitem()
31         {
32             initializecomponent();
33             lbltitle.mousedown += lbltitle_mousedown;
34         }
35 
36         void lbltitle_mousedown(object sender, mouseeventargs e)
37         {
38             if (selecteditemevent != null)
39             {
40                 selecteditemevent(this, e);
41             }
42         }
43 
44         public void setselected(bool blnselected)
45         {
46             if (blnselected)
47                 this.fillcolor = color.fromargb(255, 247, 245);
48             else
49                 this.fillcolor = color.white;
50             this.refresh();
51         }
52     }
53 }

 1 namespace hzh_controls.controls
 2 {
 3     partial class uclistviewitem
 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.suspendlayout();
33             // 
34             // lbltitle
35             // 
36             this.lbltitle.dock = system.windows.forms.dockstyle.fill;
37             this.lbltitle.location = new system.drawing.point(0, 0);
38             this.lbltitle.name = "lbltitle";
39             this.lbltitle.size = new system.drawing.size(107, 96);
40             this.lbltitle.tabindex = 0;
41             this.lbltitle.textalign = system.drawing.contentalignment.middlecenter;
42             // 
43             // uclistviewitem
44             // 
45             this.autoscalemode = system.windows.forms.autoscalemode.none;
46             this.backcolor = system.drawing.color.transparent;
47             this.controls.add(this.lbltitle);
48             this.fillcolor = system.drawing.color.white;
49             this.isradius = true;
50             this.isshowrect = true;
51             this.name = "uclistviewitem";
52             this.rectcolor = system.drawing.color.fromargb(((int)(((byte)(232)))), ((int)(((byte)(232)))), ((int)(((byte)(232)))));
53             this.size = new system.drawing.size(107, 96);
54             this.resumelayout(false);
55 
56         }
57 
58         #endregion
59 
60         private system.windows.forms.label lbltitle;
61     }
62 }

然后需要一个列表来显示元素控件

添加一个用户控件，命名uclistview

一些属性

  1 int m_intcellwidth = 130;//单元格宽度
  2         int m_intcellheight = 120;//单元格高度
  3 
  4         private type m_itemtype = typeof(uclistviewitem);
  5 
  6         [description("单元格类型，如果无法满足您的需求，你可以自定义单元格控件，并实现接口ilistviewitem"), category("自定义")]
  7         public type itemtype
  8         {
  9             get { return m_itemtype; }
 10             set
 11             {
 12                 if (!typeof(ilistviewitem).isassignablefrom(value) || !value.issubclassof(typeof(control)))
 13                     throw new exception("单元格控件没有继承实现接口ilistviewitem");
 14                 m_itemtype = value;
 15             }
 16         }
 17 
 18         private ucpagercontrolbase m_page = null;
 19         /// <summary>
 20         /// 翻页控件
 21         /// </summary>
 22         [description("翻页控件，如果ucpagercontrol不满足你的需求，请自定义翻页控件并继承ucpagercontrolbase"), category("自定义")]
 23         public ucpagercontrolbase page
 24         {
 25             get { return m_page; }
 26             set
 27             {
 28                 m_page = value;
 29                 if (value != null)
 30                 {
 31                     if (!typeof(ipagecontrol).isassignablefrom(value.gettype()) || !value.gettype().issubclassof(typeof(ucpagercontrolbase)))
 32                         throw new exception("翻页控件没有继承ucpagercontrolbase");
 33                     this.panmain.autoscroll = false;
 34                     panpage.visible = true;
 35                     this.controls.setchildindex(panmain, 0);
 36                     m_page.showsourcechanged += m_page_showsourcechanged;
 37                     m_page.dock = dockstyle.fill;
 38                     this.panpage.controls.clear();
 39                     this.panpage.controls.add(m_page);
 40                     getcellcount();
 41                     this.datasource = m_page.getcurrentsource();
 42                 }
 43                 else
 44                 {
 45                     this.panmain.autoscroll = true;
 46                     m_page = null;
 47                     panpage.visible = false;
 48                 }
 49             }
 50         }
 51 
 52 
 53 
 54         private object m_datasource = null;
 55 
 56         [description("数据源,如果使用翻页控件，请使用翻页控件的datasource"), category("自定义")]
 57         public object datasource
 58         {
 59             get { return m_datasource; }
 60             set
 61             {
 62                 if (value == null)
 63                     return;
 64                 if (!typeof(ilist).isassignablefrom(value.gettype()))
 65                 {
 66                     throw new exception("数据源不是有效的数据类型，列表");
 67                 }
 68                 m_datasource = value;
 69                 reloadsource();
 70             }
 71         }
 72 
 73         int m_intcellcount = 0;//单元格总数
 74         [description("单元格总数"), category("自定义")]
 75         public int cellcount
 76         {
 77             get { return m_intcellcount; }
 78             private set
 79             {
 80                 m_intcellcount = value;
 81                 if (value > 0 && m_page != null)
 82                 {
 83                     m_page.pagesize = m_intcellcount;
 84                     m_page.reload();
 85                 }
 86             }
 87         }
 88 
 89         private list<object> m_selectedsource = new list<object>();
 90 
 91         [description("选中的数据"), category("自定义")]
 92         public list<object> selectedsource
 93         {
 94             get { return m_selectedsource; }
 95             set
 96             {
 97                 m_selectedsource = value;
 98                 reloadsource();
 99             }
100         }
101 
102         private bool m_ismultiple = true;
103 
104         [description("是否多选"), category("自定义")]
105         public bool ismultiple
106         {
107             get { return m_ismultiple; }
108             set { m_ismultiple = value; }
109         }
110 
111         [description("选中项事件"), category("自定义")]
112         public event eventhandler selecteditemevent;
113         public delegate void reloadgridstyleeventhandle(int intcellcount);
114         /// <summary>
115         /// 样式改变事件
116         /// </summary>
117         [description("样式改变事件"), category("自定义")]
118         public event reloadgridstyleeventhandle reloadgridstyleevent;

一下辅助函数

  1 #region 重新加载数据源
  2         /// <summary>
  3         /// 功能描述:重新加载数据源
  4         /// 作　　者:hzh
  5         /// 创建日期:2019-06-27 16:47:32
  6         /// 任务编号:pos
  7         /// </summary>
  8         public void reloadsource()
  9         {
 10             controlhelper.freezecontrol(this, true);
 11             if (this.panmain.controls.count <= 0)
 12             {
 13                 reloadgridstyle();
 14             }
 15             if (m_datasource == null || ((ilist)m_datasource).count <= 0)
 16             {
 17                 for (int i = this.panmain.controls.count - 1; i >= 0; i--)
 18                 {
 19                     this.panmain.controls[i].visible = false;
 20                 }
 21 
 22                 return;
 23             }
 24             int intcount = math.min(((ilist)m_datasource).count, this.panmain.controls.count);
 25 
 26             for (int i = 0; i < intcount; i++)
 27             {
 28                 ((ilistviewitem)this.panmain.controls[i]).datasource = ((ilist)m_datasource)[i];
 29                 if (m_selectedsource.contains(((ilist)m_datasource)[i]))
 30                 {
 31                     ((ilistviewitem)this.panmain.controls[i]).setselected(true);
 32                 }
 33                 else
 34                 {
 35                     ((ilistviewitem)this.panmain.controls[i]).setselected(false);
 36                 }
 37                 this.panmain.controls[i].visible = true;
 38             }
 39 
 40             for (int i = this.panmain.controls.count - 1; i >= intcount; i--)
 41             {
 42                 if (this.panmain.controls[i].visible)
 43                     this.panmain.controls[i].visible = false;
 44             }
 45             controlhelper.freezecontrol(this, false);
 46         }
 47         #endregion
 48 
 49         #region 刷新表格
 50         /// <summary>
 51         /// 功能描述:刷新表格样式
 52         /// 作　　者:hzh
 53         /// 创建日期:2019-06-27 16:35:25
 54         /// 任务编号:pos
 55         /// </summary>
 56         public void reloadgridstyle()
 57         {
 58             form frmmain = this.findform();
 59             if (frmmain != null && !frmmain.isdisposed && frmmain.visible && this.visible)
 60             {
 61                 getcellcount();
 62                 try
 63                 {
 64                     controlhelper.freezecontrol(this, true);
 65                     if (this.panmain.controls.count < m_intcellcount)
 66                     {
 67                         int intcontrolscount = this.panmain.controls.count;
 68                         for (int i = 0; i < m_intcellcount - intcontrolscount; i++)
 69                         {
 70                             control uc = (control)activator.createinstance(m_itemtype);
 71                             uc.margin = new system.windows.forms.padding(5, 5, 5, 5);
 72 
 73                             (uc as ilistviewitem).selecteditemevent += uclistview_selecteditemevent;
 74                             uc.visible = false;
 75                             this.panmain.controls.add(uc);
 76                         }
 77                     }
 78                     else if (this.panmain.controls.count > m_intcellcount)
 79                     {
 80                         int intcontrolscount = this.panmain.controls.count;
 81                         for (int i = intcontrolscount - 1; i > m_intcellcount - 1; i--)
 82                         {
 83                             this.panmain.controls.removeat(i);
 84                         }
 85                     }
 86                     foreach (control item in this.panmain.controls)
 87                     {
 88                         item.size = new size(m_intcellwidth, m_intcellheight);
 89                     }
 90                 }
 91                 finally
 92                 {
 93                     controlhelper.freezecontrol(this, false);
 94                 }
 95                 if (reloadgridstyleevent != null)
 96                 {
 97                     reloadgridstyleevent(m_intcellcount);
 98                 }
 99             }
100 
101         }
102 
103         void uclistview_selecteditemevent(object sender, eventargs e)
104         {
105             var selecteditem = sender as ilistviewitem;
106 
107             if (m_selectedsource.contains(selecteditem.datasource))
108             {
109                 m_selectedsource.remove(selecteditem.datasource);
110                 selecteditem.setselected(false);
111             }
112             else
113             {
114                 if (m_ismultiple)
115                 {
116                     m_selectedsource.add(selecteditem.datasource);
117                     selecteditem.setselected(true);
118                 }
119                 else
120                 {
121                     if (m_selectedsource.count > 0)
122                     {
123                         int intcount = math.min(((ilist)m_datasource).count, this.panmain.controls.count);
124                         for (int i = 0; i < intcount; i++)
125                         {
126                             var item = ((ilistviewitem)this.panmain.controls[i]);
127                             if (m_selectedsource.contains(item.datasource))
128                             {
129                                 item.setselected(false);
130                                 break;
131                             }
132                         }
133                     }
134 
135                     m_selectedsource = new list<object>() { selecteditem.datasource };
136                     selecteditem.setselected(true);
137 
138                 }
139             }
140 
141             if (selecteditemevent != null)
142             {
143                 selecteditemevent(sender, e);
144             }
145         }
146         #endregion
147 
148         #region 获取cell总数
149         /// <summary>
150         /// 功能描述:获取cell总数
151         /// 作　　者:hzh
152         /// 创建日期:2019-06-27 16:28:58
153         /// 任务编号:pos
154         /// </summary>
155         private void getcellcount()
156         {
157             if (this.panmain.width == 0)
158                 return;
159             control item = (control)activator.createinstance(m_itemtype);
160 
161 
162             int intxcount = (this.panmain.width - 10) / (item.width + 10);
163             m_intcellwidth = item.width + ((this.panmain.width - 10) % (item.width + 10)) / intxcount;
164 
165             int intycount = (this.panmain.height - 10) / (item.height + 10);
166             m_intcellheight = item.height + ((this.panmain.height - 10) % (item.height + 10)) / intycount;
167             int intcount = intxcount * intycount;
168 
169             if (page == null)
170             {
171                 if (((ilist)m_datasource).count > intcount)
172                 {
173                     intxcount = (this.panmain.width - 10 - 20) / (item.width + 10);
174                     m_intcellwidth = item.width + ((this.panmain.width - 10 - 20) % (item.width + 10)) / intxcount;
175                 }
176                 intcount = math.max(intcount, ((ilist)m_datasource).count);
177             }
178 
179             cellcount = intcount;
180         }
181         #endregion

一些事件

    private void panmain_resize(object sender, eventargs e)
        {
            reloadgridstyle();
        }
void m_page_showsourcechanged(object currentsource)
        {
            this.datasource = currentsource;
        }

 

你会发现，有个itemtype属性，这个用来定义列表呈现那种子元素，这么用的好处就是，当你觉得我写的这个元素控件uclistviewitem并不能满足你需求的时候，你可以添加一个自定义控件，并实现接口ilistviewitem，然后将你自定义的控件指定给这个属性，列表就会呈现出来了，是不是很方便，列表会自动根据你的元素控件的大小来适量调整来填充到列表中的。

 

还有一个page属性，这个是用来表示用哪个分页控件，当然你也可以不用，我已经提供了2种分页控件，如果你觉得还是不满足你的话，去参考分页控件那个文章，自己添加一个分页控件吧。

最后的话

如果你喜欢的话，请到  点个星星吧