Open Visual Studio or Visual C# which ever one you have >.< In this tut I am using Visual Studio 2010.
First create a new project and name it whatever you want :unsure:
[slide]http://i.imgur.com/0Yu2j.png[/slide]
Single click on the Form1 and replace it with any name you want to give to the webbrowser.
[slide]http://i.imgur.com/NES0s.png[/slide]
Now add a ToolStrip. ToolStrip is found in the ToolBox in Menu and Toolbars tab.
[slide]http://lulzimg.com/i13/8de36e.png[/slide]
Add a WebBrowser into the Form below the tools strip and make it to the size you want, after which the form will look like the one below.
[slide]http://lulzimg.com/i13/b44037.png[/slide]
[slidehttp://lulzimg.com/i13/e8a9fa.png[/slide]
Time to add some Buttons to the toolbar for the web browser controls. Click on the ToolStrip placed in the form and a little blue box will appear to the left end of the tool strip. Click on the blue box that appears and a picture button will popup and do this for 5 picture boxes and then click on the down arrow and select text box. After this add one more picture box at the end.
This is how it will look finally
[slide]http://i.imgur.com/I7vBc.png[/slide]
1 Picture Box - Back
2 Picture Box - Forward
3 Picture Box - Home
4 Picture Box - Stop
5 Picture Box - Refresh
6 Picture Box - GO
TextBox - URL
Now that the basic things are done with, you should add the corresponding icons to the picture boxes. This can be done by right clicking on the picture box and then Set Image.
[slide]http://i.imgur.com/31dyl.png[/slide]
I just added some random icons to this and it will look like the below image
[slide]http://i.imgur.com/x1j32.png[/slide]
Now I also wish to change the icon of the browser too :P I am kinda crazy. So the control is over here. Always remember you should have an .ico file for this.
[slide]http://i.imgur.com/KZKSw.png[/slide]
So finally, here is the basic look of the web browser we made till now. B)
[slide]http://i.imgur.com/xlvcN.png[/slide]
Now coming to the controls and the coding part. You may wonder itz gonna be difficult or something but this is the simplest part ever and the most easiest part which u can do in less than five minutes and get the browser on the go :P
Double click the back button on the tool strip and add this code.
That does exactly what you would think it does.
OK double click the forward button on the tool strip and add this code.
Now double click the home button on the tool strip and add this code.
Now double click the stop button on the tool strip and add this code.
Then double click the refresh button on the tool strip and add this code.
Now the last thing we need to do is make our address bars text usable for the web browser to navigate with.
So what we do is add code to our Go button.
(Don't forget http:// when typing in the address bar)
That is it. Now the WebBrowser is ready to go. Build it and Use it :wub:
Herz the working one I made along with the tutorial :D
[slide]http://i.imgur.com/0OGoE.png[/slide]
This tutorial is completely written by me and the screenshots are from ma pc :-?
First create a new project and name it whatever you want :unsure:
[slide]http://i.imgur.com/0Yu2j.png[/slide]
Single click on the Form1 and replace it with any name you want to give to the webbrowser.
[slide]http://i.imgur.com/NES0s.png[/slide]
Now add a ToolStrip. ToolStrip is found in the ToolBox in Menu and Toolbars tab.
[slide]http://lulzimg.com/i13/8de36e.png[/slide]
Add a WebBrowser into the Form below the tools strip and make it to the size you want, after which the form will look like the one below.
[slide]http://lulzimg.com/i13/b44037.png[/slide]
[slidehttp://lulzimg.com/i13/e8a9fa.png[/slide]
Time to add some Buttons to the toolbar for the web browser controls. Click on the ToolStrip placed in the form and a little blue box will appear to the left end of the tool strip. Click on the blue box that appears and a picture button will popup and do this for 5 picture boxes and then click on the down arrow and select text box. After this add one more picture box at the end.
This is how it will look finally
[slide]http://i.imgur.com/I7vBc.png[/slide]
1 Picture Box - Back
2 Picture Box - Forward
3 Picture Box - Home
4 Picture Box - Stop
5 Picture Box - Refresh
6 Picture Box - GO
TextBox - URL
Now that the basic things are done with, you should add the corresponding icons to the picture boxes. This can be done by right clicking on the picture box and then Set Image.
[slide]http://i.imgur.com/31dyl.png[/slide]
I just added some random icons to this and it will look like the below image
[slide]http://i.imgur.com/x1j32.png[/slide]
Now I also wish to change the icon of the browser too :P I am kinda crazy. So the control is over here. Always remember you should have an .ico file for this.
[slide]http://i.imgur.com/KZKSw.png[/slide]
So finally, here is the basic look of the web browser we made till now. B)
[slide]http://i.imgur.com/xlvcN.png[/slide]
Now coming to the controls and the coding part. You may wonder itz gonna be difficult or something but this is the simplest part ever and the most easiest part which u can do in less than five minutes and get the browser on the go :P
Double click the back button on the tool strip and add this code.
Code:
webBrowser1.GoBack();That does exactly what you would think it does.
OK double click the forward button on the tool strip and add this code.
Code:
webBrowser1.GoForward();Now double click the home button on the tool strip and add this code.
Code:
webBrowser1.GoHome();Now double click the stop button on the tool strip and add this code.
Code:
webBrowser1.Stop();Then double click the refresh button on the tool strip and add this code.
Code:
webBrowser1.Refresh();Now the last thing we need to do is make our address bars text usable for the web browser to navigate with.
So what we do is add code to our Go button.
Code:
webBrowser1.Navigate(toolStripTextBox1.Text);(Don't forget http:// when typing in the address bar)
That is it. Now the WebBrowser is ready to go.
Build it and Use it :wub: Herz the working one I made along with the tutorial :D
[slide]http://i.imgur.com/0OGoE.png[/slide]
This tutorial is completely written by me and the screenshots are from ma pc :-?
Last edited:
