Chapter 1.

The Windows Application Environment

The Microsoft .NET Framework provides features for most GUI applications from the common
components utilizing GUI libraries. The System.Windows.Forms namespace provides the creation of
Windows Forms applications. It also allows setting the properties of Windows Forms and components
using the Visual Designer and the Properties windows, change or examine the values of these properties
dynamically/programmatically and teach us to intercept and handle some of the common events that
Windows Forms and components expose.

After completing this lesson, you will be able to:

 Create Windows Forms applications.
 Navigate the integrated development environment (IDE) of Visual Studio.
 Understand the fundamentals of a Windows application.

1.1 Creating a New Project

A Windows application is made up of a visual interface and code. This is designed with visual tools and
elements such that these elements incorporate lot of functionalities. However, to react to user actions
some necessary codes are written. This Windows application is what the users see on their desktop at
runtime: a Windows form with controls with which the user can interact by entering text, checking or
clearing check boxes, clicking buttons, and so on.

To start new project in Visual C#:

1. Open the File menu > New Project or click New Project in the Start Page, either of which opens a New
Project dialog. Disclaimer: The main window of your Visual Studio may be slightly different, but don’t
worry about it.

2. Select Windows Forms Application template. It is a good practice to change the suggested project
name (WindowsApplication1) into a descriptive name for easy identification.

3. Select the Create Directory For Solution check box, by default, Visual Studio creates a new folder for
the project under the folder you have specified in the Location box and then click the OK button. A new
Visual C# project is created! Figure 1.1 shows Visual Studio IDE Form Designer for the newly created
project.

Form1.cs is a Solution
Explorer Component of
the newly created project.

Sizing handles are the

small squares that
appear on the right
and left edges, and Figure 1.1 – Windows Form Designer
lower-right corner of
the form’s bounding
box.
1 – Working With Windows Forms 1
The new project contains (an empty) form already! The Form1 is a component in the Solution Explorer.
Form1.cs file contains code that is associated with the Form1 form. The main window of the IDE is the
Form Designer, and the gray surface on it is the window of the new application (with the sizing handle
enabled for resizing the form). The Form Designer is the main playground in laying out the visual
interface of the application. At design time, various components are placed on the form, set the
properties and then program the application.

The default environment is crowded, that is hide a few of the toolbars not in use through customization
the way you want to work with. Choose menu View > Toolbars > Customize which leads to a dialog box
with Toolbar and Customize tabs. The Toolbar tab are toggles which can turn on or off by clicking. The
Commands tab has Categories which shows the list of commands. You can drag each command from
the command list to the toolbar. You can hide just about any component of the IDE, except for the main
menu — after all, you have to be able to undo the changes!

3. Save the project at any time by choosing the File menu > Save All command. You’ll be prompted
about the project’s folder, and Visual Studio will save the project under the folder you specified in the
Location box.

1.2 Common IDE Studio Windows

Solution Explorer Window
The Solution Explorer Window (Figure 1.2) contains a list of the items in the current solution. It displays
a hierarchical list of all the components, organized by project. A solution can contain multiple projects,
and each project can contain multiple items.

Figure 1.2 Solution Explorer Window

The Program.cs file contain the

application's start-up code to set a
startup form of the project.

A solution may contain multiple projects, you can right-click the project you want to set as the startup
project. You can also add items to a project with the Add Item command of the context menu, or remove
a component from the project with the Exclude From Project command. This command removes the
selected component from the project, but doesn’t affect the component’s file on the disk. The Delete
command removes the selected component from the project and also deletes the component’s file from
the disk.

1 – Working With Windows Forms 2

Toolbox
The Toolbox window (Figure 1.3) contains all the controls (objects) you can use to design and build your
application’s interface to display to the user at runtime. These controls (buttons, text boxes, radio
buttons, lists, and so on) are the components of the Windows interface organized in different categories
according to control’s function.

Figure 1.3 ToolBox Window

Properties Window
The Properties window (Figure 1.4) allows you to view and modify the properties that determine/adjust
the appearance of the control and (in some cases) its function. The Properties View is toggle between
Categorized View and Alphabetical View. The button displays the properties in categories according
to their role. For instance, the properties that determine the appearance of the control are listed
alphabetically under the header Appearance, the properties that determine the control’s behavior are
listed alphabetically under the header Behavior, and so on. The button on the Properties window
displays all properties in alphabetical order.

