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,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",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" >
           </Button> 
        </HorizontalLayout> 
    </VerticalLayout>
</Window>

在界面布局文件中，我们同样定义一个名称为CloseBtn按钮。需要注意的一点是Duilib的界面布局xml文件必须是utf-8编码，大家尽量不要使用Windows自带的记事本编辑，可以使用UltraEdit和EditPlus將文件另存为utf-8编码格式。

编译运行同样可以看到窗口中有一个按钮：

博文源码：https://github.com/rongbo-j/duilib-tutorial （参考tutorial3工程）