How to Build a Metro-Style Web Browser with Tabs in C#

By FoxLearn 11/20/2024 1:28:24 PM   7.28K
Creating a Metro-style web browser with tabs using the Modern UI in C# is a fun project that incorporates the use of Windows Forms and the WebBrowser control.

Open Visual Studio, then click New Project, then select Visual C# on the left, then Windows and then select Windows Forms Application. Name your project "MetroWebBrowser" and then click OK

Right click on your project select Manage NuGet Packages -> Search metro framework -> Install

Drag and Drop the MetroButton, MetroTextBox, MetroLink, MetroTabControl from Visual Toolbox onto your form designer, then design your metro form as shown below.

metro web browser with tabs in c#

Add code to handle your form

using System;
using System.Windows.Forms;

namespace MetroWebBrowser
{
    public partial class Form1 : MetroFramework.Forms.MetroForm
    {
        public Form1()
        {
            InitializeComponent();
        }

        // Navigate backward in the current browser tab
        private void lnkBack_Click(object sender, EventArgs e)
        {
            WebBrowser browser = metroTabControl.SelectedTab.Controls[0] as WebBrowser;
            if (browser != null)
            {
                if (browser.CanGoBack)
                    browser.GoBack();
            }
        }

        // Navigate forward in the current browser tab
        private void lnkForward_Click(object sender, EventArgs e)
        {
            WebBrowser browser = metroTabControl.SelectedTab.Controls[0] as WebBrowser;
            if (browser != null)
            {
                if (browser.CanGoForward)
                    browser.GoForward();
            }
        }

        // Navigate to the URL entered in the address bar
        private void btnGo_Click(object sender, EventArgs e)
        {
            //Go to url
            WebBrowser browser = metroTabControl.SelectedTab.Controls[0] as WebBrowser;
            if (browser != null)
                browser.Navigate(txtUrl.Text);
        }

        // Add a new tab
        private void btnNewTab_Click(object sender, EventArgs e)
        {
            NewTab();
        }

        // Create new tab with web browser control
        private void NewTab()
        {
            // Create new tab page
            TabPage tab = new TabPage();
            tab.Text = "New tab";
            metroTabControl.Controls.Add(tab);
            metroTabControl.SelectTab(metroTabControl.TabCount - 1);
            // Create new WebBrowser for that tab
            WebBrowser browser = new WebBrowser() { ScriptErrorsSuppressed = false };
            browser.Parent = tab;
            browser.Dock = DockStyle.Fill;
            browser.Navigate("https://foxlearn.com");
            txtUrl.Text = "https://foxlearn.com";
            browser.DocumentCompleted += Browser_DocumentCompleted;
        }

        // Form Load event - Initialize the first tab
        private void Form1_Load(object sender, EventArgs e)
        {
            NewTab();
        }

        // Update the tab's title to the page's title
        private void Browser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
        {
            //Set title to metro tab control
            WebBrowser browser = metroTabControl.SelectedTab.Controls[0] as WebBrowser;
            if (browser != null)
                metroTabControl.SelectedTab.Text = browser.DocumentTitle;
        }
    }
}

For each tab in the TabControl, you will need to add a new WebBrowser control dynamically when the tab is created.

You can also create a helper function GetCurrentBrowser() to avoid redundant code and to get the WebBrowser control of the selected tab.

// Helper method to get the current WebBrowser control
private WebBrowser GetCurrentBrowser()
{
    if (metroTabControl.SelectedTab != null)
    {
        return metroTabControl.SelectedTab.Controls[0] as WebBrowser;
    }
    return null;
}

Modify your lnkBack_Click event handler as follows:

private void lnkBack_Click(object sender, EventArgs e)
{
    WebBrowser browser = GetCurrentBrowser();
    if (browser != null && browser.CanGoBack)
    {
        browser.GoBack();
    }
}

The Browser_DocumentCompleted method updates the tab's title to the web page's title once the page has fully loaded.

You can also set ScriptErrorsSuppressed = true for WebBrowser controls to prevent script error dialogs from disrupting the user experience.

This example provides a functional web browser with multiple tabs, back/forward navigation, and a basic address bar.

VIDEO TUTORIAL