The left column of the Properties window shows the property’s name while the right column shows each
property’s value. Many properties are set to a single value, such as a number or a string. If the possible
settings of a property are relatively few, meaningful constants in a drop-down list are displayed. Other
properties are set through a more elaborate interface. For example, Color properties are set from within
a Color dialog box displayed right in the Properties window. Font properties are set through the usual
Font dialog box. Collections are set in a Collection Editor dialog box, in which you can enter one string
for each item of the collection.

1 – Working With Windows Forms 3

 Categorized View

Alphabetical View

Figure 1.5 - Properties Window of a TextBox Control

If the Properties window is hidden:

choose View > Properties Window, or right-click a
control on the form and choose Properties or simply
press F4 to bring up this window.

In case, a control might totally overlap another control,

and won’t be able to select the hidden control and view
its properties. Select the desired control in the
ComboBox at the top of the Properties window. This
box contains the names of all the controls on the form,
and you can select a control on the form by selecting
its name on this box.

Output Window
The Output window (Figure 1.6) is where many of the tools, including the compiler, send their output.
Every time you start an application, a series of messages is displayed in the Output window. The compiler
generates these messages, and you need not understand them at this point.

Figure1.6 Output Window

Error List Window

The compiler with error messages populates this window, if the code can’t be successfully compiled.

Figure 1.7 Error List Window

You can double-click an error message in this window, and the IDE will take you to the line with the
statement in error — which you should fix.
1 – Working With Windows Forms 4
Windows Forms Designer
The Form Designer (Figure 1.1) allows you to design forms for typical Windows applications. It lets you
add, size, and move controls on a form using your mouse. Together with the Properties window, it lets
you view and modify control properties, and create event handlers to interact with the controls.

Code Editor Window

The most obvious feature of the code editor (Figure 1.8) is that it lets you type code, but it is far more
than a simple text editor. It provides many features to make writing correct C# code much easier. The
upper left part of the code editor displays a drop-down listing all the namespaces available. If you select
a control from the list, you can then pick an event for that control from a second dropdown in the code
editor's upper right. If you select an event, the code editor generates a corresponding empty event
handler for you. An event-handler is a method that executes when a specific event takes place while
an application is running.

Types List Drop-down Member List drop-down View Code

Event-handler

Figure 1.8 Code Editor Window

 To navigate from design to code view:
Right click anywhere in the Designer and select "View Code" or in the Solution Explorer Window
Click the View Code icon (<>)

 To navigate from code to design view:

Right click anywhere in the Code editor and select "View Designer" or Press Shift+F7

1.3 Designing A Form As Visual Interface

As soon as you open the Windows Forms Designer it can now be configured to be quite usable. At design
time, the Toolbox can immediately be used to place controls on the form.

Steps in designing an application's interface:

1. Analyze and carefully plan the basic operations you need to provide through your interface.
2. Design the forms. This means placing Windows controls on it and setting the controls' properties.
3. Write the necessary code to handle the events of interest.
Visual Studio is a rapid application development (RAD) environment. This means that you can rapidly
prototype an application and show something to the client and made possible through the visual tools
that come with VS, especially the new Form Designer.

The Windows Forms Designer allows you to add controls to a form in different ways.
1. When you double-click a control on the Toolbox, Visual Studio places an instance of the control
on the form in a default location and at a default size. Then you can use the mouse to relocate and
resize the control.
1 – Working With Windows Forms 5
2. When you click a control in the Toolbox, the mouse cursor changes while the mouse is over the
form. The new cursor looks like a plus sign with a small image of the control's Toolbox icon next to
it. If you click the form, Visual Studio adds a control at that location with a default size.

Figure 13.9 - Edge alignment and baseline alignment when placing control on a form

As you place controls on the form, you can align them in groups by using the commands of the Format
menu. Select multiple controls on the form by using the mouse and the Shift (or Ctrl) key, and then
align their edges or their middles with the appropriate command of the Format menu. To align the left
edges of a column of TextBoxes, choose the Format>Align>Left command. You can also use Format>
Make Same Size command to adjust the dimensions of the selected controls.

As you move controls around with the mouse, a blue snap (Figure 13.9) line appears when the controls
become nearly aligned with another control. Release the mouse while the snap line is visible to leave
the control aligned with the one indicated by the snap lines. The blue snap lines indicate edge alignment.
Most of the time, we need to align not the edges of two controls, but their baselines (the baseline of the
text on the control). The snap lines that indicate baseline alignment are red. Figure 13.9 shows both
types of snap lines.

