duilib 进阶教程
此教程是从Alberl的博客截取，送给各位没网的情况下也能看。感谢Alberl的分享。
在MFC中使用duilib (1)
由于入门教程的反响还不错，因此Alberl就以直播的形式来写《进阶教程》啦，本教程的前提：
1、请先阅读《仿迅雷播放器教程》
2、要有一定的duilib基础，如果还没，请先阅读《2013 duilib入门简明教程》。
3、下载基于VLC的MFC播放器（包含VLC等所有文件），csdn不允许上传相似的代码，因此后面的教程将不再上传VLC的dll、头文件等没有改变的文件。
《仿迅雷播放器教程-- 基于VLC的MFC播放器(6)》中界面是用MFC做的，因此我们要将它换成duilib。而在《2013 duilib入门简明教程-- 结合win32和MFC (16)》中只讲了怎么在duilib中显示MFC窗口，以及在MFC中显示duilib窗口，但是没有讲消息的响应，因此有些基础薄弱的小伙伴还是不懂，这里借着这个机会讲解一下消息的响应，下面进入正题。
之前的MFC界面如下：
现在我们将左边的三个按钮换成迅雷的，如下：
其中左边那块是纯duilib的界面，右边那块是在duilib的窗口里放了一个win32控件，这六个按钮都是有消息响应的，因此本教程实现了以下功能：
1、在MFC窗口显示了duilib窗口，并响应了duilib的控件。
2、在duilib的窗口显示了win32的控件，并响应了win32的控件。
所以与MFC结合的知识已经全面覆盖了（与win32结合也是类似的），到此，就不用担心老项目使用duilib带来问题了。
界面显示已经在《2013 duilib入门简明教程-- 结合win32和MFC (16)》讲过了，那么这里只讲消息响应。
一、纯duilib控件的响应：
只需在Notify函数做响应就行了，其中m_pDlgMain是MFC主窗口的指针。
void CDuiFrameWnd::Notify( TNotifyUI& msg )
{
if (m_pDlgMain)
{
if( msg.sType == _T("click") )
{
if( msg.pSender->GetName() == _T("btnPrevious") )
{
m_pDlgMain->OnBnClickedButtonPlayPrevious();
}
else if( msg.pSender->GetName() == _T("btnNext") )
{
m_pDlgMain->OnBnClickedButtonPlayNext();
}
else if( msg.pSender->GetName() == _T("btnPlay") )
{
m_pDlgMain->OnBnClickedButtonPlay();
}
}
}
__super::Notify(msg);
}
可见原有的MFC代码基本无需改动，是不是很简单呢~O(∩_∩)O~
二、duilib中MFC控件的响应
由于duilib不够成熟，很多东西都要自己去处理，而如果水平不够的话，就很可能做不出来，已经有很多网友因为有些控件很难实现而放弃了。因此这种情况下，如果某个控件很难实现，我们用MFC的控件代替就是非常适合的，并且很多控件即使duilib能做出来，也还是取代不了MFC控件，比如虚拟表格等等，这些MFC控件已经很成熟了，并且界面也不难看，可自行定制，而如果用duilib去做虚拟表格的话，工作量肯定是很大的，因此这种情况下，也建议用MFC控件。那么在duilib中显示的MFC控件怎么响应呢？
其实也很简单，回到win32就行了，我们只需截获WM_COMMAND，而duilib的
WM_COMMAND等windows消息可以在HandleMessage函数里截获，代码如下：
LRESULT CDuiFrameWnd::HandleMessage( UINT uMsg, WPARAM wParam, LPARAM lParam )
{
switch (uMsg)
{
case WM_COMMAND:
if (IDC_BUTTON_DUI_NEXT == wParam)
{
if (m_pDlgMain)
{
m_pDlgMain->OnBnClickedButtonPlayNext();
}
}
break;
default:
break;
}
return __super::HandleMessage(uMsg, wParam, lParam);
}
也是非常简单！
现在已经可以去试试效果啦，左边那三个按钮和右边那三个按钮的效果完全一样！
从这个例子可以看出，无论是在duilib里使用MFC，还是在MFC中使用duilib，都不需要改动原有项目，和MFC结合是不是很有用呢~O(∩_∩)O~
代码下载：https://www.360docs.net/doc/b611220238.html,/detail/qq316293804/6426325
在duilib中使用MFC (2)
好人做到底，送佛送到西。虽然上一篇教程已经说得很详细了，但Alberl还是再举一个例子。上一篇教程的主窗口是MFC的，所以这篇教程把主窗口换成duilib的~O(∩_∩)O~
1、我们利用《2013 duilib入门简明教程-- 完整的自绘标题栏(8)》里的XML做为主窗口，并且把客户区的控件都去掉，换成一个自定义控件
2、在CDuiFrameWnd::CreateControl()函数里，加入自定义控件Dialog的创建：
if (_tcsicmp(pstrClassName, _T("Dialog")) == 0)
{
CWndUI *pUI = new CWndUI;
CXMPDlg *pDlg = new CXMPDlg; // 这里只是示例，请自行释放内存~
pDlg->Create(IDD_XMP_DIALOG);
pUI->Attach(pDlg->GetSafeHwnd());
return pUI;
}
3、在CXMPApp::InitInstance()函数里，将
CXMPDlg dlg;
m_pMainWnd = &dlg;
INT_PTR nResponse = dlg.DoModal();
换成
CDuiFrameWnd *pFrame = new CDuiFrameWnd(_T("XMP_MAIN.xml"));
pFrame->Create(NULL, _T("DUIWnd"), UI_WNDSTYLE_FRAME,
WS_EX_WINDOWEDGE);
pFrame->CenterWindow();
m_pMainWnd = CWnd::FromHandle(*pFrame);
INT_PTR nResponse = pFrame->ShowModal();
4、将MFC对话框的风格改为子窗口模式，如下：
然后运行，即可看到以下效果：
同样，里面的控件都是可以响应的哦，那么到现在为止，MFC和duilib结合的所有方式都讲完了，那些为老项目界面犯愁的小伙伴们，赶紧动手试试吧~O(∩_∩)O~
代码下载：https://www.360docs.net/doc/b611220238.html,/detail/qq316293804/6428255 Container控件(3)
前面两个教程的目的是教大家与MFC结合，那么从这篇起，将不再使用MFC，而使用纯win32项目，本文的所有知识已经在《duilib入门教程》里面讲过了，因此基础知识不再赘述。
代码下载：https://www.360docs.net/doc/b611220238.html,/detail/qq316293804/6433161
效果如下（可拖拽边缘调节窗口大小，图片会自动居中）
此例子唯一需要说明的就是XML，代码如下：
mininfo="600,400"> bkimage="skin\bk_logo_light.png"> bkimage="skin\bk_logo_image.png"> bkimage="skin\bk_logo_text.png"/>
可以看到到处都是HorizontalLayout 、VerticalLayout，然后几个bkimage也很乱，这里有几个原因：
1、由于迅雷的中间那一块是由三个图片组成，所以布局很麻烦，其实用一张图片的话，就简洁很多了，这里估计是为了重用图片。
2、方式不太对。
如果中间只有一个图片的话，按照上面的XML布局就很简洁了，但由于有三个图片，这三个图片都需要自适应窗口大小，所以才造成上面的XML代码那么乱，那么有没有优化的地方呢？
当然有，在《入门教程》里我们还有一个控件没有介绍，那就是Container，顾名思义就是容器控件，容器控件有什么用呢？它的用处就是可以使子窗口的行为随着Container一致变化。比如我们的窗口有10个按钮，如果没放在Container里的话，那么想要隐藏所有控件，就必须调用10次隐藏函数，如果想将所有控件往左移的话，也需要操作10次，同样，上面因为有3个图片，所以为了让他们都适应窗口大小，我们做了3次布局。而如果这些控件都在Container里的话，那就方便多了，就算有100个按钮，如果要隐藏的话，我们只需要调用1次隐藏函数，即隐藏Container控件即可，这样它的子控件都会隐藏。同样，如果把上面3个图片都放到Container里去，我们的XML代码就简明多啦，优化后的代码如下：
mininfo="600,400">
可以看到bkimage都在一起了，HorizontalLayout、VerticalLayout 也不那么乱了，Container控件暂时就讲到这里啦。
XML嵌套及自定义控件(4)
代码下载：https://www.360docs.net/doc/b611220238.html,/detail/qq316293804/6433937
之前入门教程里已经讲过了自定义控件，这里借着迅雷播放器再次举个例子。
1、我们先给迅雷播放器加入下面那一排按钮。
和上个教程一样，我们可以选择直接放在主XML里面，也可以选择放到Container里面，在这里，为了让主XML的代码更简洁一点，我们选择放到单独的XML里面。而这个单独的XML 就相当于一个自定义控件了，将控件名取为WndPlayPanel，XML取名为
【WndPlayPanel.xml】，然后在CDuiFrameWnd::CreateControl里加入如下代码：
CControlUI* CDuiFrameWnd::CreateControl( LPCTSTR pstrClassName )
{
if (_tcsicmp(pstrClassName, _T("WndPlayPanel")) == 0)
{
CDialogBuilder builder;
CControlUI* pUI = builder.Create(_T("WndPlayPanel.xml"));
return pUI;
}
return NULL;
}
这样自定义控件就创建出来了，接着把主XML的
2、同样的道理，我们将标题栏也放到单独的XML里，取名为Caption，XML取名为【Caption.xml】，在CDuiFrameWnd::CreateControl里加入类似代码，即可显示标题栏区域。
XML的嵌套是不是很简单呢，和入门教程里的一样哦，只不过入门教程里的自定义控件是一个win32按钮，而这里是一个XML。
仿迅雷播放器图片
迅雷播放器原图
对比一下正宗的迅雷播放器，可以发现咱们的仿制品还有很多粗糙的地方，比如【打开文件】按钮就完全见不得人啦，还有右上角的那三个按钮，再就是左上方的【播放】按钮、以及中间的那一块蓝色光影，都和正宗的有所差别。这些将留到后面的教程讲解~O(∩_∩)O~
图片和文字的位置调整(5)
已经有8个晚上没写教程啦，因为之后遇到了一些问题，主要是TreeView控件的问题，这个问题搞了几个晚上，然后还需要调试代码才能知道它的用法，虽然能够调试出来，但毕竟没什么含金量，只是重复劳动而已，相信很多前辈已经做过了。好吧，天朝的开源状况一向如此，重复造轮子的事情就由Alberl来终结吧，希望能给后面的小伙伴们节省时间，这里向那些提供Demo 的大神们致敬，向duilib的作者致敬~O(∩_∩)O~
说说这8个晚上干了啥吧：
1、前两个晚上实现了Treeview的基本界面，因为Demo里只有一个Treeview的例子，但是和迅雷的播放列表相差甚远，【属性列表】里很多属性都是没用的，比如itemfont、itembkcolor等一系列属性，所以文字的大小和居中就没管了。
2、大家可以发现在隐藏播放列表的情况下，和迅雷一个像素都不差，包括在不同分辨率下（800*600 到1440*900，再大一点试了1920*1080），嗯，这也花了两个晚上。于10.26晚上12点多发布了第一个版本~O(∩_∩)O~
3、这样就只剩下播放列表的问题啦，试了那些属性都无效之后，就只能调试了，发现TreeView问题多多，于是改了几处代码，实现了TreeView的文字居中、以及一些Bug，也花了2个晚上。
4、好不容易播放列表的文字大小和居中什么的搞定了，又发现播放列表的滚动条有问题，好吧，解决了水平滚动条的问题，但是又发现垂直滚动条的问题，不过不拖入文件的话，就没有问题，所以就先不管了。嗯，10.29晚上发布了一个完整版本，和迅雷几乎一模一样，也听了几个晚上的歌，自我感觉良好~O(∩_∩)O~
程序下载（cpp代码将在最后一个教程给出）：
https://www.360docs.net/doc/b611220238.html,/detail/qq316293804/6478917
效果：
一晃眼就到月底啦，如果对哪部分效果的实现有疑问，请在评论区留言，Alberl将会挑选一些做详细讲解，嗯，继续写教程~O(∩_∩)O~
上个教程讲到了按钮图片效果不对的问题，如下：
明明是迅雷里面的图片，为啥效果和迅雷不一样呢？这是因为duilib默认会将图片缩放成和控件一样大小，这个时候我们需要在图片里加上dest属性。
normalimage="file='btn_open.png' source='178,0,266,16'
dest='38,13,126,29' "
其中source='178,0,266,16' 代表只显示btn_open.png中(178,0,266,16)区域的图片。(注：所有的坐标顺序都是左上右下)
dest='38,13,126,29' 代表将source区域的图片显示到按钮的（38,13,126,29）区域。可以看到dest代表的宽度为98，高度为16，也就是图片的高度和宽度啦，这样duilib就不会拉伸图片拉。效果如下：
是不是和迅雷的一个像素都不差呢~O(∩_∩)O~
那我们接着加上上方的地址栏，
这个效果和迅雷也差太远了吧~~~ 不急，下面我们加上更详细的属性，比如背景，字体颜色等等，XML如下：
textcolor="#FF4B4F51" disabledtextcolor="#FFA7A6AA"/> 终于有点像啦，不过貌似文字离编辑框的左边太近了点，这时就要加 上 textpadding="10,0,8,0"啦，意思就是文字离左边最少10个像素，离右边最少8个像素，效果如下： 嗯，现在位置也和迅雷一样啦，不过可以发现点击编辑框的时候，又不一样啦 我勒个去，吓(he)老子一跳，又和迅雷差了一大截啊o(╯□╰)o 嘿嘿，加上 nativebkcolor="#FF0E0E0E" 属性就好一点啦，效果如下： 不过编辑框的高度怎么那么挤呢？这个Alberl没有去研究设置高度的属性，不过改变字体后，高度会跟着变化哟，那我们就加上font="3" 属性吧，不过这里的"3"指的是第4个默认的 字体，字体XML如下： 哈哈，和迅雷一样了吧~O(∩_∩)O~ 不过可以发现迅雷的编辑框有蓝色的边框，这个Alberl设置了好一会儿，发现focusbordercolor并不生效，后来仔细看了Edit的所有属性，发现有个bordersize属性，对头，需要设置bordersize属性，focusbordercolor才能生效，那我们加上如下属性： bordersize="1" focusbordercolor="#FF154B83" 不过duilib并没有提供hotbordercolor属性，所以当鼠标移上去时，并不显示蓝色边框，但是和迅雷也仅仅是差这一个地方而已，并且我们可以用图片来代替hotbordercolor属性，一 个开源软件能做到如此地步，还能苛求什么呢~O(∩_∩)O~ 不过建议大家去实现一下hotbordercolor属性，已经有focusbordercolor了，所以这个很简单的哦，当然啦，分不分 享随便你，it's up to you！ Edit控件的整个XML代码如下： textpadding="10,0,8,0" bordersize="1" focusbordercolor="#FF154B83" nativebkcolor="#FF0E0E0E" bkcolor="#FF0E0E0E" textcolor="#FF4B4F51" disabledtextcolor="#FFA7A6AA"/> 【打开文件】按钮的整个XML代码如下：