Chapter 3 - Drawing Forms

Chapter 3 - Drawing Forms

To begin with we will create a simple example form to calculate the length of any word typed in:

3.1Creating a New Form

To create a new form, press + + L to bring up the Solution Explorer window, then:

3.2Setting Useful Form Properties

This page shows some useful properties you can set to change how a form looks:

The table below shows some of the most useful form properties, with Wise Owl recommended values. To see these properties, simply right-click on the form background or press .

Category / Property / What it does / Default / Recommended value
Appearance / FormBorderStyle / Determines how the form border will appear / Sizable / Sizable orFixedDialog (this prevents users resizing your forms) depending on use
Text / Sets the caption for the blue title bar at the top of the form / The form name / A suitable caption
Layout / StartPosition / Whereabouts on the screen the form appears / WindowsDefaultLocation / CenterScreen (ie in the middle of the screen)
WindowState / Whether the form appears maximised, minimised or normal / Normal / Normal (ie restored – neither maximised nor minimised)
Window Style / ControlBox / Whether the title bar appears at all / True / True (titleless forms look very strange)
Icon / The icon at the top left of the form / / An owl icon, perhaps?
MaximizeBox, MinimizeBox / The symbols for maximising or minimising a form / True / Depends on the use to which you are putting the form – do you want people to resize it?

3.3Controls and the Toolbox

Definition of Controls

All the different widgets (labels, text boxes, command buttons, etc) that you add to a form are called controls:

Using the Toolbox

You can add any control to a form using the Visual Studio toolbox.

To display this toolbox:

Tool / Top Menu / Keyboard
/ View Toolbox / + + X

3.4Adding Controls to a Form

You can add any control onto a form as follows:

1)Display the toolbox as described on the previous page, and click on the tool you want:

2)Click on your form where you want the tool to go:

3)Change the name of the control you’ve just added, and its visible text (this isn’t always necessary, but is a good habit to get into):

3.5Naming Controls

Modified Hungarian Notation

Many VB programmers prefix controls with 3 characters, to show what sort of “thing” they are. This naming system is called modified Hungarian notation.

A List of Three-Letter Prefixes

We couldn’t find a standard 3-character prefix list for form controls, and so we offer our own resource for programmers to refer to if useful (for the most commonly used controls only):

3.6Selecting Controls

Before you can move, copy, edit, delete, rename or format controls, you must first select them!

Selecting a Single Control

Here are two ways to select a single control:

Selecting Several Controls

Suppose that you want to select the two buttons in the form above. Here are two ways to accomplish this:

Method / Example diagram
Select one control, then hold down the key and click on the others you want to add to/remove from your selection. /
Click and drag to draw a rectangle – anything it touches or encloses will be selected. /

Selecting All Controls

To do this, do one of the following: / Top Menu / Keyboard
Edit Select All / + A

The Dominant Control

In any selection of controls, the last one that you select is dominant:

When you are resizing or aligning controls, they will all assume the size or position of the dominant one:

Changing the Dominant Control

You can select any control as dominant in a group as follows:

1)Select all of the controls:

2)With the controls selected, click on the one you want to be dominant.

3.7Formatting Controls and Forms

You can change how a form looks by formatting it. All of the examples below refer to the button, but the properties shown apply to most controls and to the form itself.

Resizing Controls

You can change the size of one or more controls using the handles surrounding them:

Changing how Controls Look

To do this, select the control and change any of the properties shown below:

Moving Controls

To move controls, select them and then click and drag on them with the symbol:

Changing Alignment (within Controls)

You can change the horizontal and vertical alignment of a control by changing its TextAlign property:

Changing Control Alignment Relative to the Form

You can centre align a control on a page horizontally or vertically as shown below:

Aligning Controls against Each Other

You can use the Format menu to align two or more selected controls relative to each other:

However, there is a much easier way:

Making Controls the Same Size

To make two or more controls the same size:

1)Select the controls whose size you want to change, making sure that the control whose dimensions you want to achieve is the dominant control:

2)Choose to make all of the selected controls the same height or width (or both):

Spacing Controls Equally

The example below shows how to space controls out in a line – you can space vertically in a similar way:

3.8Navigating in a Form

Three ways to make it easier for a user to find their way round your form are: by assigning accelerator keys, by creating a tab order for the key and by creating default buttons.

Accelerator Keys

In our example form (as shown on the right), you can press the following keys:

Key / What it does
+ t, + T / Takes you to the text box following the label Type in a word:
+l, + L / Is equivalent to clicking on the Show Length button.

Note that you’ll need to press the key to get the underlining to appear in Windows 7.

Tab Order

When you press on a form, which control will it go to next? The answer depends on the tab order. To change this, from the menu select: View Tab Order

Two tab properties you can set for controls are shown on the right – they are in the Behavior category.

Default Buttons

In most Windows dialog boxes, one button is shown with a slightly thicker border. For example, if you choose Window Windows... in Visual Studio you will see the following dialog box:

To set a button to be the default button to handle the or key, you must change a property of the form:

3.9Tooltips

This page shouldn’t really exist – every control should have a ToolTip property:

Instead, you must add a Tooltip control to the form, then use it to display a tooltip for a control: