C++ 實現仿 Office 風格顏色選取器完整代碼解析

前言

在 Windows 程式開發中，顏色選取器是常見的 UI 元件。本文介紹一個純 C++ 實現、仿 Microsoft Office 風格的顏色選取框，無需 MFC 架構即可直接調用，支援指定顯示位置與預設顏色，適合輕量級專案整合。

核心功能特點

• 純 Win32 API 實現，無 MFC 依賴
• 仿 Office 經典 40 色調色盤佈局（5×8 矩陣）
• 支援「其他顏色...」開啟系統完整調色對話框
• 滑鼠懸停、按下、選中狀態視覺回饋
• ESC 鍵或點擊外部自動關閉

程式架構說明

ColorPicker.h - 核心類別定義

定義顏色映射表、視窗類別名、自訂訊息常數，以及 CColorPicker 類別介面：

#define HexClr(rgb) ((DWORD)(rgb>>16)|(rgb&0xFF00)|((rgb&0xFF)<<16))
#define COLORPICKERWINNAME "ColorPickerWin"
#define WM_COLORSELECTED WM_USER+2938

static DWORD ColorMap[5][8] = {
    { HexClr(0x000000), HexClr(0x993300), HexClr(0x333300), HexClr(0x003300), HexClr(0x003366), HexClr(0x000080), HexClr(0x333399), HexClr(0x333333)},
    { HexClr(0x800000), HexClr(0xFF6600), HexClr(0x808000), HexClr(0x008000), HexClr(0x008080), HexClr(0x0000FF), HexClr(0x666699), HexClr(0x808080)},
    { HexClr(0xFF0000), HexClr(0xFF9900), HexClr(0x99CC00), HexClr(0x008080), HexClr(0x33CCCC), HexClr(0x3366FF), HexClr(0x800080), HexClr(0x999999)},
    { HexClr(0xFF00FF), HexClr(0xFFCC00), HexClr(0xFFFF00), HexClr(0x00FF00), HexClr(0x00FFFF), HexClr(0x00CCFF), HexClr(0x993366), HexClr(0xC0C0C0)},
    { HexClr(0xFF99CC), HexClr(0xFFCC99), HexClr(0xFFFF99), HexClr(0xCCFFCC), HexClr(0xCCFFFF), HexClr(0x99CCFF), HexClr(0xCC99FF), HexClr(0xFFFFFF)}
};

class CColorPicker {
public:
    HINSTANCE m_hInstance;
    CColorPicker(POINT *pt, DWORD DefaultColor);
    ~CColorPicker();
    HWND GetHwnd();
    DWORD GetColor();
    void OnPaint();
    void OnLButtonDown(long x, long y);
    void OnLButtonUp(long x, long y);
    void OnMouseMove(long x, long y);
private:
    HWND m_hwnd;
    DWORD m_Color;
    byte m_HotRow, m_HotCol;
    bool m_bCustomColor;
    bool m_bMouseDown;
    void CreateColorPicker(POINT *pt);
    void Draw(HDC hdc, byte row, byte col, bool hot, byte correction);
    void ReDraw(byte row, byte col, bool hot);
};

ColorPicker.cpp - 核心邏輯實現

包含視窗程序、建立視窗、訊息循環、繪製邏輯、滑鼠互動處理：

• ColorPickerWndProc：視窗程序，路由訊息至類別成員函式
• CreateColorPicker：註冊視窗類別、建立彈出視窗、進入訊息循環、捕捉滑鼠
• OnPaint：繪製 40 個顏色方塊與「其他顏色...」文字區域
• Draw：根據行列索引繪製單一顏色區塊，支援熱點、選中、按下狀態
• OnMouseMove/OnLButtonDown/OnLButtonUp：處理滑鼠懸停高亮、按下反饋、點擊選色或開啟系統調色盤

使用範例

POINT pt;
pt.x = 100; pt.y = 100;
CColorPicker *clrpk = new CColorPicker(&pt, HexClr(0xFF0000));
// 使用者選色後可透過 clrpk->GetColor() 取得結果

效果展示

適用場景與優化建議

此元件適合需輕量級顏色選取的工具列、屬性頁、繪圖工具等場合。若專案已使用 MFC，可考慮封裝為 CWnd 衍生類別以整合訊息映射機制；若需支援高 DPI，需調整方塊尺寸與字體建立邏輯。