原文地址：http://www.uieasy.cn/blog/?p=513

傳統的combobox 在使用方面有很多限制，很難滿足我們combobox類型控件的需求。主要表現中combobox內置的listbox難以控制且比較難以完美繪制。因此我們在DSkinControl控件中添加了新的控件dsCtrlComboBox來實現一些標準combobox難以實現的功能。

dsCtrlComboBox控件結構

由于使用dskinlite界面庫可以自由繪制一個子窗口，繪制listbox，因此上圖所示QQ登錄界面很容易配置出來。首先是上部繼承自CWnd的子窗口，我們在dsCtrlCombobox中使用combobox_bk來繪制。xml配置如下：

<window name="combobox_bk" type="static"> <property bkcolor="RGB(255,255,255)" btransparentbk="false" /> <text state="all" font="#default" left="30" vertalign="center" bsingleline="true" textcolor="RGB(0,0,0)" /> <image state="normal" picfile="#extend.combobox.bk.nor" paintmode="stretchparthorz" left_part="3" right_part="3"/> <image state="over|down" picfile="#extend.combobox.bk.over" paintmode="stretchparthorz" left_part="3" right_part="3"/> <image state="all" index="100" id="image.default" picfile="#extend.combobox.bk.nor" left="5" top="3" ;20" height="20"/> <image state="normal" index="2" left="-25" top="1" width="24" height="24" picfile="#extend.combobox.btn.nor" /> <image state="over" index="2" left="-25" top="1" width="24" height="24" picfile="#extend.combobox.btn.over" /> <image state="down" index="2" left="-25" top="1" width="24" height="24" picfile="#extend.combobox.btn.down" /> </window>

其中

<image state="all" index="100" id="image.default"?? picfile="#extend.combobox.bk.nor" left="5" top="3" ;20" height="20"/>

是我們為類似IM登陸中使用的combobox優化的一種模式。其中index=100 id="image.default"是固定的值，用于顯示dsCtrlCombobox前面的用戶頭像。

在dsCtrlComboBox內部代碼中，通過如下調用來控制界面顯示：

void dsCtrlComboBox::SetWindowImage( CString strImage) { ShowWindowImage( TRUE); if ( !strImage.IsEmpty()) dsSetDrawItemValue( GetSafeHwnd(), _T("image.default"), strImage, FALSE); } void dsCtrlComboBox::ShowWindowImage(BOOL bShow) { if ( bShow ) dsSetDrawItemVisible( GetSafeHwnd(), 100,100, TRUE, FALSE); else dsSetDrawItemVisible( GetSafeHwnd(), 100,100, FALSE, FALSE); }

因為我們提供dsCtrlComboBox的所有源碼，因此開發人員也可以根據自己的需要來定義這些繪制元素。

同時我們通過以下xml配置繪制下拉的listbox：

<window name="combobox.listbox" type=""> <property bkcolor="#system_bg" bordercolor="RGB(255,0,0)" btransparentbk="false" scrollbar="scrollbar" /> <rect id="border" index="1" bordercolor="#system.border" border;1" style="hole" /> <rect id="border" index="2" bordercolor="RGB(255,255,255)" left="1" top="1" right="-1" bottom="-1" borderwidth="1" style="hole" /> <rect id="item" state="checked" gradientmode="horiz" gradientbegincolor="RGB(63,152,217)" gradientendcolor="RGB(48,134,198)" /> <rect id="item" bordercolor="RGB(255,255,255)" fillcolor="RGB(255,255,255)" state="normal"/> <listboxinfo bDrawOver="true" itemheight="35" > <drawitem id="default" > <image state="all" id="image.default" picfile="#extend.combobox.bk.nor" left="5" top="2" width="20" height="20"/> <text id="text.default" content="" left="30" top="4" state="normal" textcolor="RGB(0,0,0)" font="#default"/> <text id="text.default" content="" left="30" top="4" state="over" textcolor="RGB(68,138,237)" font="#default"/> <text id="text.default" content="" left="30" top="4" state="checked" textcolor="RGB(255,255,255)" font="#default"/> <eventitem id="close" event="LButtonDown" cursor="handcur" state="checked" left="-20" top="5" width="15" height="15" visible="true"> <image state="normal" picfile="#extend.listbox.closebtn.nor" /> <image state="over" picfile="#extend.listbox.closebtn.over" /> </eventitem> </drawitem> </listboxinfo> </window>

同樣以上XML中id為“text.default” 和id 為“image.default”的繪制元素在代碼中會被設置不同的值，用以顯示每一個item對應的文本和圖片值。

?

dsCtrlComboBox 函數使用

基本上我們完全按照MFC CComboBox的API來做封裝，為了使用戶很容易理解并使用。CComboBox的大部分函數我們在dsCtrlComboBox中都實現了，有些做了一些擴展。如：

int dsCtrlComboBox::AddString( LPCTSTR lpszString, LPCTSTR lpszImage);

此函數表示在添加item項時，同時指定item text及 item image。詳情請參考我們的ComboBoxTest示例工程。

總結：

由于DSkinLite界面庫對界面繪制靈活的支持，使得我們可以使用dsCtrlComboBox非常容易的繪制出不同樣式的界面，本文中的類似IM軟件中用戶登陸combobox只是一個方面的應用，因為我們提供了DSkinControl的所有源碼，開發人員可以根據界面需要配置不同的界面來。

Technorati 標簽: combobox QQ登錄界面 界面庫 界面控件

轉載于:https://blog.51cto.com/guicoder/531045

總結

以上是生活随笔為你收集整理的用combobox扩展控件（dsCtrlComboBox)做出类似QQ登录界面的效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。