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:
Add one to your form and resize it. Your form should then look like this:
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:
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):
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:
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:
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();
webBrowser1.Navigate(WebPage);
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:
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.
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:
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:
(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:
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:
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:
Once you've selected an image, take a look at your button. It should have your picture on it:
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)
{
webBrowser1.GoBack();
}
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.
Exercise
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:
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.
Exercise
Below, you'll find four pieces of code. Add the right code to the appropriate button:
if (webBrowser1.CanGoForward)
{
webBrowser1.GoForward();
}
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):
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:
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:
Exercise
Add ToolTips for your other four buttons. You can have any text you want for your ToolTips.
Exercise
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.
Comments
Post a Comment