Creating Your Own Web Browser on C#

Build your own C# Web Browser

In this section, we'll show you how to build your own custom browser in C# .NET.
Create a new project for this. Make your new Form nice and big. In the toolbox, locate the TabControl, which is under the Containers heading:
The TabControl in the C# toolbox
Add one to your form and resize it. Your form should then look like this:
A C# form with a TabControl on it
The default TabControl gives you two tabs. We only want one, though.
To delete a tab, you can select it from the properties area on the right. Click the arrow on the drop down box. Locate tabPage2 and select it:
Selecting a Tab via the Properties area
Now right click anywhere on tabPage2 except the tab header (where the TabPage2 text is). From the menu that appears, select the Delete option. If your whole TabControl disappears, click Edit > Undo from the menu bars at the top of the C# .NET software.
You should now have a TabControl with just one tab. Select this tab from the drop down box in the properties window.

The WebBrowser Control

Adding a Browser to a Tab is quite easy. Locate the WebBrowser control in the toolbox, in the Common Controls category (we've chopped a few controls out, in the image below):
The WebBrowser control in the C# .NET toolbox
Click the control once to select it. Now draw out a browser in your TabPage1. It should fill the whole tab, and look like this:
A WebBrowser control drawn on a  TabControl, C# .NET 2012
The web browser you have just added is an instance of Internet Explorer. It will take the same settings as those from the Internet Options dialogue box in your control panel. So, for example, if you have scripting turned on in Internet Options, it will still be turned on in the WebBrowser control you have just added to the tab.
To see if it works as a browser, though, add a text box and button to your form. Change the Name of the text box to txtAddress, and type a web address for the Text property. Change the Name property of the button to btnGo, and the Text to GO. Aim for something like this:
A textbox and button added to the form
Now double click your new button to get at the code stub.
The WebBrowser control has a method called Navigate. You use it to navigate to a web page that you specify. So add these two lines to your button code:
string WebPage = txtAddress.Text.Trim();
We're just getting the web page address from the text box. You would need to do some error checking here, though, testing for things like blank strings and valid web addresses.
The page you want to navigate to goes between the round brackets of the Navigate method. And that's it!
Test it out. Run your programme and click your button. You should find that the web page that you typed in the text box appears in the web browser that you placed on TabPage1. If it doesn't, make sure that you're online and that your firewall is not blocking your C# .NET software. Here's what ours looks like:
A web page displayed in a WebBrowser control

Naviagtion Buttons and C# .NET Image Lists

We'll add some navigation buttons, now. The buttons we'll add will allow us to go back one page, move forward one page, go to the home page, cancel the page loading, and refresh the page. Instead of having text on our buttons, we'll have images.
For the button images, we'll have an ImageList that will allow us to select a picture for all the buttons on the form.
You'll need some images for your buttons. We're using the free icon set from this web page:
The images are all PNG files. If the above link no longer works, try Googling the term "free icons" (with the quote marks). Or search your hard drive for suitable images. You can search for files that end in, say, GIF by entering *.gif in the Windows search box. Go for an image size no bigger than 64 pixels high by 64 pixels wide. Image types supported by the ImageList control are JPEG, GIF, BMP, PNG and ICO.
So, add an ImageList control to your project (under the Components category in the toolbox).
The ImageList has a ColorDepth property that we need to change. Our images are in the PNG-24 format, where the 24 stands for the number of bits. You'd think, then, that we'd need to set the ColorDepth to 24Bit. However, they look awful at this Depth. When we switch to 32Bit, they look fine! But if your images look awful, change the ColorDepth property.
The ColorDepth property of the ImageList control
To add images to your image list, click the Images button in the Properties area, just to the left of Collection, in the image below:
The Images Collection of the ImageList control
When you click the small button, you'll see a dialogue box appear. Click the Add button to add some image to your ImageList. We've added five to ours, in the image below:
The Images Colleciton Editor
(We're using the light bulb as a refresh icon.) Click OK when you're done.
Our images are 32 pixels high by 32 pixels wide. We can change to that size in the ImageList properties area. The default is to have the images 16 by 16. Type the new size into the ImageSize property, if you need to:
The ImageSize Collection of the ImageList control

Graphic Buttons

Adding graphics to your buttons is quite easy. Add a button to your form, using the toolbox area on the left. Change the Name property to btnBack. Delete the default text from the Text property of the button, leaving it blank. Resize your button to a suitable size.
To add an image from your ImageList, locate the ImageList property for btnBack. From the dropdown box, select the name of your ImageList:
The ImageList property of a button
Now locate the ImageIndex property. Click the dropdown box and you'll see a list of all your available images. Select the image you're going to use for your Back button. We're using a left-pointing green arrow for ours, which has the ImageIndex of 0:
Selecting an Image to go on a Windows Forms button
Once you've selected an image, take a look at your button. It should have your picture on it:
An Image on a Windows Form button, C# 2012
The code for the back button is quite simple. So double click your button to get at the coding window. Add the following:
if (webBrowser1.CanGoBack)

We're using an if statement first to check whether there is a page to go back to. This is done with the CanGoBack property of the WebBrowser object.
If there is a page to go back to, we then use the built-in GoBack function. This will force the browser to go back to the page you were previously looking at.
Add four more buttons to your Form. Set up the following properties for your buttons:

Name: btnForward
Image: An image of your choice

Name: btnHome
Image: An image of your choice

Name: btnStop
Image: An image of your choice

Name: btnRefresh
Image: An image of your choice

When you're done, your form may look something like ours:
Image Buttons on a C# Form
Test out your programme, though. Navigate to a web page like Google. Enter something in the search page, just so as to bring up a second page. Now click your Back button. You should be taken back to the previous page.
Below, you'll find four pieces of code. Add the right code to the appropriate button:

if (webBrowser1.CanGoForward)

webBrowser1.Stop( );
webBrowser1.GoHome( );
webBrowser1.Refresh( );
So you're adding code to each of your remaining four buttons. When you're done, all four buttons should work, when you run your programme.

Adding ToolTips in C# .NET

When you hold your mouse over a button, it would be nice to have a ToolTip display. The ToolTip will tell the user what the button does. Sadly, adding a ToolTip is not quite as straightforward as it should be. But what we want to add looks like this (the yellow box in the image below):
A ToolTip on a Windows Form button., C# 2012
To get ToolTips, you need to create a ToolTip object. You then pass it the name of the form object you want the ToolTip for, and the text you want to display.
The ToolTip control can be added using the toolbox. It's under the Common Controls category.
Double click to add one to your project, and you'll see it appear at the bottom of the screen, rather than on the form.
You want the text of the ToolTip to appear when the mouse is over a button. Buttons have a Hover event, so we can use that for the code.
To get to the Hover event, click on a button to select it. In the properties area on the right, click the lightning bolt icon to see a list of event. Locate the MouseHover event:
The MouseHover Event in C# .NET
Double click where it says MouseHover, and it will open up the code stub. Now enter the following code:
toolTip1.SetToolTip( btnBack, "Back One Page" );
So the ToolTip has an in-built method called SetToolTip. In between the round brackets of SetToolTip you need two things: the name of the object you want the ToolTip for, and the Text to go in the yellow box. We called our button btnBack, so that's we put as the first argument. The text comes after a comma, and in quote marks.
Run your programme and test it out. Now hold your mouse over your button and you should see your ToolTip:
A ToolTip on an Image button

Add ToolTips for your other four buttons. You can have any text you want for your ToolTips.

If you wanted to, you could have a Rollover effect for your buttons. This is when the image on the button changes when the mouse hovers over it. When you take your mouse away, it will go back to the original image. The only thing you need for your MouseHover event is this:

btnBack.Image = imageList1.Images[2];
What you're doing here is setting the Image property of the button to one of the images from your Image list, Images[2] in the code above. You can get the numbers from the dropdown list you saw earlier, for the ImageIndex property of the button. Use the MouseLeave event to reset the image to the original.