在前面已經對duilib有個一個基本的瞭解，並且建立了簡單的空白窗體。這僅僅只是一個開始，如何去建立一個絢麗多彩的介面呢？這就需要一些控制元件元素（按鈕、文字框、列表框等等）來完善。

一. Duilib控制元件簡介

在之前空白窗體的基礎上，在介面上添加了一些控制元件，讓大家先對這些控制元件效果有個基本的認識。如下圖所示： 基本控制元件
高階控制元件
一些控制元件的基本顯示效果就如同上面兩幅圖所示。實際上，在Duilib學習筆記《01》—框架初識中我們就已經提到過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中包含的就是各個不同的控制元件的行為方法了，使用時如果對於某些方法不熟悉，可以直接檢視。 PS: 歡迎關注微信公眾號：開發者小黑屋，分享優質技術乾貨。