How to Make Your Own Web Browser in C#

If you don't like existing Web browsers, build your own.

Microsoft's Visual C# language empowers developers to create and implement applications that look, feel and function like the Windows operating system. You might think that creating a functioning Web browser is a difficult task, but you can build one quickly using C#. Simply drag and drop controls onto a form, add a little coding logic and create your own Web browser you can show family and friends.

Instructions

Add Controls to Form

1. Launch Visual Studio, and create a new Windows Forms C# project. Visual Studio places the project's files in the Solution Explorer window.

2. Click "View" to display a drop-down menu. Click "Toolbox." The toolbox opens and displays its controls.

3. Locate the "ToolStrip" control and drag it onto the form. Visual Studio places it at the top of the form.

   This "ToolStrip" control, like the ones found in other browsers, allows you to place controls such as buttons and text boxes on it.

4. Click the drop-down arrow that appears at the top of the "ToolStrip" control. A menu appears. Click "Button" to place a button on the "ToolStrip." Click the drop-down arrow again, and then click "Button." Visual Studio places a second button on the "ToolStrip."

5. Click the drop-down arrow and click "TextBox." A text box appears next to the two buttons. These buttons serve as the browser's "Back" and "Forward" buttons. The text box becomes the browser's address bar where you type URLs.

6. Click the drop-down button one more time, and click "Button" to place a button to the right of the text box. This button is the browser's "Go" button.

Add Logic to Controls

1. Right-click the first button you added, and then click "Properties" to display the "Properties" window. This window contains properties you can add to controls.

2. Locate the "Display Style" property and click the drop-down arrow next to that property. Click "Text."

3. Locate the "ToolStrip" control and drag it onto the form. Visual Studio places it at the top of the form. This "ToolStrip" control, like the ones found in other browsers, allows you to place controls such as buttons and text boxes on it.

4. Click the "Events" button at the top of the Solution Explorer, and then double-click the "Click" event. The code window opens and displays the method that handles the button's "Click" event. Paste the following code into that method:

   webBrowser1.GoBack();

   Press "F7" to return to the form.

5. Click the second button located on the "ToolStrip" control to select the button. Move to the toolbox, and click the "Properties" button to display the button's properties. Set this button's "Display Style" to "Text" as you did in the previous step. Scroll down, and type "(Forward)" in the "Text" property's text box.

6. Click the "Events" button and double-click the "Click" event to display the button's "Click" event method. Paste this code into that method.

   webBrowser1.GoForward();

   Press "F7" to return to the form.

7. Click the "textbox" control on the "ToolStrip" to select it, and move back to the "Properties" window. Locate the "Size" property. It has two values such as "100, 25". The first value defines the text box's width. Replace the first value with 300. The text box gets wider on the form.

8. Return to the "ToolStrip," and click the button to the right of the text box to select it. Move back to the "Properties" window and set that button's "Display Style" to "Text." Scroll down to the "Text" property and type "(Go)" in the text box next to that property.

9. Click the "Events" button, and then double-click the "Click" event to open the code window that displays the button's "Click" event method. Paste this code into that method. Press "F7" to return to the design view that displays the form.

Add Browser Control

1. Move to the toolbox and double-click the "WebBrowser" control to add it to the form. Visual Studio places it below the "ToolStrip."

2. Move to the "Properties" window and click the "Events" button. Locate the "DocumentCompleted" event. Double-click that event to display the code window. This window shows the WebBrowser control's "DocumentCompleted" event code. This method runs after the browser finishes loading a Web page.

3. Paste this code into that method.

   this.Text = webBrowser1.DocumentTitle;

   This code places the Web page's title into the title bar.

4. Press "F5" to run the project. Visual Studio displays the form. Type "http://www.whitehouse.gov" in the text box and click "(Go)." The browser navigates to that website.

5. Type "http://www.USA.gov" in the text box and click "(Go)." The browser navigates to the USA.gov site. Click "(Back)" to navigate backward to the previous site. Click "(Forward)" to go forward to the next site.

Tips & Warnings

• This example uses the default names that Visual Studio gives them when you create new controls. For instance, it names the text box "toolStripTextBox1." You will find it more efficient to give controls meaningful names such as "toolStripTextBoxAddressBar." This helps you identify names faster when browsing through code. If you rename a control, be sure to rename all occurrences of that namel within the project. Add additional functionality and advanced programming logic to your browser as you learn more about the WebBrowser control. Microsoft has helpful information on their website.

References

• Microsoft MSDN: WebBrowser Class (System.Windows.Forms)
• Microsoft MSDN: WebBrowser.DocumentCompleted Event (System.Windows.Forms)