在前面已经对duilib有个一个基本的了解，并且创建了简单的空白窗体。这仅仅只是一个开始，如何去创建一个绚丽多彩的界面呢？这就需要一些控件元素（按钮、文本框、列表框等等）来完善。
一. Duilib控件简介
在之前空白窗体的基础上，在界面上添加了一些控件，让大家先对这些控件效果有个基本的认识。如下图所示：
基本控件
高级控件
一些控件的基本显示效果就如同上面两幅图所示。实际上，在Duilib学习笔记《01》—duilib整体框架认识中我们就已经提到过Duilib这个库的组成，其中就提到了控件这部分，如下图所示：
对应到工程代码中，实际上是分为了两部分——Core 和 Control。
Core中包含的是所有控件公用的部分，里面主要是一些基类和绘制的封装。
Control中包含的就是各个不同的控件的行为。
二. Duilib控件使用
下面就挑选部分控件的使用具体说明一下：
1）Button控件
按钮控件大家应该都不陌生了，在之前的空白窗体例子中左上角的系统操作按钮就用的按钮控件。
<Button name="closeBtn" maxwidth="45" maxheight="17" normalimage="file='sys_dlg_close.png' source='90,0,135,17'" hotimage="file='sys_dlg_close.png' source='45,0,90,17'" pushedimage="file='sys_dlg_close.png' source='0,0,45,17'"/>
在XML布局中以<Button 属性名=”属性值” />的形式书写。
如上面的closeBtn的例子。其中：name表示控件名称，同一窗口内必须唯一；maxwidth、maxheight表示分别控件的最大宽度、最大高度；normalimage、hotimage、pushedimage分别表示按钮的三状态（正常状态、鼠标移动上去的状态、鼠标按下的状态）。
当然，除了例子中的这些属性外，每个控件对应的都还有很多属性，具体可以查阅属性列表，根据实际需要使用。
2）Edit控件
<Edit name="button1" tooltip="普通控件" text="普通控件" bkimage="res='button_pushed.png' corner='6,6,6,6'" />
Edit控件对应的有各种属性（只读、数字、密码。。。），而对应的仅仅只需要在XML中普通控件的布局属性中设分别设置readonly、numberonly、password即可。
3）Combo控件
<Combo name="font_type" droptype="droplist" width="100" height="22" textpadding="4,1,1,1" normalimage="file='combo.png' source='0,0,100,22' corner='2,2,20,2'" hotimage="file='combo.png' source='0,22,100,44' corner='2,2,22,2'" pushedimage="file='combo.png' source='0,44,100,66' corner='2,2,22,2'"> <ListLabelElement text="微软雅黑" selected="true" height="23" /> <ListLabelElement text="宋体" height="23" /> <ListLabelElement text="黑体" height="23" /> <ListLabelElement text="幼圆" height="23" /> <ListLabelElement text="楷体" height="23" /> </Combo>
XML布局中外侧是<Combo></Combo>，内层通过<ListLabelElement />添加具体选择。
4）List控件
<List name="listview" vscrollbar="true" hscrollbar="true" headerbkimage="file='list_header_bg.png'" itemtextstyle="center"> <ListHeader height="24" menu="true"> <ListHeaderItem text="姓名" width="100" hotimage="file='list_header_hot.png'" pushedimage="file='list_header_pushed.png'" sepimage="file='list_header_sep.png'" sepwidth="1" /> <ListHeaderItem text="学号" width="200" hotimage="file='list_header_hot.png'" pushedimage="file='list_header_pushed.png'" sepimage="file='list_header_sep.png'" sepwidth="1" /> <ListHeaderItem text="成绩" width="200" hotimage="file='list_header_hot.png'" pushedimage="file='list_header_pushed.png'" sepimage="file='list_header_sep.png'" sepwidth="1" /> </ListHeader> </List>
在实际中，我们可能需要向控件中添加数据，而对于List中如何添加数据呢？如下所示：
// List控件中添加数据 // 注意：添加List列表内容，必须先Add(pListElement)添加元素，再SetText进行元素值的设置 for (int i = 0; i < 10; i++) { CListTextElementUI* pListElement = new CListTextElementUI; pListElement->SetTag(i); m_pList->Add(pListElement); pListElement->SetText(0, _T("WHO1753")); pListElement->SetText(1, _T("程序设计")); pListElement->SetText(2, _T("100")); }
三. 总结
除了上述这些列举的这些控件例子外，还有其它很多控件没能一一列举。但记住一点，一些复杂的东西都是由一些简单的东西所组成的。对于控件这部分的介绍，总结起来其实主要就是一下几点：
1）布局
控件在XML中布局基本都是<控件 属性名=”属性值” />的形式书写。
2）属性设置
在前面，控件的属性我们基本都是在XML布局文件找那个就添加设置了。这当然是一个方法。但除此之外，还可以通过控件对应提供的方法来设置。如Edit控件，我们可以直接在XML布局中可以设置只读、数字、密码等属性。同样，我们也可以在Edit所提供的方法中发现提供了SetReadonly、SetNumberOnly、SetPasswordMord等方法。具体使用中根据时间情况的需要在XML中设置或者通过控件方法设置。
3）根据name获取控件
对于很多控件，最终可能不仅仅只是一个单纯的显示。很多时候还要和数据打交道。所以在具体处理时需要根据XMl文件中控件的属性name获取指定的控件进行相关操作。在代码中控件（以Button为例，其它控件获取方法类似）获取方式如下：
CButtonUI* m_pCloseBtn; m_pCloseBtn = static_cast<CButtonUI*>(m_PaintManager.FindControl(_T("closeBtn")));
4）控件使用
不同的控件具体情况下，操作也不一样。如Edit控件可用于输入文本，数字等等。List控件可以显示不同列、不同行的数据。也就是说具体每个控件的方法不一样，对应的每个控件的方法，Duilib的Control中包含的就是各个不同的控件的行为方法了，使用时如果对于某些方法不熟悉，可以直接查看。
最后附上本节对应的代码：代码下载