Dans Tuts

Creating a VB.net web browser is an extremly simple task. So much so that it’s a great way to introduce yourself the the language. We shall be using the full version of Visual Basic .Net 2008, but the express editions will work Perfectly fine. Let’s get started shall we?

First open VB and create a new Windows Forms Application. You should name your application something that is easy to remember so you don’t forgot what the folder is called, in this example I shall name it, creatively, browser.

Now you should have a empty .Net window. Here we shall start designing our browser. Using the toolbox on the right (if you can’t see the toolbox you

can open it with control, alt and x) we want to drag over the ‘Web Browser’ Control, contained in the Common Controls box. By default the Web Browser control will take up the whole application, we want to undock it so click the browser once and find the small arrow on the top right (see image below)

And then click the ‘Undock in Parent Container’. Now we can grab the edges of the web browser control and change it’s size. Ideally we want something the web browser to leave 60 pixels on the top of the windows application. Think about the browsers you’ve used and leave that amount of space for a toolbar. When you have the size of the browser window you want we need to make it expand when the main window expands. We do this by clicking once again on the browser window, then on the right looking in the properties menu and finding anchor. Here we click the drop down box and select the bottom, left and right and top. This will force the browser to expand to the right, left, bottom and top when the main window expands. Without this the browser would just stay the same size.

Now in the space above the browser window we want to drag a Panel. You can catch the panel in the toolbox section, containers. A panel will enable us to collectively manage it’s objects, while also helping in the aspect of design. Resize the panel to hit each of the main windows edges and the very top of the browser element. You can use the arrow keys on the keyboard to align the panel. Once again we want to anchor the panel. This time we want to anchor to the top, right and left. We should now have something very much alike to what’s below

Now we want users to be able to navigate the browser to certain locations using an address bar. To insert a bar using the toolkit drag a text box into our top container. You can find the text box control in the toolbox, common controls section. We want to move the text box control to the very bottom of our container panel and expand it’s size to around 466 pixels. In the right properties menu we want to rename this text box to navbox.

Now we need to give the user something to click when he has entered the web URL, so for this we’re going to insert a button. We can once again find the button in the common section of the toolbox. Place this button next to the navigation text box. Rename the button searchbutton, then in the properties menu find the ‘Text’ element and type ‘Go’. For design aspects we will change this buttons flatstyle (once again in the properties menu) to Popup. Now resize the button to be as high as your text box.

Ok I’m sure you want to start coding now so let’s quickly move on to making your collection of form items into a browser! Double click on the Go button you’ve created and we should now be shown the code screen.

VB.net 2008 will automaticlly create some code because you double clicked on the code button, and our cursor should be contained within the Private Sub section of code. Here is where we shall start coding.

WebBrowser1.Navigate(navbox.Text)

Lets explain the above simple but powerful code. We first type WebBrowser1 which is the name of the web browser control we dragged onto the application earlier now we call a properties of the control, in this case we want to navigate the browser window, so, as one would expect we type navigate. Now we use brackets to define the value that we want to send the control. If you wanted to the browser to go to one set location you would use quation marks and then a url, for example

WebBrowser1.Navigate(“http://google.com”)

for example However we want to accept use input from our text box. Because we named this textbox navbox we can call it’s value using navbox.text. This means whatever is in the navbox at the time of the user clicking the button will be used as the value. Because it’s not a text string within the code we do not use the quotation marks.

You can now test your browser to see if you can navigate!

If all went well you will be able to navigate to any website. Because it uses the IE control if the user has flash installed the browser will be able to view flash, and do many more things IE can do. Of course our browser is not the most exciting yet is it? Lets add a few more important features for any browser!

First of all lets tackle the all important back button. Without back buttons people will be stuck on certain pages and they would not be able to use the browser effectively at all. For the back button we’re going to add yet another button the the browser, this time above the navigation box. We shall name this button backbutton and have it’s text value as ‘Back’. We shall also add a icon for a better cleaner look. To add a icon we shall click the button once and click the properties window, then find the image option. Click the … next to image which will bring up a window saying select resource and then click the import button and find your back image file. For best results use a 24×24 PNG Transparent button (I use this fantastic one). You now will need to change the TextImageRelation to ImageBeforeText. Now repeat these steps replacing back with forward and TextImageRelation to TextBefore Image.

Let’s get to coding these buttons. Double click the back button to once again return to the code window and type WebBrowser1.GoBack(), do the same for the forward button but replace GoBack with WebBrowser1.GoForward(). That’s all for this sort tutorial, on request I will expand with more features such as a search box, I would love to hear your input!

Click to download the source code!