[Dylan]

In this tutorial, I will be showing you how easy it is to create a multi-tabbed web browser (VB TABBED WEB BROWSER) in Visual Basic. I will most likely be adding more to this tutorial as time goes on.

I needed a multi-tabbed web browser for one of my projects. I searched around on the internet for one that was already made to save time but all I found was custom controls that were not, from a developer point, intuitive and easy to implement in an existing solution. Most of them were bloated with junk. So I decided to make my own.

Here's an easy way to create a simple, yet clean, web browser that supports tabs.

Sections:
I. Building the Form
II. Making Our Web Browser Navigate
III. Creating the Custom WebBrowser Control
IV. Making Our Browser Add New Tabs
V. Finishing Touches

I. Building the Form
Add some navigation buttons, a combo box, and a tab control. Instead of using text for my buttons, I will take a better approach and use images. The icon set I'm using is FamFamFam's Silk Icon Set. I will list the individual icons used at the end of this tutorial.[1] If you want a more professional feel to your web browser, set the combobox's AutoCompleteSource to HistoryList and AutoCompleteMode to Suggest. When you add your tab control you're going to want to remove the two TabPages that are automatically added to your tab control.

Here's what my form looks like so far:



II. Making Our Web Browser Navigate
The best way to keep our web browser's linked to each tab page, we will use the Control.Tag property. If you're unfamiliar with the Control.Tag property, you may want to read this. When we press the Back button on our browser, how will our program know which web browser to navigate back. We will tell it which one to invoke based on the selected TabPage's Tag property. Here is our code for the navigation.

	Private Sub btnBack_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnBack.Click
			   Dim WB As CustomBrowser = Me.TabControl1.SelectedTab.Tag
			   WB.GoBack()
		   End Sub
	   
		   Private Sub btnForward_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnForward.Click
			   Dim WB As CustomBrowser = Me.TabControl1.SelectedTab.Tag
			   WB.GoForward()
		   End Sub
	   
		   Private Sub btnRefresh_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnRefresh.Click
			   Dim WB As CustomBrowser = Me.TabControl1.SelectedTab.Tag
			   WB.Refresh()
		   End Sub
	   
		   Private Sub btnStop_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnStop.Click
			   Dim WB As CustomBrowser = Me.TabControl1.SelectedTab.Tag
			   WB.Stop()
		   End Sub
	   
		   Private Sub btnAddTab_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnAddTab.Click
			   AddTab("about:blank", TabControl1)
		   End Sub
	   
		   Private Sub btnGo_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnGo.Click
			   Dim WB As CustomBrowser = Me.TabControl1.SelectedTab.Tag
			   WB.Navigate(Me.cbUrl.Text)
		   End Sub

Ignore the AddTab(String, TabControl) method for now. We will get back to that.

III. Creating the Custom Web Browser Control
Since we're going to be creating new web browsers on the fly, we're going to have to create a custom web browser just to handle two things; suppress script errors and to change the TabPage's text to the web browser's document title. Just create a new class but make sure you inherit the System.Windows.Forms.WebBrowser class so it's basically like an extended web browser control. Here's the code for our custom web browser.

Public Class CustomBrowser
		   Inherits WebBrowser
	   
		   Private Sub DocCompleted() Handles Me.DocumentCompleted
			   Dim TP As TabPage = Me.Tag
			   If Me.DocumentTitle.Length > 10 Then
				   TP.Text = Me.DocumentTitle.Substring(0, 9) & "..."
			   Else
				   TP.Text = Me.DocumentTitle
			   End If
	   
			   Me.ScriptErrorsSuppressed = True
		   End Sub
	   End Class

IV. Making Our Browser Add New Tabs
This is actually a lot easier than you may think. We will just add a new TabPage to the TabControl, create a new instance of our CustomBrowser control, tag them up, and navigate the newly created CustomBrowser control. Here's our AddTab(String, TabControl) method.

	Public Sub AddTab(ByRef URL As String, ByRef TabControl As TabControl)
			   Dim NewBrowser As New CustomBrowser
			   Dim NewTab As New TabPage
			   NewBrowser.Tag = NewTab
			   NewTab.Tag = NewBrowser
			   TabControl.TabPages.Add(NewTab)
			   NewTab.Controls.Add(NewBrowser)
			   NewBrowser.Dock = DockStyle.Fill
			   NewBrowser.Navigate(URL)
		   End Sub

