Step 3: Customize Looks and Behavior

Switch View

Collapse All

This page is specific to

Microsoft Visual Studio 2008/.NET Framework 3.5

Other versions are also available for the following:

Microsoft Visual Studio 2005/.NET Framework 2.0

Visual Basic Guided Tour

Step 3: Customize Looks and Behavior

In the previous lesson, you created a user interface by adding controls to your application. However, at this point it neither looks like nor functions as a finished application. In this lesson, you will set properties to control the appearance of your controls by using the Properties window.

link to video For a video version of this topic, see Video How to: Creating Your First Visual Basic Program.

To set the properties of your controls

In the Form Designer, select the Panel control.
The Properties window in the lower-right corner of the IDE displays all properties for the Panel control named Panel1.
In the Properties window, select the Dock property, and then click the arrow to the right. A small property-selection window with several boxes is displayed.
Tip:
The Dock property is found under the Layout category. You can sort the properties alphabetically by clicking the AZ button in the Properties window.
Click the top box in the property-selection window to set the Dock property to Top. The Panel control expands to fill the top of the form.
In the Properties window, click the plus sign (+) next to the Size property to expand it.
The Width and Height properties become visible in the Properties window.
In the Properties window, notice that the Height property of the Panel control is set to 100. Change this property value to 50.
In the Form Designer, select the WebBrowser control. In the Properties window, set its Dock property to Fill by selecting the Dock property, clicking the arrow to the right, and selecting the center box in the property-selection window.
In the Form Designer, select the Button control.
In the Properties window, select the Text property of the Button control. In the right column, delete Button1 and replace it with Go!.
Resize or relocate any one of the controls, and resize the form to suit your taste. For example, you might want to increase the length of the TextBox control so that it is long enough to display a valid URL. The following illustration shows an example of what the Web Browser application might look like.
Web Browser application

Note:
The TextBox and Button controls must remain on top of the Panel, or you will not be able to see them when you run the application.

Tip:
The Dock property is found under the Layout category. You can sort the properties alphabetically by clicking the AZ button in the Properties window.

Note:
The TextBox and Button controls must remain on top of the Panel, or you will not be able to see them when you run the application.

Closer Look

In this lesson, you set several properties that changed the appearance of the controls for your application. A property in Visual Basic represents an attribute of an object—in this case, a control. For example, one attribute of a Button control is the text it displays. In this case, you set the Text property to display "Go!". To learn more about properties, see Closer Look: Understanding Properties, Methods, and Events.

Properties can take many different types of values besides text. For example, the Dock property used a property-selection window to show available options. Other property values might be numbers, an option that you select from a list, or a true-or-false option.

If you resized or relocated a control, you also set properties. The Size and Location properties determine the control's size and location on the form. To see this in action, select the Size property in the Properties window and use the mouse to resize the control. When you release the mouse, the new Size values display in the Properties window. To learn more about control layout, see Closer Look: Understanding Control Layout.

In addition to setting properties in the Properties window, most properties can be set by writing code. You will learn more about how to write code to set properties in a following lesson.

Next Steps

Your user interface is now complete! All you have to do is add the instructions (also called code) for how you want your program to work. In the next lesson, you will add a line of code to your program.

Next Lesson: Step 4: Add Visual Basic Code

To set the properties of your controls

Tasks

Concepts

Other Resources