第 51 页

Events.

Three categories cover most of the properties that affect the overall look and feel of a form:

Appearance, Layout, and Window Style. Many of the properties in these categories are also

available on Windows controls.

appearance Properties

The Appearance category covers the colors, fonts, and form border style. Many Windows Forms

applications leave most of these properties as their defaults. The Text property is one that you will

typically change, because it controls what is displayed in the form’s caption bar.

If the form’s purpose differs from the normal behavior, you may need a fixed-size window or a

special border, as is commonly seen in tool windows. The FormBorderStyle property controls how

this aspect of your form’s appearance is handled.

layout Properties

In addition to the Size properties discussed earlier, the Layout category contains the MaximumSize

and MinimumSize properties, which control how small or large a window can be resized to. The

StartPosition and Location properties can be used to control where the form is displayed in

the screen. The WindowState property can be used to initially display the form minimized,

maximized, or normally according to its default size.

window style Properties

The Window Style category includes properties that determine what is shown in the

Windows Form’s caption bar, including the maximize and minimize boxes, help button,

and form icon. The ShowInTaskbar property determines whether the form is listed in the

Windows taskbar. Other notable properties in this category include the TopMost

property,

which is used to ensure that the form always appears on top of other windows, even when it

does not have focus, and the Opacity property, which can be used to make a form

semi-transparent.

forM desiGn Preferences

You can modify some Visual Studio IDE settings that will simplify your user interface design phase.

In the Options dialog (shown in Figure 17-4) of Visual Studio 2010, two pages of preferences deal

with the Windows Forms Designer.

fiGure 17-4

The main settings that affect your design are the layout settings. By default, Visual Studio 2010

uses a layout mode called SnapLines. Rather than position visible components on the form via an

invisible grid, SnapLines helps you position them based on the context of surrounding controls and

the form ’ s own borders. You see how to use this new mode in a moment, but if you prefer the older

style of form design that originated in Visual Basic 6 and was used in the fi rst two versions of Visual

Studio .NET, you can change the LayoutMode property to SnapToGrid .

The SnapToGrid layout mode is still used even if the LayoutMode is set to

SnapLines. SnapLines only becomes active when you are positioning a control

relative to another control. At other times, SnapToGrid will be active and allow

you to position the control on the grid vertex.

The GridSize property is used when positioning and sizing controls on the form. As you move

controls around the form, they snap to specifi c points based on the values you enter here. Most

of the time, you ’ ll fi nd a grid of 8 × 8 (the default) too large for fi ne - tuning, so changing this to

something such as 4 × 4 might be more appropriate.

Both SnapToGrid and SnapLines are aids for designing user interfaces using the

mouse. Once the control has been roughly positioned, you can use the keyboard

to fi ne tune control positions by “ nudging ” the control with the arrow keys.

ShowGrid displays a network of dots on your form ’ s design surface when you ’ re in SnapToGrid

mode so you can more easily see where the controls will be positioned when you move them. You

will need to close the designer and reopen it to see any changes to this setting. Finally, setting the

form Design Preferences . 339

340 .

chaPter 17 WindoWS FormS ApplicATionS

SnapToGrid property to False deactivates the layout aids while in SnapToGrid mode and results in

pure free- form form design.

While you’re looking at this page of options, you may want to change the Automatically Open

Smart Tags value to False. The default setting of True pops open the smart tag task list associated

with any control you add to the form, which can be distracting during your initial form design

phase. Smart tags are discussed later in this chapter.

The other page of preferences that you can customize for the Windows Forms Designer is the Data

UI Customization section (see Figure 17-5). This is used to automatically bind various controls to

data types when connecting to a database.

fiGure 17-5

As you can see in the screenshot, the String data type is associated with five commonly used

controls, with the TextBox control set as the default. Whenever a database field that is defined as a

String data type is added to your form, Visual Studio automatically generates a TextBox control to

contain the value.

The other controls marked as associated with the data type (ComboBox, Label, LinkLabel, and

ListBox) can be optionally used when editing the data source and style.

It’s worth reviewing the default controls associated with each data type at this

time and making sure you’re happy with the types chosen. For instance, all

DateTime data type variables will automatically be represented with a DateTime

Picker control, but you may want it to be bound to a MonthCalendar.

Working with data bound controls is discussed further in Chapter 27.

adding and Positioning Controls . 341

addinG and PositioninG controls

You can add two types of controls to a Windows Form: graphical components that actually

reside on the form itself, and components that do not have a specifi c visual interface displaying on

the form.

You can add graphical controls to your form in one of two ways. The fi rst method is to locate the

control you want to add in the Toolbox and double - click its entry. Visual Studio 2010 will place it in

a default location on the form — the fi rst control will be placed adjacent to the top and left borders

of the form, with subsequent controls placed down and to the right.

If the Toolbox is closed, it won ’ t be automatically displayed next time the

Windows Forms designer is opened. You can display it again by selecting View

. Toolbox from the menu.

The second method is to click and drag the entry on the list onto the form. As you drag over

available space on the form, the mouse cursor changes to show you where the control will be

positioned. This enables you to directly position the control where you want it, rather than fi rst

adding it to the form and then moving it to the desired location. Either way, once the control is on

the form, you can move it as many times as you like, so it doesn ’ t really matter how you get the

control onto the form ’ s design surface.

There is actually a third method to add controls to a form — copy and paste a

