Visual Programming
Graphical User Interfaces (GUI) allow a user to interact easily with the program using different visual
components. On the early days of the computer world, applications are text based and you type commands
and input to make the program useful. You need to memorize a long list of commands to be able to work
properly with the program. Modern software applications have graphical user interfaces. You see them in
almost every program you use now. A professional looking graphical user interface is easy in the eyes and
has a simple, yet attractive look and feel. A good graphical user interface also makes the commands more
accessible and organized by using menus and grouping components.
But creating a program with a user interface was once a tedious task. For you to even create a simple
window that displays a message, you need to type lots of codes. Creating an application with a graphical
user interface was hard until the arrival of Visual Programming. Visual Programming makes it easy for
you to create GUI applications by providing you a "canvas" where you simply drag the controls from the
toolbox. Controls are visual elements that compose the GUI. You can interact with these controls to
perform their functionality. Examples of controls are buttons, text boxes, labels, checkboxes, and radio
buttons. The term "visual" in Visual C# was from the concept of visual programming.
Microsoft uses the term Windows Forms to represent every window in an application. Visual Studio allows
you to create Windows Forms Applications easily. You can then create and design the form in the Design
View.
Figure 1 - Visual C# Express Design View
Figure 1 shows the Design View in Visual C# Express 2010. You can see the form and some controls
"drawn" in its surface. With the Designer View, you can see how the form will look when you run the
program. The code for drawing and initializing controls are hidden from the programmer so you can
concentrate on the functionality of the application.
You can use Visual Studio's tools for designing controls such as aligning, anchoring, docking, and resizing
controls. Visual programming saves development time and suitable for Rapid Application Development.
Other languages that do not support visual programming requires dozens of code before you can even
create a simple window that shows a short message.
Creating a Simple Windows Forms Application
You will now experience visual programming which is the "Visual" in Visual C#. Please note that this lesson
guides you to the creation of a simple windows application which uses basic event-handling. I will show
the steps for doing these and briefly discuss them. The concepts of forms, controls, event-handling, and
certain parts Visual Studio used for designing will be discussed in their respective lessons.
Open Visual C# Express and go to File > New Project. Then from the list of templates, choose Windows
Forms Application. A Windows Forms Application is a type of application that has a graphical user interface.
Name the project MyFirstWindowsApplication.
Figure 1 - New Project Window
You will be presented with a blank form. The selected tab tells that you are viewing the Form1.cs file in
Designer View.
Figure 2 - Newly Created Blank Form
Two code files will be created that represent the form. But for now, we will concentrate on the file that is
used to add functionality to the form. The form can be viewed in two modes, the Design View and Code
View. The Designer will be shown if you are in design view. You will see here the actual form and any visual
and non-visual controls you will add soon.
You can also resize the forms by dragging the resizing handles of the form while in the Design View.
Figure 3 - The Resizing Handles of the Form
Adding Controls to the Form
All the controls are located in the Toolbox. The Toolbox can be accessed via the Toolbox tab located by
default at the left of the IDE. If it is not shown, you can go to View > Other Windows > Toolbox.
Hover your mouse over or click the Toolbox tab to show the actual Toolbox.
Figure 4 - Toolbox Tab
The Toolbox is divided into categories and the most commonly used controls are located in the Common
Controls category. To open a category and expose its control, simply click the category. The Toolbox will
auto-hide by default. If you don't want that behavior, then you can click the pin icon beside the close button
of the Toolbox.
To add controls to the form, choose a control in the Toolbox and double click it. Alternatively, you can drag
the control from the Toolbox to the form. Please note that you can only add controls to the client area of
the form. The client area is the blank area of the form. You can delete a control or controls by selecting it
in the designer and hitting Delete in your keyboard. Add a button control to the form. Most controls also
has resizing handles just like the form itself. Resize and position the button as shown if Figure 5.
Figure 5
Changing the Properties of Controls
You can change certain properties of the form and controls. We use the Properties Window to view and
change the value of all the available properties of a selected control in the Design View. Note that some
properties are not shown in the Properties Window and can only be accessed in code.
Selecting a control is equivalent to single clicking a control in the Designer. For a demonstration of modifying
control properties, select the button in the form, then go to the Properties Window. You can pin the
Properties Window if you will be working with it frequently.
Figure 6 - Changing Properties
Find the Text property and change its value to "Click Me".
Figure 7 - Changing the Value of a Property
The text inside the button in the Designer will update.
Figure 8 - Updated Windows Form
You can also click the form in the Designer and change the Text property. When selecting the form, you
need to click on any area of the form but not on the controls it contain.
Adding Event Handlers to Controls
The final part of this tutorial is showing you how to add event handlers to certain events of the controls.
Events trigger when certain happenings occur. We put event handlers to an event. Event handling will be
discussed in detail in a separate tutorial. Each control has its own default event. For example, the Button
control has Click as its default event while the Form control has a default event of Load. Event handlers
are methods that is associated with an event, and they execute when the associated event happens.
The easiest way to add an event handler is to double click a control in the Designer. You can only do this
if you want to add event handlers to the default event of a control. To demonstrate this, double click the
button in the Designer. Visual Studio will automatically create an event handler and attached that event
handler to the default event of the double clicked control. Once the event handler is created, you will be
taken to the Code Editor, with the cursor positioned inside the generated event handler. All you need to do
is type the codes that will run when the event occurs.
Figure 9 - Newly Created Event Handler
Don't mind the other parts of the code as there will be a seperate lessons that discuss them. Type the
following code inside the event handler. Please only type the code inside the event handler of the following
code. I included the event handler so you can clearly see where to type the code.
private void button1_Click(object sender, EventArgs e)
{
MessageBox.Show("You clicked the button!");
}
The MessageBox class allows you to call a message box used to prompt user with messages and
information. The Show method shows the message box with a specified message. You will learn more
about the MessageBox class later. Run the program and click the button. You will be presented with a
message window with the message you specified as an argument to the Show method.
Another way of adding event handlers to events of controls especially for non-default events, is by going
to the Properties Window. To demonstrate this, let's add a Load event to the form. Go back to Design View
by clicking the Design Tab, or using the Shift + F7 shortcut.
Select the form in the designer then go to the Properties Window and find the Events button. It is
represented by a thunderbolt icon. If it is not visible, be sure that a control is selected in the Designer.
The Properties Window will now show a list of events for the selected control in the Designer. Find
the Load event of the form. Clicking the combo box beside it will show you the list of valid methods for the
event that exist in the code of the form. You can then choose which method to attach to this event. We
can also create a new event handler by double clicking the selected event in the Properties Window. You
will be taken to the Code Editor with the proper event handler created for you. Add the highlighted code.
private void Form1_Load(object sender, EventArgs e)
{
button1.Text = "Text changed by the Load event";
}
This statement will modify the Text property of button in the form. The Load event of the form occurs once
the form is finished loading. So when you run the program once more, as soon as the program has finished
loading, the text inside the button will be changed.
You have now successfully created an simple event-driven windows forms application using the tools
available in Visual Studio and Visual C# Express.
Event Handling
Graphical user interfaces in .NET and Visual C# uses event handling mechanism to handle events that
occur while the program is running. Events are behaviors or happenings that occur when the program is
running. Event handling is the process of monitoring for certain events to occur, and then executing
codes when a specific event happens. Windows forms use event handling to add functionality and respond
with the user. Without event-handling, forms and user interfaces are pretty much useless. This tutorial
assumes that you already learned the concepts of delegates and events.
Events are declared using a delegate as a type. Delegates hold references to methods. The following is an
example of declaring a delegate and an event.
public delegate void SampleEventHandler(int);
public event SampleDelegate SampleEvent;
Based on the declaration of the delegate, the methods that it can accept must not return a value(void)
and accepts a single intargument. We then used this delegate type to create our event.
We will now add event handling to the event. Event handlers are methods that match the delegate type
of the event and the ones that will be executed when the event occurs. Event handlers are attached to an
event. Attached event handlers are executed when the event occurs. You can attach multiple event handlers
to the event and they will all run when the event occurs. To attach an event handler to an event, you first
create it. When creating an event handler, be sure that it matches the signature of the delegate that the
event uses. For example, considering the delegate created above which has a return type of void and
an int parameter, our event handlers should also have a void return type, and an int parameter
(please note that access specifier is not important).
public void ShowMessage(int number)
{
MessageBox.Show("Hello World");
}
We can then attach the event using the += operator like this:
SampleEvent += new SampleEventHandler(ShowMessage);
To activate the event, we call it passing the required arguments the same way we call methods.
SampleEvent(3);
Event Handling in Windows Forms
To demonstrate using events on windows forms, create a new Windows Forms Application and name it
EventHandling. Double click the form and Visual Studio will automatically create an event handler and
attach it to the Load event of the form. The Load event has a delegate type of EventHandler. Most
events of controls have a delegate type of System.EventHandler. The following is the definition of
the EventHandler delegate.
public delegate void EventHandler(object sender, EventArgs e)
As you can see with the definition of the delegate, it has no return type and has two parameters,
an object, and an EventArgs instance. The object sender represents the control that activates the
event. We will demonstrate its use later. The second argument is an instance of the EventArgs class.
This can be called as the event argument and they contain data about the event that happened.
The EventArgs is actually a base class and contains no useful members. Certain events will have event
arguments that are derived from EventArgs and contain useful properties that the event handler can
use. You will notice that the created event handler by Visual Studio matches the signature of
the EventHandler.
private void Form1_Load(object sender, EventArgs e)
{
}
If you want to create event handlers manually, then be sure to follow the signature of the delegate type
of the event. Visual Studio proposes a naming convention for event handlers, as seen in the generated
event handler. When naming event handlers, type the name of the control(specified by its Name property)
followed by an underscore and then the name of the event. You can ignore this convention if the event
handler will be used by multiple events as we will see later.
Communicating with the Source Control
You have seen that the EventHandler delegate has two parameters, and the first of them is an object
which represents the control that sent the event. Since it is of type object, any control can be a source
of the event because every control is derived from the object base class. Since the sender is converted
to an object, we need to convert it back to the proper control to access its useful properties. To demonstrate
its use, add a button to the form. Change the Text property of the button to "Hello World!".
Double click the button to generate an event handler for its Click event. Like the Load event,
the Click event also has a type ofEventHandler. Use the following code for the event handler.
private void button1_Click(object sender, EventArgs e)
{
Button source = (Button)sender;
MessageBox.Show("The message inside the button is " + source.Text);
}
Run the program and click the button. A message box will be shown telling the text inside the button that
sent the Click event.
The first line of the event handler converts the sender object to a Button using casting so we can access
its Text property. We then call the Show method of the MessageBox class to show the value of the
Text property of the button that sent the event.
Event Arguments
The second parameter which actually varies depending on the event is an event argument. The most
common is the EventArgs which is the base class of event arguments. It has no properties you can use
in your event handler. To demonstrate an event that has a different event argument, we will use the
MouseClick event of the button which is a better version of the Click event. Since it is not the default event,
we can access it in the events section of the Properties Window. Be sure that the button is selected in the
designer. Click the thunderbolt icon to show the events of the button. We need to remove the Click event
handler first so it will not conflict with theMouseClick event. Find the Click event and delete the value
next to it. Then find and double-click the MouseClick event. TheMouseClick event has a different
delegate type of MouseEventHandler. It has the same signature as the
ordinary EventHandlerdelegate, but it has a different type for its event argument which
is MouseEventArgs. The MouseEventArgs is derived from EventArgs. It contains useful
properties such as which button(left or right) of the mouse is clicked, the number of clicked done, how
much the mouse wheel was rotated, and the point location of the click relative to the source control. Use
the code below for the MouseClick event handler.
private void button1_MouseClick(object sender, MouseEventArgs e)
{
MessageBox.Show("You clicked at point (" + e.X + ", " + e.Y + ")");
}
The code above uses the event argument parameter to access the x and y coordinates of the point where
the mouse was clicked. The output below my vary depending on where you click on the button.
There are many more event argument types and each offers useful properties about the event that took
place.
Using the Properties Window to Attach Event Handlers
We already know that aside from double-clicking controls, we can use the Properties Window to attach
event handlers to events. We click the thunderbolt icon to go to the Events section of the Properties
Window.
The top combo box is used to select controls in the Designer. This is useful when you can't select certain
controls because they aren't visible or very small.
Find the desired event. To attach an event handler to an event, you can double-click the name of the event
to generate an event handler for the specified event. Alternatively, if you already have created event
handlers, you can click the dropdown button to view all the valid event handlers that match the signature
of the delegate type of the specified event.
Using Identical Event Handlers for Multiple Events
Please note that you can use a single event handler for multiple events that have the same delegate type.
To do this, you need to first create the event handler with the proper signature. Then go to the Events
section of the Properties Window and find the events you want. Instead of double clicking, choose the
event handler you created. Now find another event and choose the same event handler.
Separating Design and Functionality
When we create a new windows form, a class that inherits from System.Windows.Forms.Form is
generated. This class is separated in two files thanks to the feature called partial classes. Partial classes
allow you to separate definitions of a class in different files within the same project and namespace. With
the introduction of partial classes in .NET 3.5, Visual Studio was able to separate design from functionality.
This allows a programmer to concentrate on the functionality of the application. The name of the files will
have the following pattern:
FormName.cs
FormName.Designer.cs
where FormName is the name of the form, for example, Form1. A third file with .resx extension is used
for resources of the form and will be discussed in a separate lesson. When we create the form, add controls,
and modify properties, all the code is written in a somewhat hidden file with a .Designer.cs extension. If
you can't see it, find the .cs file for the form in the Solution Explorer and click the arrow button beside it.
Double-clicking that file will allow you to see all the codes that were generated by Visual Studio. The code
contains methods for disposing and initializing the controls. You can see the controls being declared and
properties, such as Location and Text, are set depending on what you specified in the Properties Window.
You will also see event handlers being attached to events of controls. If you can't see the code, it is hidden
by default and is labeled "Windows Forms Designer generated code". Just click the plus icon to its left to
show it. You will see that the code for initializing the controls and their properties and events is located
inside a method called InitializeComponent. This method is called in the form's constructor located at
the main code file for the form's class. The codes in the Designer file is initially hidden because Visual
Studio want's you to use the Designer and the Properties Window instead of writing all these codes
manually.
The MessageBox Class
he System.Windows.Forms.MessageBox is a static class that is used to show message boxes for
prompting, confirmation and warning users. To show a message box, simply call the Show method of
the MessageBox class. The simplest version of the Show method is the one that accepts a string message
as an argument.
MessageBox.Show("Hello World!");
You can also specify the title of the message box by using another overloaded version of the Show method.
MessageBox.Show("Hello World!", "A Message");
You can also change the buttons that will be shown in the message box if you don't want to use the default
OK button. You can do this by using the System.Windows.Forms.MessageBoxButtons enumeration.
MessageBox.Show("Hello World!", "A Message", MessageBoxButtons.OKCancel);
The table below shows the members of the MessageBoxButtons enumeration.
Member Buttons Shown
AbortRetryIgnore Abort, Retry, Ignore
OK OK
Member Buttons Shown
OKCancel OK, Cancel
RetryCancel Retry, Cancel
YesNo Yes, No
YesNoCancel Yes, No, Cancel
The Show() method returns a value from the System.Windows.Forms.DialogResult enumeration. This
is useful to determine what button you pressed in the message box. For example, if you click the "Yes"
button in the message box, then the Show() method will return the value DialogResult.Yes.
DialogResult result;
result = MessageBox.Show("What is your choice?");
if (result == DialogResult.Yes)
{
//You pressed the Yes button
}
if (result == DialogResult.No)
{
//You pressed the No button
}
Please note that the Form class also has a DialogResult property. This is not
the System.Windows.Forms.DialogResult.
You can also add an icon for your message box to further imply the purpose of the message. You do this
by using the members of theMessageBoxIcon enumeration.
MessageBox.Show("Hello World!", "A Message",
MessageBoxButtons.OK, MessageBoxIcon.Information);
The table below shows the different icons that you can use for your message box.
Icon Member Usage
Asterisk
Information
Used when showing information to the user.
Error
Hand Stop
Used when showing error messages.
Exclamation
Warning
Used when showing warning messages.
Question Used when asking a question to the user.
You can use the MessageBoxIcon.None to indicate that the message box will have no icon.
The MessageBoxDefaultButton enumeration tells which of the button is the default, that is, the one that
is pressed when the enter key in the keyboard is pushed. It has only 4 members which
are Button1, Button2, Button3, Button4. For example, in a message box that has an OK and a Cancel
buttons, using MessageBoxDefaultButton.Button1 will make the OK button as the default. When the
message box is shown and you pressed Enter in the keyboard, the OK button is pressed.
MessageBox.Show("Hello World!", "A Message",
MessageBoxButtons.OKCancel, MessageBoxDefaultButton.Button1);
Properties Description
Anchor Specifies how the control relocates and resizes whenever the form
is resized.
AutoSize If set to true, the control will automatically size itself to fit the
contents.
BackColor The background color of the control.
BackgroundImage Allows you to add a background image to the control.
BackgroundImageLayout Specifies the way the background image is placed and resized.
Bottom Gets the distance in pixel between the top of the control's container
and the bottom of the control.
CausesValidation Specifies whether the control will raise validation events.
ContextMenuStrip Allows you to add a context menu to the control.
Controls A collection of child controls within this control.
Dock Docks the control to one of the edges of the window.
Enabled Tells whether the user can interact with the control. Set to false to
disable the control.
ForeColor The foreground color of the control. This is also the font color of
the text inside the control.
Height The height of the control in pixels.
Left Gets or sets the distance between the left edge of the control and
the left edge of its container.
Location The location of the control relative to its container.
Locked Specifies whether the control can be moved or resized in the
designer.
MaximumSize Specifies the maximum size of the control.
Margin Specifies the margin between this control and another control.
MinimumSize Specifies the minimum size of the control.
Name The name of the control. This is used to reference the control in
code.
Padding Specifies the interior spacing of the control.
Parent The parent of the control.
Right The distance between the right edge of the control and the left
edge of its container.
Controls
Controls are visual components that compose the graphical user interface. Everything you see in a GUI is
a control, including the form itself. Controls are located at the Toolbar grouped inside different categories.
Most of the controls inherit from theSystem.Windows.Forms.Control base class which exposes several
properties, methods, and events common to those controls.
Control Properties
The following are some of the useful properties of the Control class.
Figure - Control Properties
The most important property in the table is the Name property. This property allows you to reference the
control in code. The following discusses more properties common to most of the controls.
Changing the Background Color of the Control
We use the BackColor property of the control to change the color of the background. Find
the BackColor property in the Properties Window and click the drop down button. You will be presented
with a window with three tabs. Each tab presents a different set of color.
Size The size of the control. Composed of Width and Height sub-
properties.
TabIndex Specifies the number of the control in the tab order of its container.
TabStop Specifies whether the control can be accessed by the tab key.
Tag Used to assign special or useful values about the control.
Text The text to be shown inside of the control.
TextAlign Specifies the alignment of the text of the control.
Top The distance between the top edge of the control and the top edge
of its container.
Visible Sets the visibility of the control.
Width The width of the control in pixels.
The System colors the colors your operating system uses as default colors for controls. The Web tab shows
colors that are safe to use for the web. And the Custom tab shows much more colors. Alternatively, you
can type the RGB values of the color separated by commas in the text box next to the property.
Adding a Background Image
We can change the background image of a control by using the BackgroundImage property. As an
example, let's change the background image of a form. Go to Properties Window while the form is selected
and find the BackgroundImage property.
You will be presented with a window which allows you to choose a resource. For now, choose local resource
and browse for an image by clicking the Import button.
Once you choose an image, click OK. The background image will now show up on the form. The alignment
and size of an image may not be what you desired. There is another property called
the BackgroundImageLayout property. It accepts values from
theSystem.Windows.Forms.ImageLayout enumeration.
Value Description
None The image will be positioned using its top left corner with no resizing of the image.
Tile If the image is smaller than the client area of the control, the image will be repeated until it
fills the form.
Center The image is centered within the control's client area.
Stretch The image will be resized to fit the client area of the control.
Zoom The image will be fitted to the client area of the control without losing its aspect ratio.
Most of the time, Stretch will work fine. The form below has a background image with an image layout
of Stretch.
The Text Property
The Text property defines the text or caption inside the control. The text that the Text property represents
varies on different controls. For example, Text property of the form gets or sets the caption located in its
caption bar. The Text property of the button represents the Text inside the button. The Text property of
a textbox represents the text inside the text box. We can use the TextAlign property to align the text in
different locations of the control. If you click the TextAlign properties' drop down box in the Properties
Window, you will be presented with a small window that allows you to easily point which location you want
the text to be aligned.
Changing the Font of the Control
We can change the font type, color, size, and style of the control by using
the Font and ForeColor properties. Let's use a button control as an example.
To change different font properties of the control, find the Font property in the Properties Window. You
will notice a drop down button in its left. Open it up and more properties about the font will be exposed.
The useful once are the Name, which defines the type of font to use, the Size which indicates the size of
font, Unit which tells the unit to use for the size of the font,
and Italic, Strikeout, Underline and Bold to add styles to the control. Alternatively, you can use the
button to the right of the font property to open the Font Window.
Here, you can choose the font type, the font style, the size and add certain effects. You can even see a
preview of the font. With these, you can customize the font of the controls.
Enabling and Disabling Controls
We can use the Enabled property to tell whether a control can receive focus and user interaction. We set
the property to false to disable the control and true to enable it. When we disable the control, its appearance
Event Description
BackColorChanged Occurs when the background color was changed.
BackgroundImageChanged Occurs when the background image was added or changed.
Click Occurs when you click the control with the left mouse button.
ControlAdded Occurs when a child control is added to this control.
ControlRemoved Occurs when a child control was removed from this control.
DoubleClick Occurs when you double click the control.
DragDrop Occurs when the drag drop operation is completed.
EnabledChanged Occurs when the control is enabled or disabled.
Enter Occurs when the control is entered.
FontChanged Occurs when the font properties are changed.
ForeColorChanged Occurs when the fore color of the control is changed.
GotFocus Occurs when the control got the focus.
KeyDown Occurs when a key in the keyboard is pressed while the control has
the focus.
KeyPress Occurs when the key in the keyboard is pressed and released while
the control has the focus.
KeyUp Occurs when a pressed key in the keyboard is released while the
control has the focus.
Leave Occurs when the input focus leaves the control.
LostFocus Occurs when the focus of the control is lost.
MouseClick A more advanced version of the Click event.
MouseDoubleClick A more advanced version of the DoubleClick event.
MouseDown Occurs when a button in the mouse is down while inside the control.
MouseEnter Occurs when the mouse pointer enters the control.
MouseHover Occurs when the mouse pointer rests on the control
MouseLeave Occurs when the mouse pointer leaves the control.
MouseMove Occurs when the mouse pointer moves while inside the bounds of the
control.
may change. For example, when we disable a button (setting its Enabled property to false), its color and
appearance will change. Note that the change is only visible when you run the form and not in the designer.
When a control is disabled, it will not receive focus or events. For example, if a button is disabled, you
cannot click it.
Making Controls Invisible
You can temporarily hide a control by setting the Visible property to false. The Visible property is a
boolean property which tells whether the control is visible or not. Setting to false makes the control hidden,
and setting it to true makes the control visible. Note that you will only see the effect when you run the
MouseUp Occurs when a pressed button of the mouse is released while inside
the control.
MouseWheel Occurs when you move the mouse wheel while the control has the
focus.
Move Occurs when the control is moved.
Paint Occurs when the control is redrawn.
ParentChanged Occurs when the parent control of this control changes.
Resize Occurs when the control is resized.
TextChanged Occurs when the Text property of the control is modified.
Validated Occurs when the control is finished validating.
Validating Occurs when the control is validating.
VisibleChanged Occurs when the Visible property is changed.
form and not in the designer. This allows you to still select the control in the designer even if the Visible
property is set to false.
More about the properties and features of controls will be discussed in the following lessons.
Control Events
The following table shows the some useful events common to most controls.
We will discuss most of the events above in later chapters.
Control Methods
The following are the most useful methods of the Control class.
Methods Description
BringToFront Brings the control to the front of the z-order.
Contains Tells whether a child control is contained inside this control.
CreateControl Creates a new control and add it to this control.
FindForm Retrieves the form that the control is on.
Focus Sets the focus to this control.
GetContainerControl Gets the control that serves as the container of this control.
Hide Hides the control.
Refresh Forces the control to invalidate its client area and immediately redraw itself and any child controls.
Select Activates the control
SendToBack Brint the control to the back of the z-order.
Show Shows a hidden control.
Update Causes the control to redraw the invalidated regions within its client area.
The Control class also offers some methods that allow you to manually trigger events of the control. Such
methods starts with Onfollowed by the name of the event. For example, the OnClick event triggers the
Click event when called. Note that some events cannot be triggered by user interaction such as
the Paint event. If you want to trigger such events, use the methods offered by the Control class. You
will learn more about these methods when we delve deeper into the world of C#.
Note that these properties, events, and methods are inherited by most of the controls thanks to inheritance.
Therefore, I may not include them again when I present the properties, events, and methods of individual
controls unless they are very significant to the control.
Naming Your Controls
Always make a habit of naming controls. We name our control using its Name property. Naming controls
follows the guideline for naming variables such as spaces, special characters, and the use of keywords are
prohibited. There have been many naming conventions that emerged when it comes to naming controls.
You can name the control depending on its use. For example, a text box use to retrieve the first name of
the user can simply be namedfirstName just like a normal variable. But when naming controls, it is better
to prefix the actual names with the name of the control. For example, instead of simply firstName, we
can use textBoxFirstName. With that convention, we will know, using IntelliSense, that we are working
with a text box or any control.
Another technique used by others is abbreviating the control names. For example, instead of using
textBoxFirstName, you can usetxtFirstName. The txt is short for the textbox. There has been a list of
abbreviations for every control and you can even use your own abbreviation as long as it is clear to you
and to others who will look at your code.
Another naming convention is the reverse of the first one where you place the descriptive name first
followed by the type of control and also uses camel casing. For example, a text box for retrieving the first
name of the person can be named firstNameTextBox or a button used for calculating can be
named calculateButton.
Scenario Name
A Button used to confirm a message. buttonConfirm, confirmButton, btnConfirm
A TextBox used to accept email address from
user.
textBoxAddress, addressTextBox, txtAddress
A Form used for obtaining personal
information.
formPersonalInformation, personalInformationForm, frmPersonalInformation
A ComboBox to show a list of products. comboBoxProducts, productsComboBox, cmbProducts
The following lessons use the first naming convention where you simply use the name of the control in
camelCasing style followed by a descriptive name. You don't have to memorize a set of abbreviations or
invent one. When you drag a control from the ToolBox, you simply need to remove the number suffix and
add a descriptive name. When you are typing and you want to easily find what control you want to work
with, simply type what kind of control it is, for example, a text box, and all the text box controls will show
up in the IntelliSense. The only downside is some names might become too long. It is still up to you as to
what naming convention you are more comfortable to use.
The following gives you some example name depending on the control and its use.
It is not necessary to name every control in the form. Controls that will never be accessed in code can be
left by their default name. Examples of these are the labels that are merely used to label other controls.
Have a habit of naming the control after you place them onto the form.
The Windows Form
Windows Forms (or simply forms) are the windows you see in a Windows Application. You can create
multiple forms in a single application. Each form inherits the properties and methods of
the System.Windows.Forms.Form class. The namespaceSystem.Windows.Forms contains components
you will need for creating forms and controls.
The following are the parts of a typical windows form.
A RadioButton which tells if a person is male. radioButtonMale, maleRadioButton, radMale
A MenuItem for saving a file. menuItemSave, saveMenuItem, mnuSave
A CheckBox to subscribe to newletter. checkBoxSubscribe, subscribeCheckBox, chkSubscribe
Property Description
AcceptButton The button on the form that is pressed when you hit the Enter key.
CancelButton The button on the form that is pressed when you hit the Esc key.
ClientSize Gets or sets the client area of the form. The client area is the portion of the form inside
the frame borders.
ControlBox Specifies whether to show the control box at the top right portion of the form. The control
box contains the buttons minimize, maximize, and close.
Controls A collection of Control objects contained inside the form.
DesktopBounds The size and location of the form in the Window's desktop.
Font The font that the form will use. Controls inside the form will inherit this property.
FormBorderStyle The border style of the form.
HelpButton Shows a help button right before the close button of the form. (minimize and maximize
buttons should be disabled)
Icon The icon that will be used by the form.
Location The coordinates of the form in the screen.
MainMenuStrip Specifies the main menu to be used by the form.
MaximizeBox Tells whether the maximize box located at the top right is displayed.
MinimizeBox Tells whether the minimize box located at the top right is displayed.
Modal Tells whether the form is modal.
Name The name of the form that is used to reference it in the code.
OwnedForms A collection of forms that this form owns.
Owner The form that owns this form.
At the top, you will find the Caption Bar. The Caption Bar is composed of the icon, the caption, and the
control box. The control box contains buttons such as minimizing, maximizing, closing, or a help button.
The Client Area is where we add the controls. The border or frame, which includes the caption
bar,encloses the client area and allows you to resize the form.
The following are some of the useful properties of the Form base class.
Figure 1
Figure 2 shows some useful methods of the Form class.
ShowIcon Tells whether the icon is displayed at the left side of the caption bar.
Size The size of the form.
StartPosition The starting position of the form when it is initially shown.
Text The text that is shown in the caption bar of the form.
Method Description
Activate Gives the focus to this form and activates it.
AddOwnedForm Adds a new form that this form owns.
CenterToScreen Centers the position of the form in the screen.
Close Closes the form.
Hide Hides this form.
OnLoad Raises the Load event.
Show Shows the form.
Figure 2
Figure 3 shows the available events for the form.
Event Description
Activated Occurs when the form is activated.
Click Occurs when the form is clicked.
Deactivated Occurs when the form is no longer in focus.
FormClosed Occurs after the form is closed.
FormClosing Occurs when the form is closing. Allows you to halt the closing of the form.
HelpButtonClicked Occurs when the help button is clicked.
KeyPress Occurs when a key on the keyboard is pressed.
Load Occurs when the form is finished loading just before it is displayed.
MenuComplete Occurs when the menu of the form loses focus.
MenuStart Occurs when the menu of the form receives focus.
ResizeBegin Occurs when the form enters resizing mode.
ResizeEnd Occurs when the form exits resizing mode.
Shown Occurs after the form is shown for the first time.
Figure 3
The Form class is a child of the System.Windows.Forms.Control base class so the methods and
properties from the Control class are also available in the Form class.
Modifying the Control Box
We use the ControlBox property to hide or show the Control Box. This is useful when you are planning to
disable minimizing or maximizing of control or you want to only close the form through the code. The
image below shows you how the form will look when you set ControlBox property to false.
If you want to disable only the minimize or the maximize button, then you can use
the MinimizeBox and MaximizeBox and set them to false.
The form above has its minimize and maximize box hidden. Unfortunately, you cannot hide only the close
button.
Changing Form's Border Style
We can change the border style of the form. For example, let's say you don't want the user to be able to
resize the form The default border of the form allow a user to do that. We can set
the FormBorderStyle property to different values of
the System.Windows.Forms.FormBorderStyle Enumeration.
Value Description
None The form has no border.
FixedSingle The form has a non-resizable single line border.
Fixed3D The form has a non-resizable 3d border.
FixedDialog The form has a thick, non-resizable, dialog style border that has no minimize
or maximize boxes.
Sizable The default. The form has a resizable border.
FixedToolWindow The form has a non-resizable border that has only a close button. This style is used for
tool windows.
SizableToolWindow Same as FixedToolWindow but resizable.
The following are screenshots of forms using different FormBorderStyle.
None
FixedSingle
Fixed3D
FixedDialog
Sizable
FixedToolWindow
SizableToolWindow
Form Icons
We use the Icon property to change the icon displayed at the upper left side of the form. Click the browse
button next the Icon property in the Properties Window and find the .ico file which is the file extension
for an icon image. The ShowIcon property allows you to hide or show the icon in the caption bar.
Accept and Cancel Buttons
You can add a button control to the form and set them as either an Accept or a Cancel button. You do
that using the AcceptButton andCancelButton properties. If a button is an accept button, whenever the
user hits Enter while the form is active, that button's Clickevent will be executed. The Cancel button is
activated whenever the Escape key is pressed. Just go to the Properties Window, find the desired property
and click the drop down button. You will be presented with the names of all the button control in the
form. Choose the desired button. For example, suppose you are creating a login form. You can set the
button used for logging in as the Accept button. This way, the user can simply press Enter when he is
finished typing the password.
There are many more to discover on windows forms and they will be discussed in later lessons.
The Button Control
The Button control (System.Windows.Forms.Button) is commonly used to execute commands when it
is clicked. When a button is clicked, you specify codes that will be used. Buttons are typically used to
confirm or cancel an action, to perform different actions, and to open some more dialogs.
The Button control has several properties that you can use. The table below enumerates them.
Property Description
AutoEllipsis Specifies whether to append dots (...) when the text in the button is too long and
can't fit the button.
AutoSize Specifies whether the button will automatically resize to fit its content.
FlatStyle Determines the style of the button. Popup makes the button flat, and when you hover
on the button, the button will pop out. Flat makes the button flat and when you move
point your mouse inside the button, the background color of the button changes.
Enabled If set to false, the button cannot be clicked or receive focus.
Image An optional image that you can place inside the control.
ImageAlign The alignment of the image in the button.
Text The caption inside the button.
Visible Tells whether the button is visible or not.
Figure 1 - Button Properties
A button is still useless by just editing its properties. It needs to react to events to do some work. The
following are the most common events available for the Button control.
You have already seen the Click event which is the default event for a button. Let's create another
application that demonstrates the use of other events. Create a new form and drag a button to the form
from the toolbox. It's not important what text you put for the button. In the properties window, find
the Name property and change its value to buttonSample. We will now refer to that button in the code
using that name. Our program will demonstrate the MouseEnter and MouseLeave events. To access these
events, the easiest way is to go to the properties window and click the button with the lightning symbol.
Event Description
Click Occurs when you click the button.
Enter Occurs when the control becomes the active control of the form.
Leave Occurs when the control becomes inactive anymore.
LocationChanged Occurs when the location of the button is changed.
MouseDown Occurs when the mouse pointer is in the button and the mouse button is pressed down.
MouseEnter Occurs when the mouse enters the button.
MouseHover Occurs when the mouse stays stationary in the button for an amount of time.
MouseUp Occurs when you pressed the button and you let go of the mouse button.
MouseLeave Occurs when the mouse pointer leaves the button.
First, find MouseEnter and double click it. Visual Studio will generate an event handler for you for that
specified event. Type the highlighted code inside the method.
private void buttonSample_MouseEnter(object sender, EventArgs e)
{
buttonSample.Text = "Mouse has entered!";
}
After typing the code, return back to the Properties Window and now choose the MouseLeave event and
double click it to generate an event handler. Again, type the highlighted code inside the event handler
method.
private void buttonSample_MouseLeave(object sender, EventArgs e)
{
btnSample.Text = "Mouse has left!";
}
Now run the program. Roll over your mouse to the button and notice that the text has changed. Take away
the mouse pointer from the button and the text of the button will change again.
The Label Control
The Label control (System.Windows.Forms.Label) is used to add text to a form that can be used to
show messages, or add labels to identify what other controls' functionality is. Drag a label control from the
toolbox to the form. By default, it will have an initial text. The following properties are the most common
ones that you will modify.
Property Description
AutoSize If true, the size of the borders of the label control in the designer will be resized automatically
depending on the text inside it.
BorderStyle Specifies the type of border around the label.
Font Used to change the font properties of the text inside the label control.
Text The text of the label.
TextAlign The alignment of the text inside the Label control
The Text property is the most important one because the main purpose of the Label control is to show text
in the form.
Label1.Text = "Hello World!";
You can modify the Font property to change the font family, font size and many font properties.
There are events that are also available for the Label control, but most of the time, you won't be needing
them.
The TextBox Control
Property Description
AcceptsReturn Used with Multiline. Tells if whether the return key is included in the input. The
return will be converted into a \n escape sequence.
AcceptsTab Indicates whether to accept tab as an input. By default, hitting tab will bring the focus to the control with the next TabIndex in the form.
Enabled Set to false to make the text box read-only therefore making the text box act like a label.
Font The font properties that will be used by the textbox.
Lines The lines of text in a multiline text box.
Multiline Set to true to allow multiple lines in a text box.
Text The text inside the text box.
The TextBox control (System.Windows.Forms.TextBox) is the most basic means of input in a windows
forms. You give the input data by typing it inside the text box. The text you type can be accessed by using
the Text property of the control. The following table shows some useful properties that you can use for
the TextBox control.
Figure 1
The following example shows the use of text boxes. Create a new Windows Application project. The
program will ask two numbers and then when a button is pressed, the sum is shown using a label. Drag
two textboxes to the form and name them textBoxFirstNumberand textBoxSecondNumber. Also drag
one label for each text box indicating their purpose. Drag another label that will be used to show the sum
and name it labelSum. Place a Button control and name it buttonAdd. Adjust the position and sizes of the
controls to match the layout below.
Double-click the button to add an event handler to its click event. Type the following codes.
private void buttonAdd_Click(object sender, EventArgs e)
{
PasswordChar Accepts a character that will be used to mask each character typed by the user.
ReadOnly Tells whether the text in the form can be edited.
Visible Tells whether the text box is visible inside the form.
WordWrap Used with Multiline. Set to true to enable automatic wrapping of words.
int num1 = Int32.Parse(textBoxFirstNumber.Text);
int num2 = Int32.Parse(textBoxSecondNumber.Text);
int sum = num1 + num2;
labelSum.Text = "Sum = " + sum;
}
The code converts the contents of textBoxFirstNumber and textBoxSecondNumber into integers using
the Parse method of the Int32class and stored them in their respective variables. We require conversion
because the Text property is of type string. Their contents are accessed using the Text property. The
sum is then determined. The sum is displayed afterward by assigning it to the Text property oflabelSum.
The most useful event of the TextBox is the TextChanged event which occurs when the text inside the
textbox is modified. The following program shows an example of using this event.
Create another windows forms application and add a textbox and a label in the form. Name them you can
leave their default names right now.
Delete the text of label1 by removing the content of its Text property. Note that it would be hard to
select this label now if the AutoSizeis set to false so you can select this label using the top combo box of
the Properties Window. The default event of the TextBox control is the TextChanged event so double
clicking it will create an event handler for the said event. Add the following code to the event handler.
private void textBox1_TextChanged(object sender, EventArgs e)
{
label1.Text = textBox1.Text;
}
Now run the program and type anything in the text box. Notice that the text of the label copies the text
you type in the text box.
When the text inside the textbox is modified, the event handler executes and copies the text inside textbox1
to label1.
By default, a text box can only handle a single line of text. To make it a multiline textbox, simply set
the Multiline property to true. Once you do that, you will notice that you can change the height of the
textbox in the designer.
You can set the WordWrap property to true to automatically bring the cursor below when it reaches the
right edge of the text box. If it is set to false, the text will continue to the to the right clipping the ones at
the left side. You can set the ScrollBar property to Horizontal,Vertical or Both to add scroll bars to
a multiline text box. When using a multiline textbox, you can use the Lines property to retrieve the
individual lines of text.
If your textbox is expected to accept passwords, then you must set the PasswordChar to something
like * to mask each character type in the textbox by the character indicated in the PasswordChar property.