3. When you do add and configure control programmatically at run time:

CheckBox CheckBox1 = new CheckBox();
CheckBox1.AutoSize = true;
CheckBox1.Location = new System.Drawing.Point(31, 144);
CheckBox1.Name = "RememberMeCheckBox";
CheckBox1.Size = new System.Drawing.Size(94, 17);
CheckBox1.TabIndex = 4;
CheckBox1.Text = "Remember me";
CheckBox1.UseVisualStyleBackColor = true;
Controls.Add(CheckBox1);

1.4 Changing Controls Properties

The Properties window can let you change a control's properties at design time. When you select
control in a Form Designer or in the Solution Explorer, the Properties window displays the properties of
that control.
To change a property's value:
1. Simply click the Property (Figure 13.10) and enter the new value. However, some properties
are little more complex than others and provide drop-down lists or special dialogs for setting
the property value.

2. Another way to set control's property is using Smart Tags. Many controls display a smart tag
when you select them on the Designer and it looks like a little box containing a right-pointing
triangle. When you click the smart tag, a small dialog appears to let you perform common tasks
for the control quickly and easily.

3. You may also set the control properties programmatically at run time:
//this code sets the checkbox's text property
this.RememberMeCheckBox.Text = "Remember me";

1 – Working With Windows Forms 6

 Bounding box is the thin dotted lines that
encloses the object in the Designer. Notice Smart tag menu-like user Properties Window
the transparent rectangular area that interface (UI) elements
defines the control's size. It indicates that that supply commonly
an object is selected and ready for editing used design-time options

Tip #1: If the Properties window is hidden, press F4 on your

keyboard or select Properties Windows on the View menu.

Tip #2: Arranging properties alphabetically makes it easier

for many developers to find the certain property.

Figure 1.10 Property Window and Smart Tag

Setting the TabIndex Property

When designing the application, specify the tab order in which control receives the focus. That is, when
the Tab key is pressed, the focus is moved to the control whose tab order immediately follows the tab
order of the current control. The TabIndex is helpful for achieving this since each control has its own
TabIndex property that can be set to an integer value.

The values of the TabIndex properties of the various controls on the form need not be consecutive. To
specify the tab order of the various controls: in the Properties window set the TabIndex property or Click
View menu > Tab Order. The tab order of each control will be displayed on the corresponding control,
as shown in Figure 1.11.

As you place other controls on the form don't forget to lock to prevent
moving them around by mistake. To lock the controls in their places:
set each control's Locked property to True or by locking all the controls
on the form at once via the Format > Lock Controls command.

Figure1.11 - Setting the Tab order

1 – Working With Windows Forms 7

1.5 Working With the Form Control Object
Applications usually made up of one or more forms. The Forms should carefully be crafted, functional,
simple and yet intuitive. The main characteristic of a form is the title bar on which the form's caption is
displayed (Figure 1.12).

Figure 1.12 Elements of the Form

Commonly used Properties of Form Control

Properties Description

AcceptButton The button that's automatically activated when you press Enter, no
matter which control has the focus at the time. Usually the OK button on
a form is set as AcceptButton for a form.
CancelButton The button that's automatically activated when you hit the Esc key.
Usually, the Cancel button on a form is set as CancelButton for a form.
BackColor Sets the form background color.

Enabled If True, allows the form to respond to mouse and keyboard events; if
False, disables form.
Font This property specify font type, style, size

FormBorderStyle Determines the style of the form's border and the appearance of the form;
its value is one of the FormBorderStyle enumeration's members.
 None: Borderless window that can't be resized.
 Sizable: This is default value and will be used for resizable window
that's used for displaying regular forms.
 Fixed3D: Window with a visible border, "raised" relative to the
main area. In this case, windows can't be resized.
 FixedDialog: A fixed window, used to create dialog boxes.
 FixedSingle: A fixed window with a single line border.
 FixedToolWindow: A fixed window with a Close button only. It looks
like the toolbar displayed by the drawing and imaging applications.
SizableToolWindow: Same as the FixedToolWindow but resizable. In
addition, its caption font is smaller than the usual.
Name The actual name of the form.

Text The text that will appear at the form’s title bar.
StartPosition Determines the initial form’s position when it's first displayed. It will have
any of the following values:
 CenterParent: The form is centered in the area of its parent form.
 CenterScreen: The form is centered on the monitor.
 Manual: The location and size of the form will determine its starting
