首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> C語言 >> VC >> VC++

VC 打造 IE 風格介面:扁平工具列、下拉按鈕與地址列完整實作

     編輯:VC++

IE 風格介面核心技術解析

IE 經典介面特徵:扁平工具列、滑鼠懸停凸起熱追蹤、灰階正常圖示/彩色熱追蹤圖示、帶文字說明按鈕、下拉式按鈕(小黑三角)、地址下拉列表。本文詳解 CMainFrame::OnCreate 實作全流程。

核心架構:ReBar + ToolBar + ComboBox

  • CReBar:工具列與地址列的容器
  • CToolBar (CreateEx + ModifyStyle):實現扁平風格 (TBSTYLE_FLAT)
  • CImageList:分別載入熱追蹤圖示 (IDB_HOTTOOLBAR) 與正常圖示 (IDB_COLDTOOLBAR)
  • CComboBox (CBS_DROPDOWN):作為地址列

關鍵代碼片段與註解

int CMainFrame::OnCreate(LPCREATESTRUCT lpCreateStruct) {
    CReBar m_wndReBar; CImageList img; CString str;
    if (CFrameWnd::OnCreate(lpCreateStruct) == -1) return -1;

    // 1. 建立 ReBar 容器
    if (!m_wndReBar.Create(this)) { TRACE0("Failed to create rebar\n"); return -1; }

    // 2. 建立工具列 (必須用 CreateEx)
    if (!m_wndToolBar.CreateEx(this)) { TRACE0("Failed to create toolbar\n"); return -1; }
    m_wndToolBar.GetToolBarCtrl().SetButtonWidth(50, 150); // 按鈕寬度範圍
    m_wndToolBar.GetToolBarCtrl().SetExtendedStyle(TBSTYLE_EX_DRAWDDARROWS); // 支援下拉箭頭

    // 3. 載入熱追蹤圖示 (滑鼠懸停時顯示)
    img.Create(IDB_HOTTOOLBAR, 22, 0, RGB(255, 0, 255)); // 22px 寬,洋紅透明色
    m_wndToolBar.GetToolBarCtrl().SetHotImageList(&img);
    img.Detach();

    // 4. 載入正常狀態圖示
    img.Create(IDB_COLDTOOLBAR, 22, 0, RGB(255, 0, 255));
    m_wndToolBar.GetToolBarCtrl().SetImageList(&img);
    img.Detach();

    // 5. 設定扁平透明風格 (繞過 CToolBar 限制)
    m_wndToolBar.ModifyStyle(0, TBSTYLE_FLAT | TBSTYLE_TRANSPARENT);
    m_wndToolBar.SetButtons(NULL, 9); // 9 個按鈕

    // 6. 逐個設定按鈕風格與文字
    m_wndToolBar.SetButtonInfo(0, ID_BUTTON0, TBSTYLE_BUTTON, 0);
    str.LoadString(IDS_BUTTON0); m_wndToolBar.SetButtonText(0, str);
    // ... 按鈕 1-5 同理 ...
    // 第 7 個按鈕帶下拉箭頭
    m_wndToolBar.SetButtonInfo(6, ID_BUTTON6, TBSTYLE_BUTTON | TBSTYLE_DROPDOWN, 6);
    str.LoadString(IDS_BUTTON6); m_wndToolBar.SetButtonText(6, str);
    // 第 9 個按鈕帶下拉箭頭
    m_wndToolBar.SetButtonInfo(8, ID_BUTTON8, TBSTYLE_BUTTON | TBSTYLE_DROPDOWN, 8);
    str.LoadString(IDS_BUTTON8); m_wndToolBar.SetButtonText(8, str);

    // 7. 調整按鈕尺寸
    CRect rectToolBar;
    m_wndToolBar.GetItemRect(0, &rectToolBar);
    m_wndToolBar.SetSizes(rectToolBar.Size(), CSize(30, 20)); // 按鈕大小、圖示大小

    // 8. 建立地址列下拉框
    if (!m_wndAddress.Create(CBS_DROPDOWN | WS_CHILD, CRect(0,0,200,120), this, AFX_IDW_TOOLBAR + 1))
        { TRACE0("Failed to create combobox\n"); return -1; }

    // 9. 加入 ReBar 頻帶
    m_wndReBar.AddBar(&m_wndToolBar);
    str.LoadString(IDS_ADDRESS);
    m_wndReBar.AddBar(&m_wndAddress, str, NULL, RBBS_FIXEDBMP | RBBS_BREAK); // 換行顯示

    // 10. 設定頻帶理想尺寸
    REBARBANDINFO rbbi; rbbi.cbSize = sizeof(rbbi);
    rbbi.fMask = RBBIM_CHILDSIZE | RBBIM_IDEALSIZE | RBBIM_SIZE;
    rbbi.cxMinChild = rectToolBar.Width(); rbbi.cyMinChild = rectToolBar.Height();
    rbbi.cx = rbbi.cxIdeal = rectToolBar.Width() * 9;
    m_wndReBar.GetReBarCtrl().SetBandInfo(0, &rbbi); // 工具列頻帶

    rbbi.cxMinChild = 0;
    CRect rectAddress; m_wndAddress.GetEditCtrl()->GetWindowRect(&rectAddress);
    rbbi.fMask = RBBIM_CHILDSIZE | RBBIM_IDEALSIZE;
    rbbi.cyMinChild = rectAddress.Height() + 10; rbbi.cxIdeal = 200;
    m_wndReBar.GetReBarCtrl().SetBandInfo(2, &rbbi); // 地址列頻帶

    // 11. 狀態列建立
    m_wndToolBar.SetBarStyle(m_wndToolBar.GetBarStyle() | CBRS_TOOLTIPS | CBRS_FLYBY | CBRS_SIZE_FIXED);
    if (!m_wndStatusBar.Create(this) || !m_wndStatusBar.SetIndicators(indicators, sizeof(indicators)/sizeof(UINT)))
        { TRACE0("Failed to create status bar\n"); return -1; }

    return 0;
}

關鍵技術點總結

  1. 扁平風格必須用 CreateEx + ModifyStyle,CToolBar::Create/SetBarStyle 不支援 TBSTYLE_FLAT
  2. 熱追蹤圖示:SetHotImageList 設定滑鼠懸停時的彩色圖示
  3. 下拉按鈕:TBSTYLE_EX_DRAWDDARROWS 擴充風格 + TBSTYLE_DROPDOWN 按鈕風格
  4. 按鈕文字:SetButtonText 配合字串資源實現多語系
  5. 地址列:CComboBox 以 CBS_DROPDOWN 風格建立,加入 ReBar 並設 RBBS_BREAK 換行

Win2000 + VC6 編譯通過,程式碼可直接整合至專案。動手實驗即可擁有專業級 IE 風格介面!

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved