VC++ 實作 IE 風格介面：ReBar + 扁平工具列 + 下拉按鈕 + 位址列

前言

IE 經典介面特徵：扁平工具列 (滑鼠懸停凸起)、熱點圖示/冷態圖示切換、按鈕文字提示、下拉箭頭按鈕、整合位址下拉方塊。MFC 透過 CReBar、CToolBar、CImageList、CComboBox 即可完整複刻。本文解析 CMainFrame::OnCreate 核心實作碼。

核心物件架構

• CReBar m_wndReBar：容器，管理工具列與位址列條帶。
• CToolBar m_wndToolBar：主工具列，支援扁平、熱點圖示、下拉按鈕。
• CImageList m_imgHot, m_imgCold：熱點/冷態圖示清單 (22x22, 256 色)。
• CComboBox m_wndAddress：位址列，CBS_DROPDOWN 模式。

關鍵建立流程 (OnCreate)

1. 建立 ReBar 容器

if (!m_wndReBar.Create(this)) return -1;

2. 建立工具列 (必須用 CreateEx)

if (!m_wndToolBar.CreateEx(this)) return -1;
// CreateEx 才能套用 TBSTYLE_FLAT 等新風格

3. 設定工具列屬性

m_wndToolBar.GetToolBarCtrl().SetButtonWidth(50, 150); // 按鈕寬度範圍
m_wndToolBar.GetToolBarCtrl().SetExtendedStyle(TBSTYLE_EX_DRAWDDARROWS); // 支援下拉箭頭

4. 載入冷/熱圖示清單

// 熱點圖示 (滑鼠懸停)
m_imgHot.Create(IDB_HOTTOOLBAR, 22, 0, RGB(255,0,255));
m_wndToolBar.GetToolBarCtrl().SetHotImageList(&m_imgHot);
m_imgHot.Detach();

// 冷態圖示 (正常)
m_imgCold.Create(IDB_COLDTOOLBAR, 22, 0, RGB(255,0,255));
m_wndToolBar.GetToolBarCtrl().SetImageList(&m_imgCold);
m_imgCold.Detach();

5. 套用扁平風格 (關鍵：ModifyStyle 繞過 CToolBar 限制)

m_wndToolBar.ModifyStyle(0, TBSTYLE_FLAT | TBSTYLE_TRANSPARENT);
// CToolBar::Create/CreateEx 不直接支援 TBSTYLE_FLAT，必須事後 ModifyStyle

6. 設定按鈕資訊 (ID、樣式、圖示索引、文字)

m_wndToolBar.SetButtons(NULL, 9); // 9 個按鈕

CString str;
for (int i = 0; i < 9; i++)
{
    UINT nID = ID_BUTTON0 + i;
    UINT nStyle = TBSTYLE_BUTTON;
    if (i == 6 || i == 8) nStyle |= TBSTYLE_DROPDOWN; // 第 7、9 個按鈕帶下拉箭頭

    m_wndToolBar.SetButtonInfo(i, nID, nStyle, i); // 圖示索引 = 按鈕索引
    str.LoadString(IDS_BUTTON0 + i);
    m_wndToolBar.SetButtonText(i, str); // 文字提示
}

7. 調整按鈕尺寸

CRect rcBtn;
m_wndToolBar.GetItemRect(0, &rcBtn);
m_wndToolBar.SetSizes(rcBtn.Size(), CSize(30,20)); // 按鈕大小、圖示大小

8. 建立位址列下拉方塊

if (!m_wndAddress.Create(CBS_DROPDOWN | WS_CHILD, CRect(0,0,200,120), this, AFX_IDW_TOOLBAR + 1))
    return -1;

9. 加入 ReBar 條帶並設定理想尺寸

m_wndReBar.AddBar(&m_wndToolBar);
str.LoadString(IDS_ADDRESS);
m_wndReBar.AddBar(&m_wndAddress, str, NULL, RBBS_FIXEDBMP | RBBS_BREAK); // 換行

REBARBANDINFO rbbi = { sizeof(rbbi) };
rbbi.fMask = RBBIM_CHILDSIZE | RBBIM_IDEALSIZE | RBBIM_SIZE;
rbbi.cxMinChild = rcBtn.Width();
rbbi.cyMinChild = rcBtn.Height();
rbbi.cx = rbbi.cxIdeal = rcBtn.Width() * 9;
m_wndReBar.GetReBarCtrl().SetBandInfo(0, &rbbi); // 工具列條帶

rbbi.cxMinChild = 0;
CRect rcAddr; m_wndAddress.GetEditCtrl()->GetWindowRect(&rcAddr);
rbbi.cyMinChild = rcAddr.Height() + 10;
rbbi.cxIdeal = 200;
m_wndReBar.GetReBarCtrl().SetBandInfo(2, &rbbi); // 位址列條帶 (索引 2 因換行)

10. 狀態列建立 (標準)

if (!m_wndStatusBar.Create(this) || !m_wndStatusBar.SetIndicators(indicators, ...))
    return -1;

關鍵技術點總結

事件處理：下拉按鈕選單彈出

BEGIN_MESSAGE_MAP(CMainFrame, CFrameWnd)
    ON_NOTIFY(TBN_DROPDOWN, AFX_IDW_TOOLBAR, OnToolbarDropDown)
END_MESSAGE_MAP()

void CMainFrame::OnToolbarDropDown(NMHDR* pNMHDR, LRESULT* pResult)
{
    NMTOOLBAR* pNM = (NMTOOLBAR*)pNMHDR;
    if (pNM->iItem == ID_BUTTON6 || pNM->iItem == ID_BUTTON8)
    {
        CMenu menu; menu.LoadMenu(IDR_POPUP_MENU1); // 載入彈出選單資源
        CMenu* pPopup = menu.GetSubMenu(0);
        CRect rc; m_wndToolBar.GetItemRect(pNM->iItem, &rc);
        m_wndToolBar.ClientToScreen(&rc);
        pPopup->TrackPopupMenu(TPM_LEFTALIGN | TPM_TOPALIGN, rc.left, rc.bottom, this);
    }
    *pResult = 0;
}

結語

IE 風格介面的核心在於 ReBar 容器化版面、扁平工具列 + 雙態圖示、下拉按鈕擴充 三大支柱。掌握 CToolBar::ModifyStyle 繞過封裝限制、CReBar::SetBandInfo 精確控制條帶尺寸、TBN_DROPDOWN 回應下拉選單，即可建構專業級工具列介面。

1. 上一篇文章： VC++ 開發 BHO (Browser Helper Object) 客製化 Internet Explorer
2. 下一篇文章： C++ 虛函式與晚期繫結實作機制深度解析

VC 教學

VC++ 客戶區非矩形視窗與 ListBox 拖曳移動項目完整指南

第一部分：非矩形客戶區視窗 (WM_NCCALCSIZE)

如何禁用 TreeView 節點 (灰色不可選) - C++ Builder 實作

需求 TTreeView 無內建 Enabled 屬性。需自

VC++ TreeCtrl 與 ListCtrl 聯動實作資源管理器風格檔案瀏覽器

前言 經典的「左側樹狀目錄 + 右側檔案清單」介面是檔案瀏覽

利用 IFELanguage 介面實現中文分詞與漢字注音 (拼音) - C++ Builder

背景 Windows 輸入法編輯器 (IME) 內建語言分析