control or set of controls from another form. If you paste multiple controls at

once, the relative positioning and layout of the controls to each other will be

preserved. Any property settings will also be preserved, although the control

names may be changed because they must be unique.

When you design your form layouts in SnapLines mode (see the previous section), a variety of

guidelines are displayed as you move controls around in the form layout. These guidelines are

recommended “ best practice ” positioning and sizing markers, so

you can easily position controls in context to each other and the

edge of the form.

Figure 17 - 6 shows a Button control being moved toward the top -

left corner of the form. As it gets near the recommended position,

the control snaps to the exact recommended distance from the top

and left borders, and small blue guidelines are displayed. fiGure 17-6

342 .

chaPter 17 WindoWS FormS ApplicATionS

These guidelines work for both positioning and sizing a control, enabling you to snap to

any of the four borders of the form — but they’re just the tip of the SnapLines iceberg. When

additional components are present on the form, many more guidelines will begin to appear as you

move a control around.

In Figure 17-7, you can see a second Button control being moved.

The guideline on the left is the same as previously discussed,

indicating the ideal distance from the left border of the form.

However, now three additional guidelines are displayed. Two blue

vertical lines appear on either side of the control, confirming that

the control is aligned with both the left and right sides of the other

Button control already on the form (this is expected because the

buttons are the same width). The other vertical line indicates

the ideal gap between two buttons.

Vertically aligning text controls

One problem with alignment of controls is that the vertical alignment of the text displayed

within a TextBox is different compared to a Label. The problem is that the text within each

control is at a different vertical distance from the top border of the control. If you simply align

these different controls according to their borders, the text contained within these controls would

not be aligned.

As shown in Figure 17-8, an additional guideline is available

when lining up controls that have text aspects to them. In

this example, the Telephone label is being lined up with

the textbox containing the actual Telephone value. A line,

colored magenta by default, appears and snaps the control

in place. You can still align the label to the top or bottom

borders of the textbox by shifting it slightly and snapping

it to their guidelines, but this new guideline takes the often

painful guesswork out of lining up text.

Note that the other guidelines show how the label is horizontally aligned with the Label controls

above it, and it is positioned the recommended distance from the textbox.

automatic Positioning of Multiple controls

Visual Studio 2010 gives you additional tools to automatically format the appearance of your

controls once they are positioned approximately where you want them. The Format menu, shown

in Figure 17-9, is normally only accessible when you’re in the Design view of a form. From here you

can have the IDE automatically align, resize, and position groups of controls, as well as set the order

of the controls in the event that they overlap each other. These commands are also available via the

design toolbar and keyboard shortcuts.

fiGure 17-7

fiGure 17-8

adding and Positioning Controls .

343

fiGure 17-9

The form displayed in Figure 17-9 contains several TextBox controls, all with differing widths. This

looks messy and should be cleaned up by setting them all to the same width as the widest control.

The Format menu provides you with the capability to automatically resize the controls to the same

width, using the Make Same Size . Width command.

The commands in the Make Same Size menu use the fi rst control selected as the

template for the dimensions. You can fi rst select the control to use as the template,

and then add to the selection by holding down the Ctrl key and clicking each of

the other controls. Alternatively, once all controls are the same size, you can

simply ensure they are still selected and resize the group at the same time with the

mouse.

You can perform automatic alignment of multiple controls in the same way. First, select the

item whose border should be used as a base, and then select all of the other elements that should

be aligned with it. Next, select Format . Align and choose which alignment should be performed.

In this example, the Label controls have all been positioned with their right edges aligned.

This could have been done using the guidelines, but often it’s easier to use this mass alignment

option.

Two other handy functions are the horizontal and vertical spacing commands. These automatically

adjust the spacing between a set of controls according to the particular option you have selected.

344 .

chaPter 17 WindoWS FormS ApplicATionS

tab order and layering controls

Many users find it faster to use the keyboard rather than the mouse when working with an

application, particularly those that require a large amount of data entry. Therefore it is essential

that the cursor moves from one field to the next in the expected manner when the user presses the

Tab key.

By default, the tab order is the same as the order in which controls were added to the form.

Beginning at zero, each control is given a value in the TabIndex property. The lower the TabIndex,

the earlier the control is in the tab order.

If you set the TabStop property to False, the control will be skipped over when

the Tab key is pressed and there will be no way for a user to set its focus without

using the mouse.

Some controls can never be given the focus, such as a Label. These controls

still have a TabIndex property; however, they are skipped when the Tab key is

pressed.

Visual Studio provides a handy feature to view and

adjust the tab order of every control on a form. If you

select View . Tab Order from the menu, the TabIndex

values are displayed in the designer for each control,

as shown in Figure 17-10. In this example the TabIndex

values assigned to the controls are not in order, which

would cause the focus to jump all over the form as the Tab

key is pressed.

You can click each control in order to establish a new tab

order. Once you have finished, press the Esc key to hide the

tab order from the designer.

If more than one control on a form has the same TabIndex, the z - order is used to determine

which control is next in the tab order. The z-order is the layering of controls on a form along the

form’s z-axis (depth) and is generally only relevant if controls must be layered on top of each other.

The z-order of a control can be modified using the Bring to Front and Send to Back commands

under the Format . Order menu.

locking control design

Once you’re happy with your form design you will want to start applying changes to the

various controls and their properties. However, in the process of selecting controls on the form,