V. Finishing Touches
If you remember, we removed all of the default tabs in our TabControl. On you're Form's load event, you're going to have to call the AddTab(String, TabControl) function.

The final project is attached as a zip file below.

[1] Images used: arrow_back.png, arrow_forward.png, arrow_refresh.png, stop.png, tab_add.png, accept.png.

Attached File(s)

•  VB_Tabbed_Web_Browser.zip (138.52K)
  Number of downloads: 1192

[DeathKindler]

Note: I advise that you have the ComponentFactory's Krypton Button that Dylan has listed before you download this project.
It will save you quite a bit of trying to debug the Form Designer code since it can't find the reference.

Also, I really like this tutorial Dylan. That's a really good example of adapting controls to fit your needs.

[Greywolfe]

Thanks for this tutorial, Its a great help.
Can you tell me if it is possible to add a History function into it?

Thanks,
Sean

[DeathKindler]

Quote

If you want a more professional feel to your web browser, set the combobox's AutoCompleteSource to HistoryList and AutoCompleteMode to Suggest.

Dylan includes a very simple history function using this.
You could probably use a StreamReader and StreamWriter and add one that will last, as well.

[Greywolfe]

Thanks mate, The way Dylan used doesn't seem to work.

[DeathKindler]

Greywolfe, on Jul 10 2008, 06:21 AM, said:

Thanks mate, The way Dylan used doesn't seem to work.

Well, its build off of Internet Explorer. So if you're expecting your Fire Fox or other browser history there, then your kind of out of luck. The combo box used for URL entry is the only thing that will show any kind of history, so the way Dylan had his does indeed work. Remember, this isn't meant to be a full Web Browser.

[Greywolfe]

DeathKindler, on Jul 10 2008, 11:47 AM, said:

Well, its build off of Internet Explorer. So if you're expecting your Fire Fox or other browser history there, then your kind of out of luck. The combo box used for URL entry is the only thing that will show any kind of history, so the way Dylan had his does indeed work. Remember, this isn't meant to be a full Web Browser.

Sorry, I meant to say I was wanting to implement a history function not like grabbing other browsers history, but the browser will store its own history.

Thanks,
Sean

[Dylan]

This tutorial is the first result on Google when searching "tabbed webbrowser vb.net". Awesome!

[DeathKindler]

Here's an updated version of the Source that doesn't use the ComponentFactory's Krypton Button.
It has a couple added features but not many.

Go to "about:app" for a little Easter egg like thing.

 MultiTabbed_WebBrowser_MinusKrypton.zip (147.26K)
Number of downloads: 437

EDIT: 123 GET

[Greywolfe]

DeathKindler, on Jul 11 2008, 03:03 AM, said:

Here's an updated version of the Source that doesn't use the ComponentFactory's Krypton Button.
It has a couple added features but not many.

Go to "about:app" for a little Easter egg like thing.

MultiTab...sKrypton.zip

EDIT: 123 GET

I have been implementing some of this code into my project, but can't seem to get 2 things working, The tags for the tabs. I have worked several hour trying to fix the problem with no luck.

This is the other thing I can't get working
I get this error when I try and run in debug


Thanks,
Sean

[Dylan]

Change AbsoluteUri to ToString.

[Greywolfe]

Dylan, on Jul 11 2008, 09:15 PM, said:

Change AbsoluteUri to ToString.

Just tried that and I still get the same error. Any ideas?

Thanks,
Sean

[programmer-in-training]

It's because WB.Uri = Nothing right then (you've just created it). This might happen if you're asking for the Uri too soon. Maybe Dylan can add a UriChanged event?

[Greywolfe]

I dont know if this has anything to do with the error I'm getting, but I created everything in the interface using Krypton controls apart from the ComboBox. Could this be causing it?

[DeathKindler]

Programmer is right. WB didn't get properly declared.
Your controls don't have anything to do with it.

Based on what I saw in that code snippet you changed some things that you shouldn't have.

REM Check this part of your code
AddTab("http://www.google.co.uk", TabControl2)

REM I saw you changed this, TabControl SHOULD NOT BE TabControl2, Thats what the Parameters are for!
Public Sub AddTab(ByRef URL As String, ByRef TabControl As TabControl)
		Dim NewBrowser As New CustomBrowser
		Dim NewTab As New TabPage
		NewBrowser.Tag = NewTab
		NewTab.Tag = NewBrowser
		TabControl.TabPages.Add(NewTab)
		NewTab.Controls.Add(NewBrowser)
		NewBrowser.Dock = DockStyle.Fill
		NewBrowser.Navigate(URL)
	End Sub

This is all I could see that might, "MIGHT" be causing the errors.
Don't blame me if it don't fix it, I'm working from like 20 lines of your code code.


EDIT: Went over my post, and it seemed hostile. Sorry, its been a long day.

[Greywolfe]

Everything I put instead of Tabcontrol2 get the blue zig zag line under neath it.

[DeathKindler]

Greywolfe, on Jul 11 2008, 07:43 PM, said:

Everything I put instead of Tabcontrol2 get the blue zig zag line under neath it.

I meant within this sub.

Public Sub AddTab(ByRef URL As String, ByRef TabControl As TabControl)
		Dim NewBrowser As New CustomBrowser
		Dim NewTab As New TabPage
		NewBrowser.Tag = NewTab
		NewTab.Tag = NewBrowser
		TabControl.TabPages.Add(NewTab)
		NewTab.Controls.Add(NewBrowser)
		NewBrowser.Dock = DockStyle.Fill
		NewBrowser.Navigate(URL)
	End Sub

You pass TabControl2 into that sub via "AddTab(URL, TabControl)"
You want URL to be the URL you want to load, and TabControl to be the control to add to.
So if you have two tab contols and you want them both to add the same web site, you do:

AddTab("http://www,google.co.uk", TabControl1)
AddTab("http://www,google.co.uk", TabControl2)

Understand?

I doubt this really is what's causing your error, but that's how the Sub is meant to be used.

[Greywolfe]

I dont think it is causing the error because I had to resort to customizing that code because I'm using the Krypton Navigator and this was the only way I could add pages to it in runtime. Heres the full snippet of that piece of code.

    Public Sub AddPage(ByRef URL As String, ByRef KryptonNavigator As KryptonNavigator)
        Dim NewBrowser As New CustomBrowser
        Dim newPage As New KryptonPage()

        NewBrowser.Tag = newPage
        newPage.Tag = NewBrowser
        TabControl1.Pages.Add(newPage)
        newPage.Controls.Add(NewBrowser)
        NewBrowser.Dock = DockStyle.Fill
        NewBrowser.Navigate(URL)

    End Sub

[programmer-in-training]

Upload your code and I'll find it.

[DeathKindler]

Greywolfe, on Jul 11 2008, 08:16 PM, said:

I dont think it is causing the error because I had to resort to customizing that code because I'm using the Krypton Navigator and this was the only way I could add pages to it in runtime. Heres the full snippet of that piece of code.

    Public Sub AddPage(ByRef URL As String, ByRef KryptonNavigator As KryptonNavigator)
        Dim NewBrowser As New CustomBrowser
        Dim newPage As New KryptonPage()

        NewBrowser.Tag = newPage
        newPage.Tag = NewBrowser
        TabControl1.Pages.Add(newPage)
        newPage.Controls.Add(NewBrowser)
        NewBrowser.Dock = DockStyle.Fill
        NewBrowser.Navigate(URL)

    End Sub

TabControl1.Pages.Add(newPage)

That would be your problem then.
You need to change "TabControl1" to "KryptonNavigator" and update the code from there.
Every reference of "TabControl1" will need to be changed to "KryptonNavigator1" or whatever.

If you upload the code, like programmer-in-training said, then one of us could figure it out from there, then upload the corrected code.

EDIT: My reply took longer than yours, sorry.

EDIT2: Also, it would be better to upload the project instead of just the code. Makes life a little easier.