This documentation is archived and is not being maintained.

Step 2: Create a User Interface

It is now time to start building your Web browser. You will use Microsoft Visual Basic 2005 Express Edition to build the user interface (the visible part that users interact with) by adding controls from the Toolbox to the form.

The Toolbox is on the left side of Visual Studio and consists of several tabs such as Data, Components, and All Windows Forms. Inside each tab is a set of entries that represent controls or components that you can add to your application. For example, the All Windows Forms tab has entries named TextBox, Button, and CheckBox that represent controls that you can add to your application by dragging them onto the form.

video For a video demonstration, see Video: Creating Your First Visual Basic Program.

To add controls to your application

  1. Click the Toolbox panel.

    The Toolbox opens.


    The Toolbox is easier to use if you keep the window open. You can do this by clicking the Auto Hide icon, which looks like a push pin.

  2. Click the All Windows Forms tab of the Toolbox, select the Panel control, and then drag a panel onto the top-left corner of the form.


    If you have difficulty finding the correct control, right-click on the Toolbox and then select Sort Items Alphabetically.

  3. From the same tab, drag a Button control and place it on top of the Panel.


    You can reposition controls using a drag-and-drop operation. You can also resize controls by clicking and dragging the edge or corner of the control.

  4. From the same tab, drag a TextBox control and place it on top of the Panel.

  5. Finally, from the All Windows Forms tab, select a WebBrowser control and place it below the Panel.


    If you kept the Toolbox window open, you may want to close it now to give yourself more room to work. You can do so by clicking the Auto Hide icon again.

You just added four controls to the form. Controls contain code that defines what the controls look like and what tasks they can perform.

Take, for example, the Button control—almost every program has an "OK" button or an "Exit" button. While you could write your own code to draw a button on the screen, change its appearance when it is pressed, and perform some task when it is clicked, doing so for every program would quickly become tedious. The Button control already contains the code necessary to do these things, saving you a lot of unnecessary work.

As you can see, the Toolbox contains many controls, and each control has a unique purpose. Panel controls can be used to hold other controls, such as the ones you just added. Button controls are typically used to perform tasks when the user clicks them, for example, closing the program. TextBox controls are used to enter text on a screen through the keyboard. A WebBrowser control provides built-in Web-browsing capabilities similar to Internet Explorer—you certainly wouldn't want to write all the code for that!

In upcoming lessons you will learn how to customize the appearance of these and many other controls, as well as how to write code that defines their behavior. In addition to using the Toolbox controls, you can also create your own controls known as user controls—these are also covered in an upcoming lesson.

You just added all the necessary controls for your application. It probably looks rough and unfinished—because it is! In the next lesson, you will use the Properties window to set the properties that will control the look and feel of your application.

Next Lesson: Step 3: Customize Looks and Behavior