W
indows Forms are the basis for most Microsoft Windows applications and can be configured to provide a variety of user interface (UI) options. The developer can create
forms of various sizes and shapes and customize them to the user’s needs. Forms are hosts for
controls, which provide the main functionality of the UI. Special controls called container
controls can be used to control the layout of the UI.
Lesson 1: Adding and Configuring Windows Forms
Overview of Windows Forms
Windows Forms are the basic building blocks of the UI. They provide a container that hosts
controls and menus and allow you to present an application in a familiar and consistent
fashion. Forms can receive user input in the form of keystrokes or mouse interactions and can
display data to the user through hosted controls. Although it is possible to create applications that do not contain forms, such as console applications or services, most applications that
require sustained user interaction will include at least one Windows Form, and complex
applications frequently require several forms to allow the program to execute in a consistent
and logical fashion.
When you create a new Windows Forms project, a form named Form1 is added to your
project by default. You can edit your form by adding controls and other visual elements in the
Designer, which is a graphic representation of a designable, visual element (such as a Form) that
appears in the Visual Studio Integrated Development Environment (IDE). The Visual
Studio IDE is shown in Figure 1-1.
FIGURE 1-1 A Windows Form in the Visual Studio IDE
Modifying Control Properties at Design Time
Although you can modify properties of controls such as location and size by manipulating the
control in the Designer, other mechanisms allow you to set control properties in the Designer,
including the Properties window, smart tags, and the Document Outline window.
The Properties Window
The primary interface for setting control properties is the Properties window, which exposes
the properties of a form, component, or control that can be set at design time. You can set
property values for most properties by selecting the property and typing a new value for
the property into the Properties window. For some properties, such as the Dock and Anchor
properties, the Properties window provides specialized graphical interfaces that assist in setting the property value. The Properties window is shown in Figure 2-7.
FIGURE 2-7 The Properties window
If the Properties window is not visible, you can open it with the following procedure.
TO O P E N TH E PR O P E R TI E S W I N D OW
From the View menu, choose Properties Window. Or press F4.
TO S E T A PR O P E R T Y I N TH E PR O P E R TI E S W I N D OW
1.
With the mouse, click the property you want to set.
2.
Type the new value for the property or use the specialized interface if this property
provides one.
Properties of Windows Forms
The visual appearance of your UI is an important part of your application. A UI that is poorly
designed is difficult to learn and will increase training time and expense. You can modify the
appearance of your UI by using Windows Forms properties.
Windows Forms contain a variety of properties that allow you to customize the look and
feel of the form. You can view and change these properties in the Properties window of the
Designer, as shown in Figure 1-2.
FIGURE 1-2 The Properties window
Table 1-1 summarizes some of the Windows Forms properties that are important in the look
and feel of the application. Note that this is not an exhaustive list of all Windows Forms
properties but a selected subset.
TABLE 1-1 Some Properties of the Form Class
PROPERTY
DESCRIPTION
(Name)
Sets the name of the Form class shown in the Designer. This property can
be set only at design time.
Backcolor
Indicates the background color of the form.
BackgroundImage
Indicates the background image of the form.
BackgroundImageLayout
Determines how the image indicated by the Background- Image property
will be laid out on the form. If no back- ground image is selected, this
property has no effect.
ControlBox
Determines whether the form has a Control/System menu box.
Cursor
Indicates the cursor that appears when the cursor is moved over the form.
Enabled
Determines whether the form is able to receive user input. If Enabled is set to
False, all controls contained by the form are likewise disabled.
Sets the default font for the form. All controls contained by
the form will also adopt this font unless their Font property is
set separately.
Font
ForeColor
Indicates the forecolor of the form, which is the color used
to display text. All controls contained by the form will also
adopt this forecolor unless their forecolor property is set
separately.
FormBorderStyle
Indicates the appearance and behavior of the form border
and title bar.
HelpButton
Indicates whether the form has a Help button.
Icon
Indicates the icon that is used to represent this form.
Location
When the StartPosition property is set to Manual, this property indicates the starting location of the form relative to the
upper left-hand corner of the screen.
MaximizeBox
Indicates whether the form has a maximize box.
MaximumSize
Determines the maximum size for the form. If this property is
set to a size of (0,0), the form has no upper size limit.
MinimizeBox
Indicates whether the form has a minimize box.
MinimumSize
Determines the minimum size to which the user can resize
the form.
Opacity
Represents the opacity, or conversely the transparency of
the form from 0% to 100%. A form with 100% opacity is
completely opaque, and a form with 0% opacity is completely transparent.
Size
Gets and sets the initial size of the form.
StartPosition
Indicates the position of the form when the form is first
displayed.
Text
Determines the text caption of the form.
TopMost
Indicates whether the form always appears above all other
forms that do not have this property set to True.
Visible
Determines whether the form is visible when running.
Windowstate
Determines whether the form is minimized, maximized,
or set to the size indicated by the Size property when first
shown.
Modifying the Look and Feel of the Form
You can use the Property Grid to set properties of the form at design time. Properties set in
this manner will retain their values until the application starts, at which time they can be set in code.
You can set most properties of a form at run time. The generalized scheme for setting a simple property
is to use the assignment operator (=) to assign a value to a property. The fol- lowing example demonstrates
how to set the Text property of a form:
' VB
Form1.Text = "This is Form 1"
// C#
Form1.Text = "This is Form 1";
Setting the Startup Form
If your Windows Forms application contains multiple forms, you must designate one as the startup form. The
startup form is the first form to be loaded on execution of your application. The method for setting the
startup form depends on whether you are programming in Visual Basic or C#.
In Visual Basic you can designate a form as the startup form by setting the Startup Form project
property, which is done in the project Properties window, as shown in Figure 1-3:
FIGURE 1-3 The Visual Basic project Properties window
TO S E T TH E S TAR T U P F O R M I N C #
1.
In Solution Explorer, double-click Program.cs to view the code. The code window
opens.
2.
Locate the Main method, and then locate the line that reads:
Application.Run(new Form());
where Form represents the name of the form that is currently the startup form.
3.
Change Form to the name of the form you want to set as the startup form.
Lesson 2: Managing Control Layout with Container
Controls
This lesson describes how to add and configure container controls. You will learn how to add controls to a
form or to a container control and to configure various kinds of container con- trols to create dynamic and
varied layouts for controls in your form.
Overview of Container Controls
Container controls are specialized controls that serve as a customizable container for other
controls. Examples of container controls include the Panel, FlowLayoutPanel, and SplitContainer controls.
Container controls give the form logical and physical subdivisions that can group other controls into
consistent UI subunits. For example, you might contain a set of related RadioButton controls in a GroupBox
control. The use of container controls helps create a sense of style or information flow in your UI and allows
you to manipulate contained controls in a consistent fashion.
When a container control holds other controls, changes to the properties of the container control can
affect the contained controls. For example, if the Enabled property of a panel is set to False, all of the
controls contained in the panel are disabled. Likewise, changes to prop- erties related to the UI, such as
BackColor, Visible, or Font, are also applied to the contained
controls. Note that you can still manually change any property inside a contained control, but if the
container is disabled, all controls inside that container will be inaccessible regardless of their individual
property settings.
The Controls Collection
Each form and container control has a property called Controls, which represents the col- lection of
controls contained by that form or control. When a control is added to a form or container control at
design time, the Designer automatically adds it to the controls collection of that form or container control
and sets the location property as appropriate. You can also dynamically add a new control at run time by
manually creating a new control and adding the control to the controls collection.
Adding a Control to a Form or Container Control in the
Designer
There are four ways to add a control to a form or container control in the
Designer:
Q
Drag the control from the Toolbox to the surface of the form or container control.
Q
Select a control in the Toolbox, and then draw it on the form with the mouse.
Q
Select a control in the Toolbox and double-click the form.
Q
Double-click the control in the Toolbox.
The Anchor Property
The Anchor and Dock properties of a control dictate how it behaves inside its form or parent
control. The Anchor property allows you to define a constant distance between one or more
edges of a control and one or more edges of a form or other container. Thus, if a user
resizes a form at run time, the control edges will always maintain a specific distance from
the edges. The default setting for the Anchor property is Top, Left, meaning that the top and
left edges of the control always maintain a constant distance from the top and left edges of
the form. If the Anchor property were set to Bottom, Right, for example, the control would
“float” when the form was resized to maintain the constant distance between the bottom
and right-hand edges of the form. If opposite properties are set for the Anchor property,
such as Top and Bottom, the control will stretch to maintain the constant distance of the
control edges to the form edges.
You can set the Anchor property to any combination of Top, Bottom, Left, Right, or none
of these. The Properties window presents a visual interface that aids in choosing the value for the Anchor
property. This interface is shown in Figure 1-6.
FIGURE 1-6 Choosing the Anchor property
The Dock Property
The Dock property enables you to attach your control to the edge of a parent control. The parent control
can be a form or a container control, such as a Panel control or a TabControl control.
Like the Anchor property, the Dock property provides a special visual interface that allows you to
graphically choose the property value. This interface is shown in Figure 1-7.
FIGURE 1-7 Choosing the Dock property
To set the Dock property, click the section of the interface that corresponds to where you
want your control to dock. For example, to dock your control to the right-hand side of the
form, click the bar on the right of the interface. To release docking, choose None. Clicking
the center of the Dock property interface sets the Dock property to a value of Fill, which
means the control will dock to all four sides of the form and fill the control in which it
resides.
The GroupBox Control
The GroupBox control is a container control that appears as a subdivision of the form surrounded by a border. It does not provide scrollbars, like the Panel control, nor does it
provide any kind of specialized layout capabilities. A GroupBox can have a caption, which is
set by the Text property, or it can appear without a caption when the Text property is set to
an empty string.
The most common use for GroupBox controls is for grouping RadioButton controls.
RadioButton controls placed within a single GroupBox are mutually exclusive but are not
exclusive of RadioButtons elsewhere in the form or in other GroupBox controls.
RadioButtons will be discussed in greater detail in Chapter 3, “Advanced Windows Forms
Controls.” Table
1-4 describes Text, the most important unique property of the GroupBox control.
TABLE 1-4 The Text Property of the GroupBox Control
PROPERTY
DESCRIPTION
Text
Represents the caption of the GroupBox enclosure. If no caption is desired,
this property should be set to an empty string.
The Panel Control
The Panel control creates a subsection of a form that can host other controls. The Panel can
be indistinguishable from the rest of the surrounding form, or it can be surrounded by a
border as determined by the BorderStyle property. A Panel can have a BorderStyle property of
None, which indicates no border; FixedSingle, which indicates a single edge around the Panel;
or Fixed3D, which represents a border with a three-dimensional appearance.
The Panel control is a scrollable control, which means that it supports horizontal and vertical scroll bars. Controls can be hosted in the Panel outside of its visible bounds. When the
AutoScroll property is set to True, scroll bars will automatically be available if any controls are
placed outside of the visible bounds of the control. If the AutoScroll property is set to False,
controls outside the visible bounds of the Panel are inaccessible. Important properties of the
Panel control are shown in Table 1-5.
TABLE 1-5 Important Properties of the Panel Control
PROPERTY
DESCRIPTION
AutoScroll
Determines if the Panel will display scroll bars when controls are hosted
outside the visible bounds of the Panel. Scroll bars are displayed when
this property is set to True and are not displayed when it is set to False.
BorderStyle
Represents the visual appearance of the Panel border. This property
can be set to None, which indicates no border; FixedSingle, which creates a single-line border; or Fixed3D, which creates a border with a
three-dimensional appearance.
The TabControl Control
The TabControl control enables you to group sets of controls in tabs, rather like files in a filing
cabinet or dividers in a notebook. For example, you might create property pages for an application in which each page represents the properties of a specific component. The TabControl
serves as a host for one or more TabPage controls, which themselves contain controls. The
user can switch between tab pages (and the controls contained therein) by clicking the tabs
on the TabControl.
The most important property of the TabControl is the TabPages property. TabPage controls are specialized container controls that are hosted only inside TabControl controls. Each
TabPage has its own set of properties, and you can access these properties by editing the
TabPages property at design time. This launches the TabPage Collection Editor, as shown in
Figure 1-9.
FIGURE 1-9 The TabPage Collection Editor
Individual TabPage controls are a lot like Panel controls. They are scrollable controls and
will generate scroll bars as needed if the AutoScroll property is set to True. Individual TabPage
controls also have a Text property, which represents the text shown in the tab that represents
this page in the TabControl. Also, like Panel controls, TabPages have a BorderStyle property
that can be set to None, FixedSingle, or Fixed3D, with results similar to those in the Panel
control.
The TabControl has several properties that you can use to customize the look and feel of
the control. The Appearance property controls how the tabs look. This property can be set to
Normal, Buttons, or FlatButtons, each of which generates a different visual style. The Alignment property determines whether the tabs appear on the Top, Bottom, Left, or Right of the
TabControl. The TabControl also has a property called Multiline, which indicates if more than
one row of tabs is allowed. When it is set to True, multiple rows of tabs are supported. When it is set
to False, only a single row of tabs is allowed. Important properties of the TabControl control and
TabPage control are shown in Table 1-8 and Table 1-9, respectively.
TABLE 1-8 Important Properties of the TabControl Control
PROPERTY
DESCRIPTION
Appearance
Determines the visual style of the TabControl
Alignment
Determines whether the tabs appear on the Top, Bottom, Left, or
Right of the TabControl
Multiline
Determines whether more than one row of tabs is allowed on the
TabControl
TabPages
Represents the collection of TabPage controls hosted by the
TabControl
TABLE 1-9 Important Properties of the TabPage Control
PROPERTY
DESCRIPTION
AutoScroll
Determines if the TabPage will display scroll bars when controls are hosted
outside the visible bounds of the Panel. Scroll bars are displayed when set to
True and are not displayed when set to False.
BorderStyle
Represents the visual appearance of the TabPage border. It can be set to None,
which indicates no border; FixedSingle, which creates a single- line border; or
Fixed3D, which creates a border with a three-dimensional appearance.
Text
Represents the text displayed on the tab in the TabControl that repre- sents
this TabPage.
The Layout Toolbar
The Layout toolbar provides a quick and easy way to accomplish many of the control layout tasks
required at design time. The Layout toolbar is not one of the default toolbars, so you might need to
add it to the IDE. You can add the Layout toolbar by selecting the View menu, choosing Toolbars,
and then selecting Layout. The Layout toolbar is shown in Figure 2-3.
FIGURE 2-3 The Layout toolbar
The Layout toolbar allows you to adjust the vertical and horizontal alignment of a group of
controls. The toolbar buttons associated with these tasks are shown in Figure 2-4.
FIGURE 2-4 Horizontal and vertical spacing buttons
You can apply any of these layout buttons to a group of controls by selecting the group of
controls and then clicking the appropriate button.
TO AD J U S T C O NTR O L S PAC I N G W I TH TH E L AYO U T TO O L BAR
1.
If necessary, add the Layout toolbar to the IDE by selecting the View menu, choosing
Toolbars, and then selecting Layout.
2.
Select the group of controls that you want to adjust.
3.
Adjust the control spacing by clicking the appropriate button.
The Layout toolbar also contains buttons that allow you to align the controls in the
Designer. The buttons involved in alignment are shown in Figure 2-5.
FIGURE 2-5 Control alignment buttons
You can apply any of these alignment buttons to a group of controls by selecting the group
of controls and then clicking the appropriate button.
TO AD J U S T C O NTR O L ALI G N M E N T W I TH TH E L AYO U T TO O L BAR
1.
If necessary, add the Layout toolbar to the IDE by selecting the View menu, choosing
Toolbars, and then selecting Layout.
2.
Select the group of controls that you want to adjust.
3.
Adjust the control spacing by clicking the appropriate button.
Snaplines
Snaplines give you visual aid and feedback when locating controls on a form or within a con- tainer
control. When you drag a control onto a form or container control, snaplines appear, providing cues
relating to control alignment.