duilib中ListCtrl控件的实现

转载请说明出处，谢谢~~

昨天在编程群里聊天，提到了ListCtrl，然后有网友找我，他需要做一个ListCtrl控件，我看过需求后接下了这个活。今天就把大致的思路和过程记录一下。首先看《任务书》：

 -----------------------------------------------------------任务书开始-------------------------------------------------------------------

任务书：

1.效果图

1.这是一个ListItem，内容可以自定义，可以由Button,Label等等组成。每一个Item都是独立的，可以产生事件，

2.New,在List尾部增加一个Item,

3.Edit:显示当前Item的Index

4.Copy是复制一个当前的Item放置在尾部

5.Delete删除一个Item.如果下方有Item,则自动替换当前Item.

6.在某个Item上双击，显示当前Item,Idex.

7.在某个Item上单击，使该Item处理焦点状态。例如





   -----------------------------------------------------------任务书结束-------------------------------------------------------------------



    一、任务分析:

    看一下这个效果图，这是类似于windows的资源管理的控件，如下图，控件的要求是可以动态的增加，删除，编辑和赋值其中的每一个子项目，而每一个子项目都是独立的，其中的内容可以自定义。

从外观上分析这个控件，形式上类似于TileLayout布局，所以我打算继承 TileLayout布局；然后从功能上，它类似于List控件，因为它拥有选中元素这种效果，而单单的TileLayout布局没有，所以还需要继承IListOwnerUI接口并且完成他的功能。做这个控件的最关键核心支持就是继承IListOwnerUI接口！

封装为了一个ListCtrl控件，其中的子项目用CListContainerElementUI独立封装为一个单独的小控件，命名为ListCtrlItemElement。

CtrlList控件的功能: 

    继承 TileLayout布局布局后，我要为这个ListCtrl控件封装好几个接口

   1.用于增加 ListCtrlItemElement元素的Add,Addat接口，用于在尾部增加或者在指定位置增加一个 ListCtrlItemElement元素。

   2.用于删除ListCtrlItemElement元素的Remove,RemoveAll接口，用于在在指定位置删除或者全部删除 ListCtrlItemElement元素。

   3. 用于复制ListCtrlItemElement元素的Copy接口。

   4.用于编辑 ListCtrlItemElement元素的Edit接口。

   5.加入滚动条功能，并且为滚动条增加渐变滚动效果。当元素过多后，就应该为控件增加滚动条，而且为了增加动感，要为滚动条增加渐变滚动（开始滚动得慢，然后逐渐变快，最后变慢停止），这个滚动速度应该设计一个数学公式来计算。

CListCtrlItemElement控件的功能：

    ListCtrlItemElement从功能上应该从CListContainerElementUI来继承，从效果图上看，应该包含3-4个子控件

    1.显示一个图片。

    2.显示图片的名字。

    3.显示图片的简介。

二、实现过程 

      首先，我先仿照效果图的样子做一个大致的窗体的外观，ListCtrl ，控件的部分先用一个白色背景图覆盖掉，大致实现图如下:



      接下来开始封装ListCtrl控件和 ListCtrlItemElement控件，继续更新中·····



     在ListCtrl控件和 ListCtrlItemElement控件中通过一个SetOwner接口，模仿List控件的代码，让他们之间可以交流信息，然后对ListCtrlItemElement控件的DoEvent事件处理代码和DoPaint绘图代码的重写，实现了选中效果，目前的大概效果如下。剩下的工作是对控件效果和控件位置信息的微调。

对代码进行微调后，我对右边的新建，删除，赋值，编辑4个按钮的代码也编写完成，控件可以动态增加、删除、赋值、修改。现在整个控件已经开发完成，附上效果图和原要求图。

     写了好几个小时，休息一下~~

2014.7.16   13:26  Redrain