Duilib支援xml介面佈局，使得介面設計與邏輯處理相分離，本節介紹如何從xml檔案中載入介面元素。
我們需要以下幾個步驟：

1. 建立並初始化CPaintManagerUI物件。
2. 建立CDialogBuilder物件，呼叫CDialogBuilder物件的Create函式載入xml檔案，該函式返回介面元素根節點。
3. 呼叫CPaintManagerUI的AttachDialog將介面元素根節點附加到CPaintManagerUI物件中。
4. 編寫xml介面佈局檔案。

案例程式碼如下：

//程式碼清單tutorial3.cpp
#include <Windows.h>
#include
 
 "../DuiLib/StdAfx.h" 
using namespace DuiLib;
class CMyWnd : public CWindowWnd,public INotifyUI
{
public:
    CMyWnd(){}
    LPCTSTR GetWindowClassName() const
    {
        return L"MyWnd";
    }
    UINT GetClassStyle() const{
        return UI_CLASSSTYLE_FRAME|CS_DBLCLKS;
    }
    void Notify(TNotifyUI&
 
 msg)
    {
        if(msg.sType == L"click")
        {
            if(msg.pSender->GetName() == L"CloseBtn")
            {
                if(IDOK == ::MessageBox(m_hWnd,L"退出程式？",L"提示資訊",MB_OKCANCEL))
                {
                    ::PostQuitMessage(0);
                }
            }
        }
    }
    LRESULT HandleMessage(UINT uMsg, WPARAM wParam, LPARAM lParam)
    {
        switch(uMsg)
        {
        case
 
 WM_KEYDOWN:
            {
                int nVirtKey = (int) wParam;
                if(VK_ESCAPE == nVirtKey)
                {
                    ::PostQuitMessage(0);
                }
            } 
            break;
        case WM_CREATE:
            {
                m_PaintMgr.Init(m_hWnd); 
                //從xml中載入介面
                CDialogBuilder builder;
                m_pRoot = builder.Create(L"tutorial3.xml",(UINT)0,NULL,&m_PaintMgr);

                m_PaintMgr.AttachDialog(m_pRoot); 
                m_PaintMgr.AddNotifier(this);
            }
            break;  
        case WM_DESTROY:
            ::PostQuitMessage(0);
            break;
        } 
        LRESULT lRes=0;
        if(m_PaintMgr.MessageHandler(uMsg,wParam,lParam,lRes)) return lRes;
        return CWindowWnd::HandleMessage(uMsg,wParam,lParam);
    }

    ~CMyWnd(){
        delete m_pRoot;
    }
private:
    CPaintManagerUI m_PaintMgr; 
    CControlUI* m_pRoot;
};
INT WinMain(HINSTANCE hInst,HINSTANCE hPreInst,LPSTR lpCmdLine,INT Show)
{
    CPaintManagerUI::SetInstance(hInst);
    CPaintManagerUI::SetResourcePath(CPaintManagerUI::GetResourcePath());
    //建立主視窗
    CMyWnd* pFrame = new CMyWnd();
    pFrame->Create(NULL,L"Tutorial3",UI_WNDSTYLE_FRAME,WS_EX_WINDOWEDGE);
    pFrame->CenterWindow();
    pFrame->ShowWindow(true); 
    CPaintManagerUI::MessageLoop(); 
    delete pFrame;
    return 0;
}

和上節相比我們在視窗訊息WM_CREATE中建立了CDialogBuilder物件builder，呼叫Create方法載入介面佈局檔案tutorial3.xml。

 CDialogBuilder builder;
 m_pRoot = builder.Create(L"tutorial3.xml",(UINT)0,NULL,&m_PaintMgr);
 m_PaintMgr.AttachDialog(m_pRoot); 

接下來的工作就是編寫介面佈局檔案tutorial3.xml，內容如下：

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<Window   sizebox="4,4,6,6" size="800,600" >
    <VerticalLayout name="MainLayout"   >  
        <HorizontalLayout name="Content" bkcolor="#FFFF0000"> 
           <Button float="true" name="CloseBtn" text="關閉按鈕" bkcolor="#FF0000FF" width="150" height="50" pos="200,300,0,0"  >
           </Button> 
        </HorizontalLayout> 
    </VerticalLayout>
</Window>

在介面佈局檔案中，我們同樣定義一個名稱為CloseBtn按鈕。需要注意的一點是Duilib的介面佈局xml檔案必須是utf-8編碼，大家儘量不要使用Windows自帶的記事本編輯，可以使用UltraEdit和EditPlus將檔案另存為utf-8編碼格式。

編譯運行同樣可以看到視窗中有一個按鈕：