Windows Forms: Chromium Embedded Framework Browser Tabs Close Button in C#

This post shows you How to Create Chromium Embedded Framework Browser Tabs Close Button using CefSharp in C# .NET Windows Forms Application.

Chromium Embedded Framework (CEF).

Chromium embedded framework is an open source framework for embedding the Chromium web browser into another application. This allows developers to add web browsing functionality to their applications, as well as the ability to use HTML, CSS and JavaScript to create application user interfaces.

It's a simple framework for embedding Chromium-based browsers in other applications.

Creating a new windows forms application project, then open your form designer. Next, drag TextBox, Button and Panel control from the visual studio toolbox to your project. then modify your UI as shown below.

Chromium Embedded Framework Browser Tabs Close Button in C#

How to use CefSharp in C#

CefSharp is an open source framework allows you to embed a chromium browser in a windows forms application. The CefSharp Chromium-based browser component (WinForms control).

CefSharp lets you embed Chromium in .NET apps. It is a lightweight .NET wrapper around the Chromium Embedded Framework. It can be used from C# or VB, or any other CLR language. CefSharp provides both WPF and WinForms web browser control implementations.

To play the demo, you need to search and install CefSharp, EasyTab from Manage Nuget Packages to your project.

Creating an AppContainer class, then make it inherits from the TitleBarTabs control.

public partial class AppContainer : TitleBarTabs
{
    public AppContainer()
    {
        InitializeComponent();
        AeroPeekEnabled = true;
        TabRenderer = new ChromeTabRenderer(this);
        Icon = Properties.Resources.chrome;
    }

    public override TitleBarTab CreateTab()
    {
        return new TitleBarTab(this)
        {
            Content = new frmMain { Text = "New Tab" }
        };
    }
}

Adding the Form_Load event handler to your main form, then add the ChromiumWebBrowser to the Panel control.

ChromiumWebBrowser browser;
private void FrmMain_Load(object sender, EventArgs e)
{
    browser = new ChromiumWebBrowser(txtUrl.Text);
    browser.Dock = DockStyle.Fill;
    this.pContainer.Controls.Add(browser);//Add browser to Panel control
}

Finally, Add the click event handler to the Go button allows you to load new website when clicking on the Go button.

private void BtnGo_Click(object sender, EventArgs e)
{
    browser.Load(txtUrl.Text);
}

Similarly, Add the KeyPress event handler to the TextBox control allows you to load new website when you entering URL from the TextBox control.

private void TxtUrl_KeyPress(object sender, KeyPressEventArgs e)
{
    if (e.KeyChar == (char)13)//enter key
        browser.Load(txtUrl.Text);
}

Open the Program class, then modify your code allows you to open the chromium browser in new tab control as shown below.

static void Main()
{
    Application.EnableVisualStyles();
    Application.SetCompatibleTextRenderingDefault(false);
    //Application.Run(new frmMain());
    AppContainer container = new AppContainer();
    container.Tabs.Add(new EasyTabs.TitleBarTab(container)
    {
        Content = new frmMain
        {
            Text = "New Tab"
        }
    });
    container.SelectedTabIndex = 0;
    TitleBarTabsApplicationContext applicationContext = new TitleBarTabsApplicationContext();
    applicationContext.Start(container);
    Application.Run(applicationContext);
}

Don't forget to select the cpu target to x64 or x86 when rebuilding your project based on your windows version.

Through the c# example above, you've learned how to use cefsharp (chromium embedded framework c#) to create a simple web browser based on the chromium framework in windows forms application using c# .net.

VIDEO TUTORIAL