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

傳統(tǒng)的combobox 在使用方面有很多限制，很難滿足我們combobox類型控件的需求。主要表現(xiàn)中combobox內(nèi)置的listbox難以控制且比較難以完美繪制。因此我們?cè)贒SkinControl控件中添加了新的控件dsCtrlComboBox來實(shí)現(xiàn)一些標(biāo)準(zhǔn)combobox難以實(shí)現(xiàn)的功能。

dsCtrlComboBox控件結(jié)構(gòu)

由于使用dskinlite界面庫可以自由繪制一個(gè)子窗口，繪制listbox，因此上圖所示QQ登錄界面很容易配置出來。首先是上部繼承自CWnd的子窗口，我們?cè)赿sCtrlCombobox中使用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"/>

是我們?yōu)轭愃艻M登陸中使用的combobox優(yōu)化的一種模式。其中index=100 id="image.default"是固定的值，用于顯示dsCtrlCombobox前面的用戶頭像。

在dsCtrlComboBox內(nèi)部代碼中，通過如下調(diào)用來控制界面顯示：

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); }

因?yàn)槲覀兲峁ヾsCtrlComboBox的所有源碼，因此開發(fā)人員也可以根據(jù)自己的需要來定義這些繪制元素。

同時(shí)我們通過以下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”的繪制元素在代碼中會(huì)被設(shè)置不同的值，用以顯示每一個(gè)item對(duì)應(yīng)的文本和圖片值。

?

dsCtrlComboBox 函數(shù)使用

基本上我們完全按照MFC CComboBox的API來做封裝，為了使用戶很容易理解并使用。CComboBox的大部分函數(shù)我們?cè)赿sCtrlComboBox中都實(shí)現(xiàn)了，有些做了一些擴(kuò)展。如：

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

此函數(shù)表示在添加item項(xiàng)時(shí)，同時(shí)指定item text及 item image。詳情請(qǐng)參考我們的ComboBoxTest示例工程。

總結(jié)：

由于DSkinLite界面庫對(duì)界面繪制靈活的支持，使得我們可以使用dsCtrlComboBox非常容易的繪制出不同樣式的界面，本文中的類似IM軟件中用戶登陸combobox只是一個(gè)方面的應(yīng)用，因?yàn)槲覀兲峁┝薉SkinControl的所有源碼，開發(fā)人員可以根據(jù)界面需要配置不同的界面來。

Technorati 標(biāo)簽: combobox QQ登錄界面 界面庫 界面控件

轉(zhuǎn)載于:https://blog.51cto.com/guicoder/531045

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。