Step 2: Create a User Interface
It is now time to start to build the Web browser. You will use Visual Basic Express 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. Don't worry too much about the size of the controls; you will learn how to customize the look of your application in the next lesson.
.gif "link to video")
For a video version of this topic, see Video How to: Creating Your First Visual Basic Program.
To add controls to your application
Click the Toolbox panel.
The Toolbox opens.
Note
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.
Click the All Windows Forms tab of the Toolbox, and then drag a Panel control to the top-left corner of the form.
Note
If you have difficulty finding the correct control, right-click the Toolbox and then select Sort Items Alphabetically.
From the same tab, drag a TextBox control and position it on top of the Panel.
Note
You can reposition controls by using a drag-and-drop operation. You can also resize controls by clicking and dragging the edge or corner of the control.
From the same tab, drag a Button control and position it on top of the Panel, to the right of the TextBox control.
Finally, from the All Windows Forms tab, select a WebBrowser control and position it under the Panel.
Note
If the WebBrowser control does not fit on the form, you can resize the form by dragging the edge or corner of the form.
Note
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.
Closer Look
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— most programs have 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 this for every program would quickly become tedious. The Button control already contains the code that is required to do these things. This saves 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 that 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 definitely 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, and 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.
Next Steps
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 appearance and behavior of your application.
Next Lesson: Step 3: Customize Looks and Behavior
See Also
Tasks
Step 1: Create a Project in Visual Basic