VC++ 實作 Office 風格扁平化下拉方塊：CXTFlatComboBox 免費類別整合指南

前言

Microsoft Office 系列採用扁平化 `ComboBox`（邊框僅在滑鼠懸停/焦點時顯示），視覺現代輕量。Codejock Xtreme Toolkit 提供免費類別 `CXTFlatComboBox` 實現此效果。本文說明整合步驟、核心屬性、自動完成支援、已知問題（`WM_CTLCOLOR` 下拉模式文字顏色不生效）與替代方案。

一、取得與整合原始碼

1. 下載 Xtreme Toolkit 免費版或從 Codejock 官網取得 `XTFlatComboBox.h/.cpp`。
2. 加入專案：`Project → Add Existing Item` 選取兩個檔案。
3. 在使用處 `#include "XTFlatComboBox.h"`。

二、對話方塊關聯變數

// 對話方塊類別頭文件
#include "XTFlatComboBox.h"

class CFlatComboDemoDlg : public CDialog
{
    CXTFlatComboBox m_comboDropdown; // CBS_DROPDOWN 可編輯
    CXTFlatComboBox m_comboDropList; // CBS_DROPDOWNLIST 僅選擇
    BOOL m_bAutoComplete;
    BOOL m_bDisableDropdown, m_bDisableDropList;
    // ...
};

三、資源設定與 DDX

1. 對話方塊編輯器放置兩個 `ComboBox`，分別設定 `Type = Dropdown` / `Dropdown List`。
2. ClassWizard 關聯控制項變數（先關聯 `CComboBox`，再手動改為 `CXTFlatComboBox`）。
3. `DoDataExchange`：

void CFlatComboDemoDlg::DoDataExchange(CDataExchange* pDX)
{
    CDialog::DoDataExchange(pDX);
    DDX_Control(pDX, IDC_COMBO_DROPDOWN, m_comboDropdown);
    DDX_Control(pDX, IDC_COMBO_DROPLIST, m_comboDropList);
    DDX_Check(pDX, IDC_CHECK_AUTOCOMP, m_bAutoComplete);
    DDX_Check(pDX, IDC_CHECK_DISABLE_DD, m_bDisableDropdown);
    DDX_Check(pDX, IDC_CHECK_DISABLE_DL, m_bDisableDropList);
}

四、初始化與功能設定

BOOL CFlatComboDemoDlg::OnInitDialog()
{
    CDialog::OnInitDialog();

    // 填入測試資料
    CString arr[] = { _T("Apple"), _T("Banana"), _T("Cherry"), _T("Date"), _T("Elderberry") };
    for (auto& s : arr) { m_comboDropdown.AddString(s); m_comboDropList.AddString(s); }
    m_comboDropdown.SetCurSel(0); m_comboDropList.SetCurSel(0);

    // 自動完成（僅 Dropdown 模式支援）
    m_comboDropdown.SetAutoComplete(m_bAutoComplete);

    // 啟用/禁用
    m_comboDropdown.EnableWindow(!m_bDisableDropdown);
    m_comboDropList.EnableWindow(!m_bDisableDropList);

    return TRUE;
}

五、核心特性

• 扁平外觀：預設無邊框，`OnMouseMove`/`OnSetCursor` 偵測懸停顯示邊框與下拉箭頭。
• 主題色系：支援 Office 2000/XP/2003/2007 風格，可自訂邊框色、背景色、熱追蹤色。
• 自動完成：`SetAutoComplete(TRUE)` 啟用輸入時下拉清單過濾匹配項。
• 圖示支援：`SetItemImage` 為每個項目設定圖示索引。

六、已知問題：WM_CTLCOLOR 下拉模式文字顏色失效

文中提到：`OnCtlColor` 中設定 `CDC::SetTextColor`/`SetBkColor` 對 `CBS_DROPDOWN` 模式的編輯區無效。原因：下拉模式的編輯框是內建子視窗，`WM_CTLCOLOR` 發送給父視窗時 `nCtlColor` 為 `CTLCOLOR_EDIT`，但 `CXTFlatComboBox` 可能未正確轉發或處理。解決方案：

• 子類化內建編輯框（`GetWindow(GW_CHILD)` 取得 `HWND`，`SubclassWindow` 關聯自訂 `CEdit`），在其 `OnCtlColor` 處理顏色。
• 或改用 `CBS_DROPDOWNLIST` 僅選擇模式，無編輯區問題。
• 或放棄 `WM_CTLCOLOR`，改用 `NM_CUSTOMDRAW` 繪製項目（含編輯區）。

七、執行效果

兩種模式皆呈現扁平風格，懸停顯示邊框與下拉箭頭，點擊展開清單，可編輯模式支援自動完成勾選控制。

八、替代方案：純 MFC 手工實作扁平 ComboBox

若不想引入第三方庫，可自行繼承 `CComboBox`，處理 `WM_PAINT`（繪製扁平邊框）、`WM_MOUSEMOVE`/`WM_MOUSELEAVE`（追蹤懸停）、`WM_CTLCOLOR`（子編輯框顏色）、`NM_CUSTOMDRAW`（下拉清單項目繪製），約 150 行核心代碼即可達到同等效果，且完全可控。

九、結語

`CXTFlatComboBox` 以零成本提供 Office 風格扁平下拉框，整合簡單、功能完整。已知 `WM_CTLCOLOR` 問題可透過子類化內建編輯框解決。建議團隊評估：若專案已使用 Xtreme Toolkit 其他元件，直接採用；否則自行實作輕量級 `CFlatComboBox` 更符合專案可控性原則。