您现在的位置：程式碼之家 >> 編程語言 > >> C語言 >> VC >> 關於VC++

使用 Visual C++ 打造專屬 IE 風格瀏覽器：ReBar、工具列、收藏夾整合完整實作

編輯：關於VC++

前言

Internet Explorer 的介面風格（扁平工具列、下拉箭頭按鈕、地址列、動畫圖示、收藏夾整合）深受使用者喜愛。本文示範如何利用 MFC CHtmlView、CReBar、CToolBar、CComboBoxEx 等類別，從零建立一個具備 IE 風格介面與功能的瀏覽器專案。

專案架構與關鍵類別

專案類型：單文件文檔 (SDI)，檢視類別基底改為 CHtmlView。
主視窗框架 CMainFrame 管理：CReBar (容器)、CToolBar (扁平風格)、CComboBoxEx (地址列)、CAnimateCtrl (動畫)、CStatusBar、CImageList (熱點/一般圖示)。
資源：兩組工具列位圖 (一般/熱點)、AVI 動畫資源。

核心實作：CMainFrame::OnCreate


int CMainFrame::OnCreate(LPCREATESTRUCT lpCreateStruct) {
    if (CFrameWnd::OnCreate(lpCreateStruct) == -1) return -1;

    // 1. ReBar 容器
    if (!m_wndReBar.Create(this)) return -1;

    // 2. 扁平工具列 (必須用 CreateEx + ModifyStyle)
    if (!m_wndToolBar.CreateEx(this)) return -1;
    m_wndToolBar.GetToolBarCtrl().SetButtonWidth(50, 150);
    m_wndToolBar.GetToolBarCtrl().SetExtendedStyle(TBSTYLE_EX_DRAWDDARROWS);

    // 3. 圖示清單：熱點圖示 + 一般圖示
    CImageList img;
    img.Create(IDB_HOTTOOLBAR, 22, 0, RGB(255,0,255));
    m_wndToolBar.GetToolBarCtrl().SetHotImageList(&img); img.Detach();
    img.Create(IDB_COLDTOOLBAR, 22, 0, RGB(255,0,255));
    m_wndToolBar.GetToolBarCtrl().SetImageList(&img); img.Detach();

    m_wndToolBar.ModifyStyle(0, TBSTYLE_FLAT | TBSTYLE_TRANSPARENT);
    m_wndToolBar.SetButtons(NULL, 9); // 9 個按鈕

    // 4. 設定每個按鈕：命令 ID、風格、圖示索引、文字
    CString str;
    m_wndToolBar.SetButtonInfo(0, ID_GO_BACK, TBSTYLE_BUTTON, 0);
    str.LoadString(IDS_BACK); m_wndToolBar.SetButtonText(0, str);
    // ... 依序設定 Forward, Stop, Refresh, Home, Search ...
    // 收藏夾按鈕加入下拉風格
    m_wndToolBar.SetButtonInfo(6, ID_FAVORITES_DROPDOWN,
                               TBSTYLE_BUTTON | TBSTYLE_DROPDOWN, 6);
    str.LoadString(IDS_FAVORITES); m_wndToolBar.SetButtonText(6, str);
    // 字型按鈕同樣下拉
    m_wndToolBar.SetButtonInfo(8, ID_FONT_DROPDOWN,
                               TBSTYLE_BUTTON | TBSTYLE_DROPDOWN, 8);
    str.LoadString(IDS_FONT); m_wndToolBar.SetButtonText(8, str);

    // 5. 按鈕/圖示尺寸
    CRect rc; m_wndToolBar.GetItemRect(0, &rc);
    m_wndToolBar.SetSizes(rc.Size(), CSize(30,20));

    // 6. 地址列 (CComboBoxEx)
    m_wndAddress.Create(CBS_DROPDOWN | WS_CHILD, CRect(0,0,200,120), this, AFX_IDW_TOOLBAR+1);

    // 7. 動畫控制項
    m_wndAnimate.Create(WS_CHILD|WS_VISIBLE, CRect(0,0,10,10), this, AFX_IDW_TOOLBAR+2);
    m_wndAnimate.Open(IDR_MFCAVI);

    // 8. 加入 ReBar
    m_wndReBar.AddBar(&m_wndToolBar);
    m_wndReBar.AddBar(&m_wndAnimate, NULL, NULL, RBBS_FIXEDSIZE|RBBS_FIXEDBMP);
    str.LoadString(IDS_ADDRESS);
    m_wndReBar.AddBar(&m_wndAddress, str, NULL, RBBS_FIXEDBMP|RBBS_BREAK);

    // 9. 工具列提示風格 + 狀態列
    m_wndToolBar.SetBarStyle(m_wndToolBar.GetBarStyle() | CBRS_TOOLTIPS|CBRS_FLYBY|CBRS_SIZE_FIXED);
    if (!m_wndStatusBar.Create(this) || !m_wndStatusBar.SetIndicators(indicators, ...)) return -1;

    // 10. 建立收藏夾選單 (從登錄檔讀取)
    BuildFavoritesMenuFromRegistry();
    return 0;
}

