爲了使用xml進行界面佈局，需要把前面的Duilib程序框架中的HandleMessage稍微改動一下：
LRESULT HandleMessage(UINT uMsg, WPARAM wParam, LPARAM lParam)
{
if( uMsg == WM_CREATE ) {
m_pm.Init(m_hWnd);
CDialogBuilder builder;
CControlUI* pRoot = builder.Create(_T("test1.xml"), (UINT)0, NULL, &m_pm);
ASSERT(pRoot && "Failed to parse XML");
m_pm.AttachDialog(pRoot);
m_pm.AddNotifier(this);
return 0;
}
else if( uMsg == WM_DESTROY ) {
::PostQuitMessage(0);
}
else if( uMsg == WM_NCACTIVATE ) {
if( !::IsIconic(m_hWnd) ) {
return (wParam == 0) ? TRUE : FALSE;
}
}
else if( uMsg == WM_NCCALCSIZE ) {
return 0;
}
else if( uMsg == WM_NCPAINT ) {
return 0;
}
LRESULT lRes = 0;
if( m_pm.MessageHandler(uMsg, wParam, lParam, lRes) ) return lRes;
return CWindowWnd::HandleMessage(uMsg, wParam, lParam);
}
灰色部分表示改動的部分。
然後我們來編寫一個簡單的xml：
<?xml version="1.0" encoding="UTF-8"?>
<Window mininfo="200,360" size=" 480,320 ">
<Font name="幼圓" size="16" default="true" />
<VerticalLayout bkcolor="#FFFF00FF">
<Button name="changeskinbtn" height="20" text="測試按鈕" maxwidth="120" />
<RichEdit name="testrichedit" bordercolor="#FF0000" bordersize="0" borderround="18,18" inset="4,2,4,2" bkcolor="#A0F2F5FA" bkcolor2="#A0FF0000" bkcolor3="#A0F2F5FA" font="1" multiline="true" vscrollbar="true" autovscroll="true" enabled="true" rich="true" readonly="false" text="測試richedit">
</RichEdit>
<Edit name="testedit" text="測試編輯框" />
</VerticalLayout>
</Window>
把以上xml保存爲test1.xml，主要保存格式爲utf-8（不要使用windows自帶的記事本保存，可以使用ultraedit、editplus之類具備xml編輯能力的編輯器保存）。然後運行程序，可以看到如下效果：
好像還不是太難看，不過按鈕好像看起來不大像按鈕，那就給貼個圖把，將一下這行加入到Window標籤下：
<Default name="Button" value="normalimage="file='button_nor.bmp' corner='4,2,4,2' fade='200' hsl='true'" hotimage="file='button_over.bmp' corner='4,2,4,2' fade='200' hsl='true'" pushedimage="file='button_down.bmp' corner='4,2,4,2' fade='200' hsl='true' " " />
然後將button_nor.bmp、button_over.bmp、button_down.bmp（可在Duilib發行包中找到）放到exe目錄下，運行程序，可以看到：
可以看到按鈕的顯示已經改變了，我們繼續將Richedit換個背景，將Richedit的背景色改成bkcolor="#FFF2F5FA" bkcolor2="#FFA0A000" bkcolor3="#FFF2F5FA"，我們得到下面的結果：
繼續修改這個xml，我們通過設置xml中控件的屬性，可以很簡單的實現自由調整界面。