duilib 进阶教程文档格式.docx
《duilib 进阶教程文档格式.docx》由会员分享，可在线阅读，更多相关《duilib 进阶教程文档格式.docx（57页珍藏版）》请在冰豆网上搜索。
））
if（msg.pSender->
GetName（）==_T（"
btnPrevious"
m_pDlgMain->
OnBnClickedButtonPlayPrevious（）;
}
elseif（msg.pSender->
btnNext"
OnBnClickedButtonPlayNext（）;
btnPlay"
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函数里截获，代码如下：
LRESULTCDuiFrameWnd:
HandleMessage（UINTuMsg,WPARAMwParam,LPARAMlParam）
switch（uMsg）
caseWM_COMMAND:
if（IDC_BUTTON_DUI_NEXT==wParam）
break;
default:
return__super:
HandleMessage（uMsg,wParam,lParam）;
也是非常简单！
现在已经可以去试试效果啦，左边那三个按钮和右边那三个按钮的效果完全一样！
从这个例子可以看出，无论是在duilib里使用MFC，还是在MFC中使用duilib，都不需要改动原有项目，和MFC结合是不是很有用呢~O（∩_∩）O~
代码下载：
在duilib中使用MFC
（2）
好人做到底，送佛送到西。
虽然上一篇教程已经说得很详细了，但Alberl还是再举一个例子。
上一篇教程的主窗口是MFC的，所以这篇教程把主窗口换成duilib的~O（∩_∩）O~
1、我们利用《2013duilib入门简明教程--完整的自绘标题栏（8）》里的XML做为主窗口，并且把客户区的控件都去掉，换成一个自定义控件<
Dialog/>
2、在CDuiFrameWnd:
CreateControl（）函数里，加入自定义控件Dialog的创建：
if（_tcsicmp（pstrClassName,_T（"
Dialog"
））==0）
CWndUI*pUI=newCWndUI;
CXMPDlg*pDlg=newCXMPDlg;
//这里只是示例，请自行释放内存~
pDlg->
Create（IDD_XMP_DIALOG）;
pUI->
Attach（pDlg->
GetSafeHwnd（））;
returnpUI;
3、在CXMPApp:
InitInstance（）函数里，将
CXMPDlgdlg;
m_pMainWnd=&
dlg;
INT_PTRnResponse=dlg.DoModal（）;
换成
CDuiFrameWnd*pFrame=newCDuiFrameWnd（_T（"
XMP_MAIN.xml"
））;
pFrame->
Create（NULL,_T（"
DUIWnd"
）,UI_WNDSTYLE_FRAME,WS_EX_WINDOWEDGE）;
CenterWindow（）;
m_pMainWnd=CWnd:
FromHandle（*pFrame）;
INT_PTRnResponse=pFrame->
ShowModal（）;
4、将MFC对话框的风格改为子窗口模式，如下：
然后运行，即可看到以下效果：
同样，里面的控件都是可以响应的哦，那么到现在为止，MFC和duilib结合的所有方式都讲完了，那些为老项目界面犯愁的小伙伴们，赶紧动手试试吧~O（∩_∩）O~
Container控件（3）
前面两个教程的目的是教大家与MFC结合，那么从这篇起，将不再使用MFC，而使用纯win32项目，本文的所有知识已经在《duilib入门教程》里面讲过了，因此基础知识不再赘述。
效果如下（可拖拽边缘调节窗口大小，图片会自动居中）
此例子唯一需要说明的就是XML，代码如下：
<
?
xmlversion="
1.0"
encoding="
utf-8"
standalone="
yes"
?
>
Windowsize="
800,520"
sizebox="
4,4,4,4"
caption="
0,0,0,32"
mininfo="
600,400"
<
VerticalLayoutbkcolor="
#FF070700"
HorizontalLayoutheight="
40"
/>
HorizontalLayout>
VerticalLayout/>
VerticalLayoutwidth="
336"
bkimage="
skin\bk_logo_light.png"
HorizontalLayout/>
164"
skin\bk_logo_image.png"
168"
VerticalLayoutheight="
20"
skin\bk_logo_text.png"
/VerticalLayout>
/HorizontalLayout>
50"
/Window>
可以看到到处都是HorizontalLayout
、VerticalLayout，然后几个bkimage也很乱，这里有几个原因：
1、由于迅雷的中间那一块是由三个图片组成，所以布局很麻烦，其实用一张图片的话，就简洁很多了，这里估计是为了重用图片。
2、方式不太对。
如果中间只有一个图片的话，按照上面的XML布局就很简洁了，但由于有三个图片，这三个图片都需要自适应窗口大小，所以才造成上面的XML代码那么乱，那么有没有优化的地方呢？
当然有，在《入门教程》里我们还有一个控件没有介绍，那就是Container，顾名思义就是容器控件，容器控件有什么用呢？
它的用处就是可以使子窗口的行为随着Container一致变化。
比如我们的窗口有10个按钮，如果没放在Container里的话，那么想要隐藏所有控件，就必须调用10次隐藏函数，如果想将所有控件往左移的话，也需要操作10次，同样，上面因为有3个图片，所以为了让他们都适应窗口大小，我们做了3次布局。
而如果这些控件都在Container里的话，那就方便多了，就算有100个按钮，如果要隐藏的话，我们只需要调用1次隐藏函数，即隐藏Container控件即可，这样它的子控件都会隐藏。
同样，如果把上面3个图片都放到Container里去，我们的XML代码就简明多啦，优化后的代码如下：
Containerheight="
290"
Controlfloat="
true"
pos="
0,0,0,0"
width="
height="
230"
1,1,0,0"
84,38,0,0"
/Container>
可以看到bkimage都在一起了，HorizontalLayout、VerticalLayout
也不那么乱了，Container控件暂时就讲到这里啦。
XML嵌套及自定义控件（4）
代码下载：
之前入门教程里已经讲过了自定义控件，这里借着迅雷播放器再次举个例子。
1、我们先给迅雷播放器加入下面那一排按钮。
和上个教程一样，我们可以选择直接放在主XML里面，也可以选择放到Container里面，在这里，为了让主XML的代码更简洁一点，我们选择放到单独的XML里面。
而这个单独的XML就相当于一个自定义控件了，将控件名取为WndPlayPanel，XML取名为【WndPlayPanel.xml】，然后在CDuiFrameWnd:
CreateControl里加入如下代码：
CControlUI*CDuiFrameWnd:
CreateControl（LPCTSTRpstrClassName）
WndPlayPanel"
CDialogBuilderbuilder;
CControlUI*pUI=builder.Create（_T（"
WndPlayPanel.xml"
returnNULL;
这样自定义控件就创建出来了，接着把主XML的<
55"
换成<
WndPlayPanelheight="
，自定义控件WndPlayPanel就显示到最下方了。
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代码将在最后一个教程给出）：
效果：
一晃眼就到月底啦，如果对哪部分效果的实现有疑问，请在评论区留言，Alberl将会挑选一些做详细讲解，嗯，继续写教程~O（∩_∩）O~
上个教程讲到了按钮图片效果不对的问题，如下：
明明是迅雷里面的图片，为啥效果和迅雷不一样呢？
这是因为duilib默认会将图片缩放成和控件一样大小，这个时候我们需要在图片里加上dest属性。
normalimage="
file='
btn_open.png'
source='
178,0,266,16'
dest='
38,13,126,29'
"
其中source='
代表只显示btn_open.png中（178,0,266,16）区域的图片。
（注：
所有的坐标顺序都是左上右下
）
dest='
代表将source区域的图片显示到按钮的（38,13,126,29）区域。
可以看到dest代表的宽度为98，高度为16，也就是图片的高度和宽度啦，这样duilib就不会拉伸图片拉。
效果如下：
是不是和迅雷的一个像素都不差呢~O（∩_∩）O~
那我们接着加上上方的地址栏，
Edittext="
请输入播放地址"
这个效果和迅雷也差太远了吧~~~不急，下面我们加上更详细的属性，比如背景，字体颜色等等，XML如下：
bkcolor="
#FF0E0E0E"
textcolor="
#FF4B4F51"
disabledtextcolor="
#FFA7A6AA"
终于有点像啦，不过貌似文字离编辑框的左边太近了点，这时就要加上
textpadding="
10,0,8,0"
啦，意思就是文字离左边最少10个像素，离右边最少8个像素，效果如下：
嗯，现在位置也和迅雷一样啦，不过可以发现点击编辑框的时候，又不一样啦
我勒个去，吓（he）老子一跳，又和迅雷差了一大截啊o（╯□╰）o
嘿嘿，加上
nativebkcolor="
属性就好一点啦，效果如下：
不过编辑框的高度怎么那么挤呢？
这个Alberl没有去研究设置高度的属性，不过改变字体后，高度会跟着变化哟，那我们就加上font="
3"
属性吧，不过这里的"
指的是第4个默认的字体，字体XML如下：
Fontname="
微软雅黑"
size="
12"
bold="
false"
哈哈，和迅雷一样了吧~O（∩_∩）O~
不过可以发现迅雷的编辑框有蓝色的边框，这个Alberl设置了好一会儿，发现focusbordercolor并不生效，后来仔细看了Edit的所有属性，发现有个bordersize属性，对头，需要设置bordersize属性，focusbordercolor才能生效，那我们加上如下属性：
bordersize="
1"
focusbordercolor="
#FF154B83"
不过duilib并没有提供hotbordercolor属性，所以当鼠标移上去时，并不显示蓝色边框，但是和迅雷也仅仅是差这一个地方而已，并且我们可以用图片来代替hotbordercolor属性，一个开源软件能做到如此地步，还能苛求什么呢~O（∩_∩）O~
不过建议大家去实现一下hotbordercolor属性，已经有focusbordercolor了，所以这个很简单的哦，当然啦，分不分享随便你，it'
suptoyou！
Edit控件的整个XML代码如下：
Editname="
editURL"
text="
font="
textpadding="
bordersize="
nativebkcolor="
【打开文件】按钮的整个XML代码如下：
Buttonname="
btnOpen"
float="
72,228,0,0"
158"
file=&
apos;
btn_bk.png&
"
#FF000000"
align="
center"
pushedimage="
btn_open.png&
source=&
0,0,88,20&
dest=&
38,13,126,29&
hotimage="
89,0,177,16&
normalimage="
178,0,266,16&
本文的链接里是最终效果，熟练的小伙伴们可以直接看最终效果~O（∩_∩）O
升级会员 