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编码格式。

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

博文源码：https://github.com/rongbo-j/duilib-tutorial

（参考tutorial3工程）