C# Web Browser With Twist!

by VeZoBeAsT in Circuits > Software

1443 Views, 16 Favorites, 0 Comments

C# Web Browser With Twist!

Screenshot 2015-04-13 19.57.09.png

This is a browser that runs in your desktop and is a Web browser that will replace Google Chrome and Firefox!

(it more than likely wont but it will be your own and you can tell people you made it)

The twist is optional and if you want to know what it is, you will have to wait until the end.

The project is designed to be quick and personal so it will not look incredible but I will leave it in your hands to create your own look and feel. I will show you how through out the instructable!

Now all you will need is Visual Studio. I am using the professional edition 2013 but almost any version will work for what I am doing including the free Express Edition. I will not tell you how to download it here because it is another instructable in itself but there are many tutorials around to teach you how and is not overly difficult in my opinion.

Without further delay lets begin coding!!

Opening the New Solution

Screenshot 2015-04-13 20.06.36.png
Screenshot 2015-04-13 20.07.09.png
Screenshot 2015-04-13 20.07.21.png

This is similar to any program e.g. Mircosofts Word, Excel, Publisher.
Go to FILE and NEW and PROJECT.


This will bring up a new window where we will select what project it is we want to create.

Here we will go to Visual C# and then to Windows Forms Application.

Once we have theses selected we can give it a name down the bottom. The rest will be fine left as the default.

Then a window will come up with a small white box in the centre of the screen. This is where we can drag and drop the layout. If you know how to use XMAL this is your time to shine and maybe you can have a look under the hood of this application but in the instructable I won't be going into too much depth on that.

Getting All the Tools

Screenshot 2015-04-13 20.19.14.png
Screenshot 2015-04-13 20.19.53.png

Drag from your toolbox on the right of your screen a Button, a TextBox and a WebBrowser.

These you can resize to your own needs and where ever you fell you like them. It is your browser after all.

Coding It Out

Screenshot 2015-04-13 20.53.33.png
Screenshot 2015-04-13 20.53.36.png
Screenshot 2015-04-13 20.54.20.png

Double click on one the the tools we have just dragged on to the screen and it will bring you to where we will begin coding!

Most of this will be here when you arrive but you will have to make yours look like this.

The only things your code does not have to have in the writing in green. These are comments put there by me so hopefully you can understand the code you are churning out as you go along. Comments are a good idea especially when your projects get big so you know what everything does. They are denoted by // then anything after that is a comment.

This is the bare bones of what you need to make it work. If you have absolutely everything here then it should work for you. Remember computers don't tolerate mistakes one letter or punctuation mark out and it will not work so be warned!

Setting Up the Properties on Your Tools

Screenshot 2015-04-13 20.54.50.png
Screenshot 2015-04-13 20.55.17.png

To anchor these things in place when you resize the window you need click on one of the tools and look down the bottom under the properties window for Anchor. If you click this it will bring up a small little box such as the one photographed.

By clicking on the grey tabs you can decide where the tool will be affected from. I encourage playing around with this.

Do the same for all three of the tools.

The next thing to do is change the ugly button name we have. In the same menu as the last property scroll down to Text and change it to what ever you like.

***To go back to this tab click the tabs up the top that say Form1.cs and Form1.cs [design] ***

Your All Set

Screenshot 2015-04-13 20.57.15.png

Now provided you don't want to see the twist your all done. Press F5 on your keyboard or look up the top for the Start button. This will run the debugger and you can hold your breath to see if it works. If it gives you errors try to look back at this example and see if it matches perfectly.

If it does work then congratulations you can type in an address and press the search button and fly away with searching to your hearts content.

But wait I promised a twist, well that's in the next step hold on!

The Finale, the Twist

Screenshot 2015-04-13 19.57.09.png
Screenshot 2015-04-13 21.34.24.png

You can if you where that way inclined make every image ever all cats(or any picture you wanted but why not cats?) I found this really cool and nifty so this is how you do it.....

it involves more code so follow the photo and change the code to this! The difference is highlighted!

change the image url in here!!!! to the url of the photo inside the "" marks

So after that adventure I hope this worked for you and if you have any questions post a comment or link a screen shot or email me and ask me killermoobs@gmail.com

Hope you all like it!