WebBrowser Control Example
A Tabbed Interface Web Browser
One of the most anticipated new features of Internet Explorer 7 is the new tabbed interface. Rather than opening a new window for each new page that you want to look at, Internet Explorer 7 allows multiple tabbed pages to exist in a single browsing window; switching from page to page is easy, and it's much easier to see which pages are loaded. As I write this, Internet Explorer 7 is in an early beta.
Even though at this time Internet Explorer 7 isn't available, I still like the concept of tabbed pages. Therefore, by using the members of the WebBrowser control, in addition to several other Windows Forms controls, I was able to create a simple form that does exactly what Internet Explorer 7 does. Figure 8-4 shows the form in action, with the Microsoft home page, the Microsoft Learning home page, and the MSN home page loaded on separate tabs.
Figure 8-4: The tabbed Web browser example
Across the top of the form in Figure 8-4, notice the ToolStrip control. The ToolStrip control can contain any number of other controls. I added the following controls to the ToolStrip control:
-
Back A button used to move the WebBrowser control in the current tab to the previous page in the browser history, if there is one.
-
Forward A button used to move the WebBrowser control in the current tab to the next page in the browser history, if there is one.
-
Refresh A button used to reload the current page in the WebBrowser control on the current tab.
-
Address A text box used to enter the address of a new Web page.
-
Go! A button used to load the address entered in the Address text box into the WebBrowser control on the current tab.
-
Go in New Tab A button used to load the address entered in the Address text box into a new WebBrowser control on a new tab.
-
Close Tab A button used to close the current tab.
Just under the ToolStrip control, I dropped a TabControl onto the page. A TabControl creates a tabbed user interface, which is just what we need to simulate Internet Explorer 7. I set the Dock property of the TabControl to Fill, so that the TabControl fills the rest of the form. By default, the TabControl has two tabs when dropped on a form. I deleted one of those tabs, and I changed the Text property of the remaining tab to "Default." With the TabControl selected in Design view, I dropped a WebBrowser control onto the TabControl. This is the initial WebBrowser control used when the page is first loaded.
A reasonable amount of code is required to get this form up and running as described. The code is shown in Listing 8-1.
Listing 8-1: Code Used for the Tabbed Web Browser
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; namespace WindowsWebAccess { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void btnGo_Click(object sender, EventArgs e) { WebBrowser wb = (WebBrowser)this.tabControl1.SelectedTab.Controls[0]; wb.Navigate(this.edAddress.Text); } private void webBrowser1_Navigated(object sender, WebBrowserNavigatedEventArgs e) { this.edAddress.Text = ((WebBrowser)sender).Url.ToString(); this.tabControl1.SelectedTab.Text = this.edAddress.Text; } private void btnGoNewTab_Click(object sender, EventArgs e) { WebBrowser wb = new WebBrowser(); string key = Guid.NewGuid().ToString(); wb.Dock = DockStyle.Fill; wb.Name = key; wb.Navigated += new System.Windows.Forms.WebBrowserNavigatedEventHandler( this.webBrowser1_Navigated); this.tabControl1.TabPages.Add(key, this.edAddress.Text); this.tabControl1.TabPages[key].Controls.Add(wb); ((WebBrowser)this.tabControl1.TabPages[key].Controls[0]) .Navigate(this.edAddress.Text); this.tabControl1.SelectTab(key); } private void btnCloseTab_Click(object sender, EventArgs e) { this.tabControl1.TabPages.Remove(this.tabControl1.SelectedTab); } private void btnBack_Click(object sender, EventArgs e) { WebBrowser wb = this.tabControl1.SelectedTab.Controls[0] as WebBrowser; if (wb != null) { wb.GoBack(); } } private void btnForward_Click(object sender, EventArgs e) { WebBrowser wb = this.tabControl1.SelectedTab.Controls[0] as WebBrowser; if (wb != null) { wb.GoForward(); } } private void btnRefresh_Click(object sender, EventArgs e) { WebBrowser wb = this.tabControl1.SelectedTab.Controls[0] as WebBrowser; if (wb != null) { wb.Refresh(); } } } }
The btnGo_Click event handler has two lines of code that retrieve the correct WebBrowser object, and another that sets the new URL.
WebBrowser wb = (WebBrowser)this.tabControl1.SelectedTab.Controls[0]; wb.Navigate(this.edAddress.Text);
This event handler replaces the current Web page in the currently selected tab with the URL entered in the Address text box. To get the correct WebBrowser control, I examined the Controls collection of the SelectedTab property of the TabControl object, and I selected the first and only element of the Controls collection of that tab. Because the Controls collection is a collection of Control objects, it must be cast to the correct type. After the correct WebBrowser control is found, the Navigate method is called, passing in the string entered in the Address text box.
The btnGoNewTab_Click event is a bit more complex. The code is shown here.
WebBrowser wb = new WebBrowser(); string key = Guid.NewGuid().ToString(); wb.Dock = DockStyle.Fill; wb.Name = key; wb.Navigated += new System.Windows.Forms.WebBrowserNavigatedEventHandler( this.webBrowser1_Navigated); this.tabControl1.TabPages.Add(key, this.edAddress.Text); this.tabControl1.TabPages[key].Controls.Add(wb); ((WebBrowser)this.tabControl1.TabPages[key].Controls[0]) .Navigate(this.edAddress.Text); this.tabControl1.SelectTab(key);
