C# Web Browser Express：標籤式瀏覽器快速開發指南

前言

利用 Visual C# Express 內建的 WebBrowser 控制項，配合 TabControl，一夕之間即可打造功能完整的標籤式網頁瀏覽器。本文詳細說明介面設計、核心程式碼、事件驅動架構、搜尋整合、動畫效果與擴充建議。

介面設計：拖曳配置核心控制項

1. TabControl：Dock = Fill，自動填滿表單，每個 TabPage 承載一個 WebBrowser
2. MenuStrip：頂端工具列區域，放置導航按鈕、網址列、搜尋框
3. Buttons：上一頁、下一頁、重新整理、停止、首頁、前往
4. ComboBox (網址列)：可輸入網址，下拉顯示歷史/我的最愛
5. TextBox (搜尋框)：輸入關鍵字直接搜尋
6. PictureBox：右側顯示載入動畫
7. Timer：驅動動畫幀切換

核心程式碼實作

建立新分頁與 WebBrowser

private void CreateNewTab()
{
    // 1. 建立 TabPage
    TabPage newPage = new TabPage("Loading...");
    tabControl1.TabPages.Add(newPage);

    // 2. 建立 WebBrowser 控制項
    WebBrowser web = new WebBrowser();
    web.Parent = newPage;
    web.Dock = DockStyle.Fill; // 填滿分頁
    web.DocumentCompleted += Web_DocumentCompleted; // 訂閱完成事件
    web.GoHome(); // 導向預設首頁

    // 3. 啟動載入動畫
    timer1.Enabled = true;
}

文件載入完成事件

private void Web_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
    WebBrowser web = (WebBrowser)sender;
    // 更新分頁標題為網頁標題
    TabPage page = (TabPage)web.Parent;
    page.Text = web.DocumentTitle;

    // 停止動畫
    timer1.Enabled = false;
    pictureBoxBusy.Image = null;
}

導航按鈕處理

private WebBrowser GetCurrentBrowser()
{
    return (WebBrowser)tabControl1.SelectedTab.Controls[0];
}

private void btnBack_Click(object sender, EventArgs e)
{
    WebBrowser web = GetCurrentBrowser();
    if (web.CanGoBack) web.GoBack();
}

private void btnForward_Click(object sender, EventArgs e)
{
    WebBrowser web = GetCurrentBrowser();
    if (web.CanGoForward) web.GoForward();
}

private void btnRefresh_Click(object sender, EventArgs e)
{
    GetCurrentBrowser().Refresh();
}

private void btnStop_Click(object sender, EventArgs e)
{
    GetCurrentBrowser().Stop();
}

private void btnGo_Click(object sender, EventArgs e)
{
    GetCurrentBrowser().Navigate(comboBoxUrl.Text);
    timer1.Enabled = true;
}

Enter 鍵觸發導航/搜尋

private void comboBoxUrl_KeyUp(object sender, KeyEventArgs e)
{
    if (e.KeyCode == Keys.Enter)
        btnGo_Click(sender, e);
}

private void txtSearch_KeyUp(object sender, KeyEventArgs e)
{
    if (e.KeyCode == Keys.Enter)
        btnSearch_Click(sender, e);
}

整合搜尋引擎 (以 MSN/Bing 為例)

private void btnSearch_Click(object sender, EventArgs e)
{
    string query = txtSearch.Text.Trim();
    if (string.IsNullOrEmpty(query)) return;

    string url = "https://www.bing.com/search?q=" + Uri.EscapeDataString(query);
    GetCurrentBrowser().Navigate(url);
    timer1.Enabled = true;
}

載入動畫實作

// 專案資源加入 anim0~anim9 共 10 幀圖片
int animFrame = 0;

private void timer1_Tick(object sender, EventArgs e)
{
    animFrame = (animFrame + 1) % 10;
    switch (animFrame)
    {
        case 0: pictureBoxBusy.Image = Properties.Resources.anim0; break;
        case 1: pictureBoxBusy.Image = Properties.Resources.anim1; break;
        // ... case 9
    }
}

關鍵技術點總結

擴充建議

• 歷史記錄：儲存造訪網址，下拉選單快速存取
• 自動完成：ComboBox.AutoCompleteMode + AutoCompleteSource
• 我的最愛：工具列「加入最愛」按鈕，序列化儲存至 XML/JSON
• RSS 閱讀器：整合 SyndicationFeed 解析 RSS/Atom
• 分頁右鍵選單：關閉、複製網址、另開新視窗
• 下載管理：攔截 FileDownload 事件，自訂下載對話框

結語

C# Express 的控制項生態讓複雜應用開發變得極簡單：WebBrowser 處理所有網路/渲染細節，TabControl 管理多文檔介面，Timer 驅動 UI 動畫。專注於「串接控制項」而非「造輪子」，是快速應用開發的核心心法。