position.
 WindowsDefaultBounds: The form is positioned at the default
location and size determined by Windows.
 WindowsDefaultLocation: The form is positioned at the Windows
default location and has the dimensions you've set at design time.

Width Form’s width in pixel.

1 – Working With Windows Forms 8

 Commonly Used Methods of Form Control
Method Description

Active Activates the form and gives it focus.

AddOwnedForm Adds an owned form to this form.

BringToFront Brings the control to the front of the z-order.

CenterToParent Centers the position of the form within the bounds of the parent form.
CenterToScreen Centers the form on the current screen.

Close Closes the form.

Focus Sets input focus to the control.

Hide Conceals the control from the user.

Refresh Forces the control to invalidate its client area and immediately redraw itself
and any child controls.

Select Activates the control.

SendToBack Sends the control to the back of the z-order.

SetAutoScrollMargin Sets the size of the auto-scroll margins.

SetDesktopBounds Sets the bounds of the form in desktop coordinates.

SetDesktopLocation Sets the location of the form in desktop coordinates.

Show Displays the control to the user.

ShowDialog Shows the form as a modal dialog box.

Commonly Used Events of Form Control

Event Description

Click Occurs when the form is clicked.

Closed Occurs before the form is closed.

Closing Occurs when the form is closing.

DoubleClick Occurs when the form control is double-clicked.

DragDrop Occurs when a drag-and-drop operation is completed.

Enter Occurs when the form is entered.
FormClosing and The FormClosing event is fired when the user closes the form by clicking its
FormClosed Close button.
GotFocus Occurs when the form control receives focus.

KeyPress Occurs when a key is pressed while the form has focus.
Load Occurs before a form is displayed for the first time.

LostFocus Occurs when the form loses focus.

Shown Occurs whenever the form is first displayed.

VisibleChanged Occurs when the Visible property value changes.

1 – Working With Windows Forms 9

1.6 Checkpoint
Name: _________________________________ Schedule: __________________ Date: ______________
General Instructions: Questions/Clarifications should be forwarded to the instructor only. Write your answers
legibly in INK. Erasures/Alterations are considered wrong. Academic policy applies. Do not forget to THINK.
I. TRUE or FALSE. Write TRUE if the statement is TRUE otherwise write FALSE.
_____ 1. A new Visual Studio project automatically creates an empty form and displays it in the
Form Designer.
_____ 2. A thin dotted line, known as sizing handles, encloses a form.
_____ 3. Object’s properties determines the appearance and other characteristics of a GUI object.
_____ 4. The Properties Window’s left column shows each property's value and the right column
shows each property's name.
_____ 5. Use the ToolBox when you are ready to create controls on the application's form.
_____ 6. Control names are also known as identifiers.
_____ 7. The GetFocus() method of the Control class sets the input focus.
_____ 8. The Program.cs file contains the application's start-up, which executes when the
application runs.
_____ 9. The Form1.cs file contains code that is associated with the Form1 form.
_____ 10. C# source code files always end with the .cs extension.
_____ 11. Text property is initially set to the same value as the form's name when a form is created.
_____ 12. The form's title is displayed in the bar along the top of a form.
_____ 13. The code MessageBox.Show("Thanks for clicking the button!"); display the string
literal, "Thanks for clicking the button!" inside a message box.
_____ 14. When the program statements instead of the constructed form is seen when a new
application is created means you have selected the wrong template and need to begin again.
_____ 15. Design time is the time during which building the GUI and writing the application's code.
_____ 16. Changing an object's Text property also changes the object's name.
_____ 17. You add your own code to the Program.cs file as you develop an application.
_____ 18. C# code is organized as methods, which are contained inside classes, which are contained
inside namespaces.
_____ 19. Runtime is the time during which an application is executing.
_____ 20. You can only add objects on the form at design time.
_____ 21. The Tab Order determines the order in which the controls within the form receive the
focus when the user presses the Tab key.
_____ 22. Visual Studio automatically imports the System.Windows.Forms namespace for you when
you create a Windows Application Project using the IDE.
_____ 23. The Form’s AcceptButton property is used to activate a button control when the user
presses the Enter key.
_____ 24. An event handler method executes when a specific event takes place while an
application is running.
_____ 25. Double-clicking a control in the Form Designer does not only create an empty event
handler; it also writes some code-behind not seen elsewhere in the project necessary for the event
handler to properly function.

1 – Working With Windows Forms 10