前面的教程應該讓大家對duilib的整體有所映像了，下面就來介紹下duilib具體控件的使用。
由於官方沒有提供默認的控件樣式，所以我就盡量使用win7或者XP自帶的按鈕樣式了，雖然界面比較土鱉，但是想要換成百度殺毒那樣的界面，只需要更換圖片即可，如果有哪位小伙伴能夠提供一些控件樣式，那就再好不過啦~
首先利用一下前面教程的框架，效果圖如下：
main.cpp的代碼如下：
class CDuiFrameWnd : public WindowImplBase { public: virtual LPCTSTR GetWindowClassName() const { return _T("DUIMainFrame"); } virtual CDuiString GetSkinFile() { return _T("duilib.xml"); } virtual CDuiString GetSkinFolder() { return _T(""); } }; int APIENTRY _tWinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPTSTR lpCmdLine, int nCmdShow) { CPaintManagerUI::SetInstance(hInstance); CDuiFrameWnd duiFrame; duiFrame.Create(NULL, _T("DUIWnd"), UI_WNDSTYLE_FRAME, WS_EX_WINDOWEDGE); duiFrame.CenterWindow(); duiFrame.ShowModal(); return 0; }
XML代碼如下（由於前面的教程里都一一介紹了各種屬性，所以以后的XML就不一一注釋了）：
<?xml version="1.0" encoding="UTF-8"?> <Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4"> <VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0"> <!-- 標題欄區 --> <HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0"> <VerticalLayout /> <VerticalLayout width="77"> <Button name="minbtn" tooltip="最小化" float="true" pos="0,5,22,24" width="23" normalimage=" file='SysBtn\MinNormal.bmp' " hotimage=" file='SysBtn\MinFocus.bmp' " pushedimage=" file='SysBtn\MinFocus.bmp' "/> <Button name="maxbtn" tooltip="最大化" float="true" pos="22,5,44,24" width="23" normalimage=" file='SysBtn\MaxNormal.bmp' " hotimage=" file='SysBtn\MaxFocus.bmp' " pushedimage=" file='SysBtn\MaxFocus.bmp' " /> <Button name="restorebtn" visible="false" tooltip="還原" float="true" pos="22,5,44,24" width="23" normalimage=" file='SysBtn\StoreNormal.bmp' " hotimage=" file='SysBtn\StoreFocus.bmp' " pushedimage=" file='SysBtn\StoreFocus.bmp' " /> <Button name="closebtn" tooltip="關閉" float="true" pos="44,5,74,24" width="28" normalimage=" file='SysBtn\CloseNormal.bmp' " hotimage=" file='SysBtn\CloseFocus.bmp' " pushedimage=" file='SysBtn\CloseFocus.bmp' "/> </VerticalLayout> </HorizontalLayout> </VerticalLayout> </Window>
前面教程的Hello World就是一個大大的按鈕，大家對按鈕應該很熟悉了，下面我們來幾個按鈕樣式吧：
XP默認按鈕
win7默認按鈕
百度殺毒
百度衛士
上述圖片資源請
點擊這里下載，下載后解壓到exe目錄即可，此時Debug文件夾如下（別忘了前面教程的SysBtn文件夾哦）：
我們先用DuiDesigner添加一些按鈕，並且把他們排整齊，如圖：
保存之后就可以看到這幾個按鈕的pos等屬性了，再手動將這幾個Button節點加到前面的XML中，並添加圖片屬性，如下：
<?xml version="1.0" encoding="UTF-8"?> <Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4"> <VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0"> <!-- 標題欄區 --> <HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0"> <VerticalLayout /> <VerticalLayout width="77"> <Button name="minbtn" tooltip="最小化" float="true" pos="0,5,22,24" width="23" normalimage=" file='SysBtn\MinNormal.bmp' " hotimage=" file='SysBtn\MinFocus.bmp' " pushedimage=" file='SysBtn\MinFocus.bmp' "/> <Button name="maxbtn" tooltip="最大化" float="true" pos="22,5,44,24" width="23" normalimage=" file='SysBtn\MaxNormal.bmp' " hotimage=" file='SysBtn\MaxFocus.bmp' " pushedimage=" file='SysBtn\MaxFocus.bmp' " /> <Button name="restorebtn" visible="false" tooltip="還原" float="true" pos="22,5,44,24" width="23" normalimage=" file='SysBtn\StoreNormal.bmp' " hotimage=" file='SysBtn\StoreFocus.bmp' " pushedimage=" file='SysBtn\StoreFocus.bmp' " /> <Button name="closebtn" tooltip="關閉" float="true" pos="44,5,74,24" width="28" normalimage=" file='SysBtn\CloseNormal.bmp' " hotimage=" file='SysBtn\CloseFocus.bmp' " pushedimage=" file='SysBtn\CloseFocus.bmp' "/> </VerticalLayout> </HorizontalLayout> <!-- 客戶區 --> <HorizontalLayout> <Button text="XP" float="true" pos="20,14,0,0" width="60" height="25" normalimage=" file='BtnStyle\XP\button_nor.png' " hotimage=" file='BtnStyle\XP\button_over.png' " pushedimage=" file='BtnStyle\XP\button_down.png' " focusedimage=" file='BtnStyle\XP\button_focus.png' " /> <Button text="win7" float="true" pos="20,50,0,0" width="60" height="25" normalimage=" file='BtnStyle\win7\button_nor.png' " hotimage=" file='BtnStyle\win7\button_over.png' " pushedimage=" file='BtnStyle\win7\button_down.png' " focusedimage=" file='BtnStyle\win7\button_focus.png' " /> <Button text="百度殺毒" float="true" pos="20,86,0,0" width="102" height="35" normalimage=" file='BtnStyle\BDKV\button_nor.png' " hotimage=" file='BtnStyle\BDKV\button_over.png' " pushedimage=" file='BtnStyle\BDKV\button_down.png' " /> <Button float="true" pos="20,132,0,0" width="171" height="46" normalimage=" file='BtnStyle\BDKV2\button_nor.png' " hotimage=" file='BtnStyle\BDKV2\button_over.png' " pushedimage=" file='BtnStyle\BDKV2\button_down.png' " /> </HorizontalLayout> </VerticalLayout> </Window>
效果如下：
用鼠標移上去，或者點擊一下，看看是不是和系統按鈕一樣呢^_^
下面我們介紹一下duilib的另一種特性，那就是可以定制默認樣式，這樣做有什么好處呢？
假如我們有10個按鈕，按鈕樣式都一樣，如果用之前介紹的方式，則需要在每個Button節點都指定圖片背景、寬度、高度等信息，一旦需要改動任何一個屬性，則需要在10個按鈕里面都改一次，所以為了方便修改，我們可以指定一個默認樣式，就算有100個按鈕，我們也只需要改一次屬性。方法如下：
給<Window>節點添加一個Default節點即可，其中name屬性填寫控件的名字，value屬性添加控件的屬性的值，不過需要將雙引號【"】換成【"】，單引號【'】換成【'】,單引號也可以不轉換。
XML如下（由於標題欄基本不再變化，所以
后面的教程將省略<!-- 標題欄區 -->那一段XML）：
<Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4"> <Default name="Button" value=" height="25" width="60" normalimage="file='BtnStyle\XP\button_nor.png'" hotimage="file='BtnStyle\XP\button_over.png'" pushedimage="file='BtnStyle\XP\button_down.png'" focusedimage="file='BtnStyle\XP\button_focus.png'" " /> <VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0"> <!-- 客戶區 --> <HorizontalLayout> <Button text="XP" float="true" pos="20,14,0,0" height="25" /> <Button text="win7" float="true" pos="20,50,0,0" height="25" /> <Button text="百度殺毒" float="true" pos="20,86,0,0" height="25" /> <Button float="true" pos="20,132,0,0" height="25" /> </HorizontalLayout> </VerticalLayout> </Window>
XML是不是清爽多了呢^_^ 注意，這里面要指定height屬性，不然會看不到按鈕，估計是因為放在了HorizontalLayout水平布局里。（如果是VerticalLayout ，應該是指定width屬性，這個只是猜測，暫未驗證~\(^o^)/~）
不過你會發現，啟動的時候，最小化按鈕圖片不對了，那是因為最小化按鈕沒有指定focusedimage屬性，所以就用了默認的focusedimage屬性，只需要指定一下就行了。
按鈕的用法就介紹完啦，大家可以看到UI設計器里面還有下面這些控件，
其中：
Control是所有控件的基類，一般放圖片啥的就用它了。
Label和Text是用於放文字的，其中Label的對齊功能比Text要好一些，所以我一般用Label，這個對應於MFC的Static控件。
Edit顯然就是編輯框啦，Button就不用多說了吧~
上面提到的控件都是簡單控件，拖到設計器上就能直觀的看到效果，絕大部分屬性都和Button一樣，就不贅述了，所有控件的所有屬性都在【
duilib控件 XML屬性列表】里有詳細說明(不過有一點點遺漏，需要去看源碼)，下一節將介紹復雜控件。