基于对话框的QQ抽屉效果的实现

1、基于对话框的qq抽屉效果的实现用cgfxoutbarctrl控件来实现qq的抽屉菜单界面操作步骤：1.创建一个基于对话框的应用程序，程序名：outbardialog2.删除原有的两个按钮和静态控件。3.添加gfxgroupedit.cpp、gfxgroupedit.h、gfxpopupmenu.cpp 、gfxpopupmenu.h、gfxoutbarctrl.cpp、gfxoutbarctrl.h到工程中。4.在文件gfxgroupedit.cpp中添加如下代码：#include outbardialog.h。5.在资源文件中导入需要使用的图标，（本例子中导入了11个图标）用于构筑图像列表的

2、内容，显示在抽屉的子项中。再导入三个光标文件，其id分别为：idcnodragging、idchandcur、idcdragging在outbardialogdlg.h文件中添加：#define idc_lst_menu wm_user+1000#include resource.h#include gfxoutbarctrl.h6.在outbardialogdlg.cpp文件中添加对象：cgfxoutbarctrl wndbar;cimagelist imalarge,imasmall;添加图像数组：static uint nicons = idi_icon1, idi_icon3, idi

3、_icon4, idi_icon7, idi_icon8, idi_icon2, idi_icon11, idi_icon6, idi_icon9, idi_icon10, idi_icon5;7.在对话框oninitdialog（）初始化函数中添加如下代码：/创建抽屉菜单控件dword dwf=cgfxoutbarctrl:fdragitems |cgfxoutbarctrl:feditgroups |cgfxoutbarctrl:fedititems |cgfxoutbarctrl:fremovegroups |cgfxoutbarctrl:fremoveitems |cgfxoutbar

4、ctrl:faddgroups |cgfxoutbarctrl:fanimation ;/抽屉控件的大小以及位置crect rc;getclientrect(&rc);int r1=rc.height();int r2=rc.width()/5; wndbar.create(ws_child|ws_visible,crect(0,0,r2,r1),this,idc_lst_menu,dwf);wndbar.setowner(this);/创建图像列表imasmall.create (16, 16, ilc_color16|ilc_mask, 2, 1);imalarge.create (32,

5、 32, ilc_color16|ilc_mask, 2, 1);/ 初始化图像列表for (int i = 0; i loadicon(niconsi);assert(hicon);imasmall.add(hicon);imalarge.add(hicon);/ 添加图像到抽屉控件wndbar.setimagelist(&imalarge,cgfxoutbarctrl:flargeicon);wndbar.setimagelist(&imasmall,cgfxoutbarctrl:fsmallicon);/设置并添加抽屉菜单项/wndbar.setanimationtickcount(20

6、);/wndbar.setanimselhighlight(200);/ add the first folder to the outlook ifolder; / index of the added folderifolder = wndbar.addfolder(_t(shortcuts 1), 0);/ add items to the folder, syntax is folder, index, text, image, and item data.wndbar.insertitem(ifolder, 1, _t(item 1), 0, null);wndbar

7、.insertitem(ifolder, 2, _t(item 2), 1, null);wndbar.insertitem(ifolder, 3, _t(item 3), 2, null);wndbar.insertitem(ifolder, 4, _t(item 4), 3, null);wndbar.insertitem(ifolder, 5, _t(item 5), 4, null);wndbar.insertitem(ifolder, 6, _t(item 6), 5, null);/ add the second folder to the outlook bar.ifolder

8、= wndbar.addfolder(_t(shortcuts 2), 1);/ add items to the folder, syntax is folder, index, text, image, and item data.wndbar.insertitem(ifolder, 1, _t(item 1), 0, null);wndbar.insertitem(ifolder, 2, _t(item 2), 1, null);wndbar.setselfolder(0);8.消息响应机制，在outbardialogdlg.cpp文件中添加如下消息响应函数：afx_msg long o

9、noutbarnotify(wparam wparam, lparam lparam);以及：begin_message_map(coutbardialogdlg, cdialog)/afx_msg_map(coutbardialogdlg)on_wm_syscommand()on_wm_paint()on_wm_querydragicon()on_message(wm_outbar_notify, onoutbarnotify)on_wm_size()/afx_msg_map手动添加如下代码（protected）：long coutbardialogdlg:onoutbarnotify(wp

10、aram wparam, lparam lparam)switch (wparam)case nm_ob_itemclick:/ cast the lparam to an integer to get the clicked itemint index = (int) lparam;cstring cs, cs1;cs1 = wndbar.getitemtext(index);int ifloder = wndbar.getselfolder();cs.format(clicked on %d floder - %d : , ifloder, (int)lparam, cs1);afxmes

11、sagebox(cs);return 0;case nm_ob_onlabelendedit:/ cast the lparam to an outbar_info * struct; it will contain info about the edited item/ return 1 to do the change and 0 to cancel itoutbar_info * poi = (outbar_info *) lparam;trace2(editing item %d, new text:%sn, poi-index, poi-ctext);return 1;case nm

12、_ob_ongroupendedit:/ cast the lparam to an outbar_info * struct; it will contain info about the edited folder/ return 1 to do the change and 0 to cancel itoutbar_info * poi = (outbar_info *) lparam;trace2(editing folder %d, new text:%sn, poi-index, poi-ctext);return 1;case nm_ob_dragitem:/ cast the lparam to an outbar_info * struct; it will contain info abo