類似 MSN 帶轉義字符的信息發送框的製作(下)
作者：闕榮文 (querw)
asp?id=2318">下載源代碼
一、實現了上回說到的多功能文本框之後，接下去的任務就是做一個表情符號選擇器。CIconPicker。
說明：本來是想實現圖標選擇的，但是後來有需要改成了位圖選擇器，但是類名沒有改過來，還是叫 CIconPicker。附帶工程中有圖標選擇器。
二、圖標/位圖選擇器(以下簡稱選擇器)的實現原理
當用戶按下選擇器的時候，應該把所有的圖像用一個圖片列表顯示出來；如果用戶選擇了其中一個圖片，則記錄該圖片的編號，並把圖片列表關閉。如果用戶沒有選擇圖片 ，那麼直接把圖片列表關閉 ( 響應 WM_KILLFOCUS 消息 )。
首先，從 CButton 派生一個類 CIconPicker 。給它增加一些成員用來實現"選擇器"的功能。如下所述：
· 1、圖片列表：CArray 存放所有下拉圖片，每個圖片都有一個編號，即它在圖片數組中的序號
· 2、GetBitmapAt()：顧名思義，按序號獲取圖片
· 3、AddBitmap()：添加一張圖片
· 4、GetCurrentBitmapIndex()：返回選中圖片的序號
當 CIconPicker 收到 WM_LBUTTONDOWN 消息時先不忙給父窗體發送 WM_COMMAND消息 ，而是創建一個圖片列表CIconContainer(容器)，然後在容器上面創建和圖片數量一樣多的按鈕，每個按鈕顯示一張圖片。當然，爲了
實現這個功能還得從CButton再派生一個類CInnerButton用來顯示圖片，感應鼠標事件。
三、源代碼說明
1、創建容器
void CIconPicker::OnLButtonDown(UINT nFlags， CPoint point)
{
if(m_bState) return ;
m_bState=TRUE;
this->SetState(TRUE);
RECT rect;
this->GetWindowRect(&rect);
POINT pt;
pt。x=rect。left;pt。y=rect。bottom;
//創建一個圖片列表容器
m_pIconContainer=new CIconContainer;
///把圖片數組當作參數傳過去
if(m_pIconContainer->Create(pt，this，&m_BitmapArray))
{
m_pIconContainer->ShowWindow(SW_SHOW);
m_pIconContainer->UpdateWindow();
m_pIconContainer->SetFocus();
}
}
2、爲每一張圖片在容器內創建一個按鈕CInnerButton。我把這個工作交給容器來完成。重載容器(CIconContainer)的Create()函數，如下:
BOOL CIconContainer::Create(POINT pt，CButton* pParentButton，CArray *pBitmapArray)
{
if(pBitmapArray->GetSize()<=0)return FALSE;
m_pParentButton=pParentButton;
///根據每張圖片的大小創建IconContainer
m_nCol=int(sqrt(pBitmapArray->GetSize()))+1; //計算列數
BITMAP bm;
pBitmapArray->GetAt(0)->GetBitmap(&bm); //以圖片列表中的第0號圖片的大小爲
基準
m_nCellWidth=bm。bmWidth+4; //內部單元的寬度
m_nCellHeight=bm。bmHeight+4; //內部單元的高度
CRect rect;
rect。left=pt。x，rect。top=pt。y;
rect。right=pt。x+m_nCellWidth*m_nCol; //容器的寬度
if(pBitmapArray->GetSize()%m_nCol==0) //計算行數
{
m_nRow=pBitmapArray->GetSize()/m_nCol;
}
else
{
m_nRow=pBitmapArray->GetSize()/m_nCol+1;
}
rect。bottom=pt。y+m_nCellHeight*m_nRow+2+46; ///容器的高度=(行數+2)*單元寬度
//pParentButton->GetParent()->ScreenToClient(&rect);
///創建容器
//CWnd::Create(NULL， NULL， WS_VISIBLE | WS_CHILD，
//rect，pParentButton->GetParent()，IDC_ICONCONTAINER， NULL);
CWnd::CreateEx(WS_EX_LEFT，AfxRegisterWndClass(0)，NULL，WS_VISIBLE|WS_POPUP，rect，NULL，NULL );
///創建圖片張數+2個按鈕
for(int i=0;i<m_nRow;i++)
{
for(int j=0;j<m_nCol&& i*m_nCol+j<pBitmapArray->GetSize();j++)
{
///計算按鈕的位置
CRect innerrect;
innerrect。left=j*m_nCellWidth;
innerrect。top=i*m_nCellHeight;
innerrect。right=innerrect。left+m_nCellWidth;
innerrect。bottom=innerrect。top+m_nCellHeight;
innerrect。DeflateRect(2，2);
///新建按鈕
CInnerButton *pInnerButton;
pInnerButton=new CInnerButton;
pInnerButton->Create(NULL，WS_CHILD |WS_VISIBLE，
innerrect，this，IDC_INNERBUTTON+i*m_nCol+j);
///設置按鈕的圖標
pInnerButton->SetBitmap(pBitmapArray->GetAt(i*m_nCol+j));
pInnerButton->ShowWindow(SW_SHOW);
///記錄該按鈕的指針
m_InnerButtonArray。Add(pInnerButton);
}
}
////創建兩個擴展功能按鈕
this->GetClientRect(&rect);
CInnerButton *pInnerButton;
pInnerButton=new CInnerButton;
rect。left=2;
rect。right-=2;
rect。top=m_nRow*m_nCellHeight+3;
rect。bottom=rect。top+20; //按鈕的高度爲22
pInnerButton->Create(NULL，WS_CHILD |WS_VISIBLE，
rect，this，IDC_INNERBUTTON-1);
pInnerButton->SetFont(m_pParentButton->GetParent()->GetFont());
pInnerButton->SetWindowText("顯示更多的圖釋");
pInnerButton=new CInnerButton;
rect。top=rect。bottom+3;
rect。bottom=rect。top+20;
pInnerButton->Create(NULL，WS_CHILD |WS_VISIBLE，
rect，this，IDC_INNERBUTTON-2);
pInnerButton->SetWindowText("我的自定義圖釋");
pInnerButton->SetFont(m_pParentButton->GetParent()->GetFont());
return TRUE;
}
當用戶單擊了其中的一個按鈕時，把序號記錄下來(可以根據InnerButton的ID，創建的時候ID是遞增的)並給父窗體(CIconPicker)發送一個消息，把序號送過去。
BOOL CIconContainer::OnCommand(WPARAM wParam， LPARAM lParam)
{
if(LOWORD(wParam)-IDC_INNERBUTTON==-1)
{
////在這裏響應"顯示更多的圖釋"
}
if(LOWORD(wParam)-IDC_INNERBUTTON==-2)
{
////在這裏響應"我的自定義圖釋"
CFileDialog SelectFileDlg(TRUE，"bmp"，"noname"，OFN_FILEMUSTEXIST，
"Bitmap File(*。bmp)|*。bmp"，m_pParentButton);
if(SelectFileDlg。DoModal()==IDOK)
{
((CIconPicker*)m_pParentButton)->AddBitmap(SelectFileDlg。GetPathName());
}
}
///關閉本窗口
Close(LOWORD(wParam)-IDC_INNERBUTTON); ///在這裏根據ID取得序號
///消息發送的語句在Close()中
return TRUE;
}
這樣容器的任務就完成了。如何顯示圖片那是內部按鈕(CInnerButton)的事。
3、實現內部按鈕(CInnerButton)
只是一個自畫按鈕而已，感應鼠標事件，自畫，貼圖等等都是老生常談了。我就不一一贅述了。若有疑問請看本文附
帶的源代碼。最後的效果如下圖所示：
這樣，一個圖標/圖片選擇器就基本完成了。呵呵，由於水平有限再加上時間倉卒，功能還很不完善，代碼也亂七八糟，大家別用雞蛋砸我，雞蛋用來砸我多可惜啊(要砸也別砸臉，砸我郵箱 ：[email protected]