工具列下拉選單處理 (TBN_DROPDOWN)


void CMainFrame::OnDropDown(NMHDR* pNMHDR, LRESULT* pResult) {
    NMTOOLBAR* pNM = (NMTOOLBAR*)pNMHDR;
    CRect rc; m_wndToolBar.GetToolBarCtrl().GetRect(pNM->iItem, &rc);
    rc.top = rc.bottom;
    ClientToScreen(pNM->hdr.hwndFrom, &rc.TopLeft());

    if (pNM->iItem == ID_FONT_DROPDOWN) {
        CMenu menu; menu.LoadMenu(IDR_FONT_POPUP);
        menu.GetSubMenu(0)->TrackPopupMenu(TPM_LEFTALIGN|TPM_LEFTBUTTON, rc.left, rc.top+1, AfxGetMainWnd());
    } else if (pNM->iItem == ID_FAVORITES_DROPDOWN) {
        GetMenu()->GetSubMenu(3)->TrackPopupMenu(TPM_LEFTALIGN|TPM_LEFTBUTTON, rc.left, rc.top+1, AfxGetMainWnd());
    }
    *pResult = TBDDRET_DEFAULT;
}

地址列操作：Enter 鍵與下拉選取


// Enter 鍵 (IDOK)
void CMainFrame::OnNewAddressEnter() {
    CString str; m_wndAddress.GetEditCtrl()->GetWindowText(str);
    ((CMfcieView*)GetActiveView())->Navigate2(str, 0, NULL);
    COMBOBOXEXITEM item = {CBEIF_TEXT, -1, (LPTSTR)(LPCTSTR)str};
    m_wndAddress.InsertItem(&item);
}

// 下拉選取 (CBN_SELENDOK)
void CMainFrame::OnNewAddress() {
    CString str; m_wndAddress.GetLBText(m_wndAddress.GetCurSel(), str);
    ((CMfcieView*)GetActiveView())->Navigate2(str, 0, NULL);
}

收藏夾選單動態建立 (登錄檔讀取)

讀取 HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\User Shell Folders\Favorites 路徑，遞迴掃描 *.url 檔案，用 GetPrivateProfileString 解析 URL，建立主選單與子選單，命令 ID 範圍 0xE00~0xFFF。


void CMainFrame::OnFavorite(UINT nID) {
    ((CMfcieView*)GetActiveView())->Navigate2(m_astrFavoriteURLs[nID-0xE00], 0, NULL);
}

CHtmlView 事件與導覽控制

OnBeforeNavigate2：啟動動畫 m_wndAnimate.Play(0,-1,-1)。
OnDocumentComplete：更新地址列文字、停止動畫 m_wndAnimate.Stop(); Seek(0)。
工具列按鈕對應 GoBack(), GoForward(), Stop(), Refresh(), GoHome(), GoSearch()。
字型大小透過 ExecWB(OLECMDID_ZOOM, ...) 設定縮放等級 0~4。