Visual Programming

Department of CSE, QUEST

Dr. Irfana Memon
Dr. Irfana Memon
Department of CSE, QUEST

https://sites.google.com/a/quest.edu.pk/dr-irfana-memon/lecture-slides
 Course Content (1)
Part 1: Console Based Applications
Introduction to Microsoft Visual C# and Visual Studio
Working with variables, Data types, Operators, and Expressions
Visual C# Programming Language Constructs, Creating Methods
Invoking Methods, Handling Exceptions, Creating overloaded Methods
Using Decision Statements

Department of CSE, QUEST

Dr. Irfana Memon
Using Compound Assignment and Iteration Statements
Managing Errors and Exceptions
Implementing Type-safe Collections: Creating Classes, Organizing Data into
Collections, Handling Events, Defining and Implementing Interfaces
Developing the Code for a Graphical Application: Implementing Structs and Enums
Creating a Class Hierarchy by Using Inheritance, Extending .NET Framework Classes,
Creating Generic Types
Using Arrays and Collections and Understanding Parameter Arrays 2

Using Garbage Collection and Resource Management

 Course Content (2)
Part 2: Windows Based Applications
Introduction to WinForms and Controls
Advanced User Interface Enhancement
MDI Applications in WinForm
Drawing in WinForm

Department of CSE, QUEST

Dr. Irfana Memon
3
 Introduction to WinForm
and Controls
• After completing this chapter, you will be able to:

 Winform GUI
 Form (Properties, Methods, and Events)
 Controls in WinForm

Department of CSE, QUEST

Dr. Irfana Memon
4
 Windows Forms
• Windows Forms is the first framework from .NET that
allows creating form applications easily using a graphic
designer.
• Windows Forms is a Graphical User Interface(GUI) class
library which is bundled in .Net Framework.
• Its main purpose is to provide an easier interface to

Department of CSE, QUEST

Dr. Irfana Memon
develop the applications for desktop, tablet, PCs. It is also
termed as the WinForms.
• The applications which are developed by using Windows
Forms or WinForms are known as the Windows Forms
Applications that runs on the desktop computer.
• We can find there a full set of ready-made controls
(sometimes referred to as components) for most
situations. 5
• Also, we can create our own or modify an existing
components.
 Windows Forms
• A Form is a container for controls and components. When
you drag items from the Toolbox onto the Form, Visual
Studio generates code that creates the object and sets its
basic properties.
• This code is updated when the control or component’s
properties are modified in the IDE.

Department of CSE, QUEST

Dr. Irfana Memon
• Removing a control or component from the Form deletes the
corresponding generated code.
• The IDE maintains the generated code in a separate file using
partial classes—classes that are split among multiple files
and assembled into a single class by the compiler.
• You could write this code yourself, but it’s much easier to
allow Visual Studio to handle the details. 6
• Each control or component we present in this chapter is
located in namespace System.Windows.Forms.
 Create Project (Windows Forms
app)
Create a project
• First, you'll create a C# application project. The project type
comes with all the template files you'll need, before you've
even added anything.
 Open Visual Studio 2019.

Department of CSE, QUEST

Dr. Irfana Memon
 On the start window, choose Create a new project.

7
 Create Project (Windows Forms
app)
On the Create a new project window, choose the Windows
Forms App (.NET Framework) template for C#.
(If you prefer, you can refine your search to quickly get to the
template you want. For example, enter or type Windows Forms
App in the search box. Next, choose C# from the Language list,
and then choose Windows from the Platform list.)

Department of CSE, QUEST

Dr. Irfana Memon
8
 Create Project (Windows Forms
app)
In the Configure your new project window, type or
enter HelloWorld in the Project name box. Then,
choose Create. Visual Studio opens your new project.

Department of CSE, QUEST

Dr. Irfana Memon
9
 Create Project (Windows Forms
app)
• A form is a Windows user interface.

Department of CSE, QUEST

Dr. Irfana Memon
10
 About Windows Form Project
• The development environment contains three windows: a
main window, Solution Explorer, the Properties window.
• If any of these windows are missing, you can restore the
default window layout.
• On the menu bar, choose Window > Reset Window Layout.
• You can also display windows by using menu commands.

Department of CSE, QUEST

Dr. Irfana Memon
• On the menu bar, choose View > Properties Window
or Solution Explorer.
• If any other windows are open, close them by choosing
the Close (x) button in their upper-right corners.

11
 About Windows Form Project
• Main window: In this window, you'll do most of your work,
such as working with forms and editing code. The window
shows a form in the Form Editor.
• Solution Explorer window: In this window, you can view
and navigate to all items in your solution.
• If you choose a file, the contents of the Properties window

Department of CSE, QUEST

Dr. Irfana Memon
changes.
• If you open a code, the code file or a designer for the code file
appears.
• A designer is a visual surface onto which you can add
controls such as buttons and lists.
• For Visual Studio forms, the designer is called the Windows
Forms Designer. 12
 About Windows Form Project
Properties window: In this window, you can change the
properties of items that you choose in the other windows.
• For example, if you choose Form1, you can change its title by
setting the Text property, and you can change the
background color by setting the Backcolor property.

Department of CSE, QUEST

Dr. Irfana Memon
• On the menu bar, choose File > Save All.
As an alternative, choose the Save All button on the toolbar,
which the following image shows.

Save All toolbar button

Visual Studio automatically fills in the folder name and the 13
project name and then saves the project in your projects folder.
 Windows Forms (ToolBox)
Figure 1 below displays the Windows Forms controls and
components from the C# Toolbox.

Department of CSE, QUEST

Dr. Irfana Memon
14

Figure 1: Components and controls for Windows Forms.

 .NET Windows Form ToolBox

• The toolbox contains a selection of all the

controls available to you as a .NET
developer.
• In particular, it provides the selection

Department of CSE, QUEST

Dr. Irfana Memon
that is of importance to you as a
Windows Application developer.
• You can customize the toolbox to fit your
needs, but right now, we'll be focusing on
the controls found in the selection that is
shown in the picture.
• We'll look at most of the controls that are
15
shown here.
 .NET Windows Form Controls
• The System.Windows.Forms namespace contains a large
family of controls that add both form and function to a
Windows-based user interface.
• Each control inherits a common set of members from
the Control class.
• To these, it adds the methods, properties, and events

Department of CSE, QUEST

Dr. Irfana Memon
that give the control its own distinctive behavior and
appearance
• Figure on next slide shows the inheritance hierarchy of
the Windows Forms controls. The controls marked by an
asterisk (*) exist primarily to provide backward
compatibility between .NET 2.0 and .NET 1.x.
• Specifically, the DataGrid has been superseded by the 16
DataGridView, the StatusBar by the StatusStrip, and the
ToolBar by the ToolStrip.
 .NET Windows Form Controls

Dr. Irfana Memon

17

Department of CSE, QUEST

 .NET Windows Form Properties
• All controls have a number of properties that are used to
manipulate the behavior of the control.
• The base class of most controls, Control, has a number of

Department of CSE, QUEST

Dr. Irfana Memon
properties that other controls either inherit directly or
override to provide some kind of custom behavior.
• The table (next slide) shows some of the most common
properties of the Control class.
• These properties will be present in most of the controls.

18
 .NET Windows Form Properties
Name Availability Description
Anchor Read/Write Using this property, you can specify
how the control behaves when its

Department of CSE, QUEST

Dr. Irfana Memon
container is resized. See below for
a detailed explanation of this
property.
BackColor Read/Write The background color of a control.
Bottom Read/Write By setting this property, you
specify the distance from the top of
the window to the bottom of the
control. This is not the same as
specifying the height of the control.
Dock Read/Write Allows you to make a control dock
19
to the edges of a window. See
below for a more detailed
explanation of this property.
 .NET Windows Form Properties
Enabled Read/Write Setting Enabled to true usually
means that the control can receive
input from the user. Setting
Enabled to false usually means

Department of CSE, QUEST

Dr. Irfana Memon
that it cannot.
ForeColor Read/Write The foreground color of the
control.
Height Read/Write The distance from the top to the
bottom of the control.
Left Read/Write The left edge of the control
relative to the left edge of the
window.
Name Read/Write The name of the control. This
name can be used to reference the 20
control in code.
Parent Read/Write The parent of the control.
 .NET Windows Form Properties
Right Read/Write The right edge of the control relative
to the left edge of the window.
TabIndex Read/Write The number the control has in the tab

Department of CSE, QUEST

Dr. Irfana Memon
order of its container.
TabStop Read/Write Specifies whether the control can be
accessed by the Tab key.
Tag Read/Write This value is usually not used by the
control itself, and is there for you to
store information about the control
on the control itself. When this
property is assigned a value through
the Windows Form designer, you can
only assign a string to it.
21
Top Read/Write The top edge of the control relative to
the top of the window.
 .NET Windows Form Properties
Visible Read/Write Specifies whether or not the
control is visible

Department of CSE, QUEST

Dr. Irfana Memon
at runtime.
Width Read/Write The width of the control.

22
 Anchor and Dock Properties
• These two properties are especially useful when you are
designing your form.
• The Anchor property is used to specify how the control

Department of CSE, QUEST

Dr. Irfana Memon
behaves when a user resizes the window.
• You can specify if the control should resize itself, anchoring
itself in proportion to its own edges, or stay the same size,
anchoring its position relative to the window's edges.

23
 Anchor and Dock Properties
• The Dock property is related to the Anchor property.
• You can use it to specify that a control should dock to an
edge of its container.

Department of CSE, QUEST

Dr. Irfana Memon
• If a user resizes the window, the control will continue to be
docked to the edge of the window.
• If, for instance, you specify that a control should dock with
the bottom of its container, the control will resize itself to
always occupy the bottom part of the screen, no matter how
the window is resized.
• The control will not be resized in the process; it simply
stays docked to the edge of the window.

24
 .NET Windows Form Events
• When a user clicks a button or presses a button, you as the
programmer of the application, want to be told that this has
happened.

Department of CSE, QUEST

Dr. Irfana Memon
• To do so, controls use events.
• The Control class defines a number of events that are
common to the controls.
• The table on next slide describes a number of these events.
Once again, this is just a selection of the most common
events; if you need to see the entire list, please refer to the
MSDN library:

25
 .NET Windows Form Events
Name Description
Click Occurs when a control is clicked. In some cases, this
event will also occur when a user presses Enter.

Department of CSE, QUEST

Dr. Irfana Memon
DoubleClick Occurs when a control is double-clicked. Handling
the Click event on some controls, such as the
Button control will mean that the DoubleClick
event can never be called.
DragDrop Occurs when a drag-and-drop operation is
completed, in other words, when an object has
been dragged over the control, and the user
releases the mouse button.
DragEnter Occurs when an object being dragged enters the
bounds of the control.
26
 .NET Windows Form Events
DragLeave Occurs when an object being dragged leaves the
bounds of the control.
DragOver Occurs when an object has been dragged over the

Department of CSE, QUEST

Dr. Irfana Memon
control.
KeyDown Occurs when a key becomes pressed while the
control has focus. This event always occurs before
KeyPress and KeyUp.
Name Description
KeyPress Occurs when a key becomes pressed, while a
control has focus. This event always occurs after
KeyDown and before KeyUp. The difference
between KeyDown and KeyPress is that KeyDown
passes the keyboard code of the key that has been 27
pressed, while KeyPress passes the corresponding
char value for the key.
 .NET Windows Form Events
KeyUp Occurs when a key is released while a control has
focus. This event always occurs after KeyDown and
KeyPress.

Department of CSE, QUEST

Dr. Irfana Memon
GotFocus Occurs when a control receives focus. Do not use
this event to perform validation of controls. Use
Validating and Validated instead.
LostFocus Occurs when a control looses focus. Do not use this
event to perform validation of controls. Use
Validating and Validated instead.
MouseDown Occurs when the mouse pointer is over a control
and a mouse button is pressed. This is not the same
as a Click event because MouseDown occurs as
soon as the button is pressed and before it is
28
released.
MouseMove Occurs continually as the mouse travels over the
control.
 .NET Windows Form Events

MouseUp Occurs when the mouse pointer is over a control

and a mouse button

Department of CSE, QUEST

Dr. Irfana Memon
is released.
Paint Occurs when the control is drawn.
Validated This event is fired when a control with the
CausesValidation property set to true is about to
receive focus. It fires after the Validating event
finishes and indicates that validation is complete.
Validating Fires when a control with the CausesValidation
property set to true is about to receive focus. Note
that the control which is to be validated is the
control which is losing focus, not the one that is 29
receiving it.
Common Controls with Properties

Department of CSE, QUEST

Dr. Irfana Memon
and Events

30
 Button Control
• A Button is an essential part of an application, or software, or
webpage. It allows the user to interact with the application or
software.

Department of CSE, QUEST

Dr. Irfana Memon
• In Windows Forms we use a Button control that accepts click
events and performs other actions in the user interface.
• This control provides a way to accept input—and invoke logic
based on that input.
• The button control exists on just about any Windows dialog you
can think of.
• A button is primarily used to perform three kinds of tasks:
 To close a dialog with a state (for example, OK and Cancel
buttons)
 To perform an action on data entered on a dialog (for example
clicking Search after entering some search criteria)
31
 To open another dialog or application (for example, Help
buttons)
 Button Control
• Working with the button control is very straightforward.
• It usually consists of adding the control to your form and
double-clicking it to add the code to the Click event, which
will probably be enough for most applications you'll work on.

Department of CSE, QUEST

Dr. Irfana Memon
32
 Button Control (Properties)
• We discuss some of the commonly used properties and
events of the Button control.

Dr. Irfana Memon

Department of CSE, QUEST
• This will give you an idea what can be done with it.
• After that, we'll create a small example that demonstrates
some of the basic properties and events of a button.

33
 Button Control (Properties)
Name Availability Description

FlatStyle Read/Write The style of the button can be changed with

Dr. Irfana Memon

Department of CSE, QUEST
this property. If you set the style to PopUp,
the button will appear flat until the user
moves the mouse pointer over it. When that
happens, the button pops up to its normal
3D look.
Enabled Read/Write We'll mention this here even though it is
derived from Control, because it's a very
important property for a button. Setting the
Enabled property to false means that the
button becomes grayed out and nothing
happens when you click it.
Image Read/Write Allow you to specify an image (bitmap, icon
etc.), which will be displayed on the button. 34
ImageAlign Read/Write With this property, you can set where the
image on the button should appear.
 Button Control (Events)
• Most used event of a button is the Click event.
• This happens whenever a user clicks the button, by which we
mean pressing the left mouse button and releasing it again

Dr. Irfana Memon

Department of CSE, QUEST
while over the button.
• This means that if you left-click on the button and then draw
the mouse away from the button before releasing it the Click
event will not be raised.
• Also, the Click event is raised when the button has focus and
the user press Enter.
• If you have a button on a form, you should always handle this
event.

35
 Button Control (Example)
• Create a dialog with three buttons.
1. Open Visual Studio.NET and create a new C# Windows.
Application.

Dr. Irfana Memon

Department of CSE, QUEST
36
 Button Control (Example)
• Create a dialog with three
buttons.
2. Drag the Button control from the

Dr. Irfana Memon

Department of CSE, QUEST
ToolBox and drop it on the
windows form. You are allowed to
place a Button control anywhere on
the windows form according to
your need.

37
 Button Control (Example)
• Create a dialog with three buttons.

Dr. Irfana Memon

Department of CSE, QUEST
38
 Button Control (Example)
• Create a dialog with three
buttons.
3. After drag and drop you will

Dr. Irfana Memon

Department of CSE, QUEST
go to the properties of the
Button control to set the
properties of the Button.

39
 Button Control (Example)
• Create a dialog with three buttons.
4. What we want to do now is to display a message box
whenever the button is clicked. So we need the coding window.

Dr. Irfana Memon

Department of CSE, QUEST
To see the code for the button, double click the button you
added to the Form. When you do, the coding window will open,
and your cursor will be flashing inside of the button code. It will
look like this:

40
 Button Control (Example)

Dr. Irfana Memon

Department of CSE, QUEST
41
 Button Control (Example)
• Create a dialog with three buttons.
private void button1_Click(object sender, EventArgs e)
{

Dr. Irfana Memon

Department of CSE, QUEST
}
• This is just another Method, a piece of code that does
something.
• The name of the Method is button1_Click.
• It's called button1 because that's currently the Name of the
button. When you changed the Text, Location, and Size
properties of the button, you could have also changed the
Name property from button1 (the default Name) to
something else.
• The _Click part after button1 is called an Event. Other events 42
are MouseDown, LocationChanged, TextChanged, and lots
more. You'll learn more about Events later.
 Button Control (Example)
• Create a dialog with three buttons.
• After _Click, and in between a pair of round brackets, we
have this:

Dr. Irfana Memon

Department of CSE, QUEST
object sender, EventArgs e
• These two are know as arguments. One arguments is
called sender, and the other is called e.
Notice that there is a pair of curly brackets for the button code:
private void button1_Click(object sender, EventArgs e)
{
}
If you want to write code for a button, it needs to go between
the two curly brackets.
43
 Message Box
• We want to display a message box, with some text on it. This
is quite easy to do in C#.
• Position your cursor between the two curly brackets. Then
type a capital letter "M". You'll see the IntelliSense list
appear:

Department of CSE, QUEST

Dr. Irfana Memon
44
 Message Box
• Now type "ess" after the "M". IntelliSense will jump down:

Department of CSE, QUEST

Dr. Irfana Memon
The only options that start with Mess are all Message ones. The
one we want is MessageBox. You can either just type the rest,
45
or even easier is to press the down arrow on your keyboard to
move down to MessageBox:
 Message Box
When you have MessageBox selected, hit the enter key on your
keyboard (or double click the entry on the list). The code will
be added for you:

Department of CSE, QUEST

Dr. Irfana Memon
Now type a full stop (period) after the "x" of MessageBox. The
IntelliSense list will appear again:

46
 Message Box
• There are only three items on the list now, and all Methods
(you can tell they are Methods because they have the purple
cube icon next to them) Double click on Show, and it will be
added to your C# code:

Department of CSE, QUEST

Dr. Irfana Memon
Because Show is a Method, we need some round brackets. The
text for our message box will go between the round brackets. So
type a left round bracket, just after the "w" of "Show":

47
 Message Box
• As soon as you type the left round bracket after the "w", you'll see
all the different ways that the Show method can be used.
• There are 21 different ways in total.
• At this time, you don't have to pursue through them all! Type the
following, after the left round bracket (Don't forget the double
quotation marks.):
"Message"

Department of CSE, QUEST

Dr. Irfana Memon
• After the final double quote mark, type a right round bracket. Then
finish off the line by typing a semi-colon ( ; ).
• The text in the double quotations will be displayed in your
message box.
• To try it out, save your work by clicking File from the menu bar at
the top of Visual Studio. From the File menu, click Save All. Save
the project.
• Run your programme by clicking Debug > Start Debugging (or 48
Start Without Debugging).
• Or just press the F5 key on your keyboard.
 Button Control (Example)
• Create a dialog with three buttons.
4. Click Start to run it

Department of CSE, QUEST

Dr. Irfana Memon
49
 Button Control (Example)
If you look at the message box we
created, you'll notice there's no Title
in the blue area to the left of the red
X - it's blank:
You can add a Title quite easily.
• Click OK on your Message Box. Then click the Red X on your

Department of CSE, QUEST

Dr. Irfana Memon
programme to exit it. This will return you to Visual C#. Go
back to the coding window (press F7 on your keyboard, if
you can't see it).
• Position your cursor after the final double quote of
("Message“, First ),
• When you run it, First will be written on message box.
50
 Other Button Options
• Rather than having just an OK
button, you can add buttons
like Yes, No, and Cancel to your
C# message boxes.

Department of CSE, QUEST

Dr. Irfana Memon
• We'll add a Yes and a No button.
• Return to your coding window.
• After the second double quote of the Title you've just added,
type another comma.
• Hit the spacebar on your keyboard once, and you'll see the
IntelliSense list appear. (If it doesn't appear, just type a
51
capital letter "M").
 Other Button Options
• We'll add a Yes and a No button.
• Return to your coding window.
• After the second double quote of the Title you've just added,
type another comma.
• Hit the spacebar on your keyboard once, and you'll see the
IntelliSense list appear. (If it doesn't appear, just type a

Department of CSE, QUEST

Dr. Irfana Memon
capital letter "M").

52
 Other Button Options
• The one that adds buttons to a message box is, you won't
be surprised to hear, MessageBoxButtons.
• Press the enter key on your keyboard when this option is
highlighted. I
• t will be added to the your code.
• Now type a full stop (period) after the final "s" of

Department of CSE, QUEST

Dr. Irfana Memon
MessageBoxButtons. You'll see the button options:

53
 Other Button Options
• Double click the one for YesNo, and it will be added to your
code.
• Run your program again, and click your button. Your
Message Box will then look like this:

Department of CSE, QUEST

Dr. Irfana Memon
54
 Adding Icons to Button
• Another thing you can add to brighten up your Message Box
is an Icon.
• Type another comma after MessageBoxButtons.YesNo.
• After the comma, type a capital letter "M" again.
• From the IntelliSense list that appears, double click
MessageBoxIcon.

Department of CSE, QUEST

Dr. Irfana Memon
55
 Adding Icons to Button
• After MessageBoxIcon, type a full stop to see the available
icons:

• We've gone for Warning.

• Double click this to add it to

Department of CSE, QUEST

Dr. Irfana Memon
your code.
• Run your program again to see
what the icon looks like on
your Message Box:

56
 Practice on the use of Button

Dr. Irfana Memon

Department of CSE, QUEST
Write a c# form program for button control. Try the with
other button options and icons on the IntelliSense list, and
see what they look like when your program runs.

57
 Checkbox Control
CheckBox has 2 or 3 states. This control provides a way for an
option to be selected and deselected independently of other

Dr. Irfana Memon

Department of CSE, QUEST
options. As with other controls, it can be manipulated in C#
code for custom behaviors.

58
 Checkbox Control (Example)
• Create a dialog with one button and three checkbox.
1. Open Visual Studio.NET and create a new C# Windows.
Application.

Dr. Irfana Memon

Department of CSE, QUEST
59
 Checkbox Control (Example)
• Create a dialog with one button and three checkbox.
2. Drag the one Button control and three checkbox control from
the ToolBox and drop it on the windows form. You are allowed

Dr. Irfana Memon

Department of CSE, QUEST
to place a Button control anywhere on the windows form
according to your need.

60
 Checkbox Control (Example)
• Create a dialog with one button and three checkbox.

Dr. Irfana Memon

Department of CSE, QUEST
61
 Checkbox Control (Example)
1. In the properties area on the right, notice that the default
Name property is checkBox1, checkBox2, checkBox3.

Department of CSE, QUEST

Dr. Irfana Memon
Locate the Text property and change it to C, C++, C#.
2. Also Default name of button is button1. Locate
the Text property and change it to Select.

62
 Checkbox Control (Example)

Department of CSE, QUEST

Dr. Irfana Memon
1. In the properties area on the right, notice that the default
Name property is checkBox1, checkBox2, checkBox3.
Locate the Text property and change it to C, C++, C#.

2. Also Default name of button is button1. Locate

the Text property and change it to Select.

63
 Checkbox Control (Example)

Dr. Irfana Memon

64

Department of CSE, QUEST

 Checkbox Control (Example)

Department of CSE, QUEST

Dr. Irfana Memon
• Run your form and test it out. What you should find is that
you can select as many checkboxes as you like.
• Stop your program and return to Design Form . Now we do
coding for button and checkbox.

65
 Checkbox Control (Example)
• Double click your Select button to open up the code window.
Our code will make use of the Checked property of
Checkboxes. This is either true or false. It will be true if the
user places a check in the box, and false if there is no check.

Department of CSE, QUEST

Dr. Irfana Memon
66
 Checkbox Control (Example)

Dr. Irfana Memon

67

Department of CSE, QUEST

 Checkbox Control (Example)
Create a dialog with one button and three checkbox.
• Run the Program

Department of CSE, QUEST

Dr. Irfana Memon
68
 RadioButton Control
RadioButton allows distinct selection of several items. In each
group of RadioButtons, only one can be checked or selected.
Conceptually, this control implements an exclusive selection.

Dr. Irfana Memon

Department of CSE, QUEST
69
 RadioButton Control (Example)
• Create a dialog with one button and three RadioButton.
1. Open Visual Studio.NET and create a new C# Windows.
Application.

Dr. Irfana Memon

Department of CSE, QUEST
70
 RadioButton Control (Example)
• Create a dialog with one button and three RadioButton.
2. Drag the one Button control and three RadioButton control from the
ToolBox and drop it on the windows form. You are allowed to place a

Dr. Irfana Memon

Department of CSE, QUEST
Button control anywhere on the windows form according to your
need.

71
 RadioButton Control (Example)
1. In the properties area on the right, notice that the default
Name property is radioButton1, radioButton2,

Department of CSE, QUEST

Dr. Irfana Memon
radioButton3. Locate the Text property and change it
to CSE, IT, Civil.
2. Also Default name of button is button1. Locate
the Text property and change it to Select Depatment.

72
 RadioButton Control (Example)
• Run your form and test it out. What you should find is that

Department of CSE, QUEST

Dr. Irfana Memon
you can select one radioButton at a time.
• Stop your program and return to Design Form . Now we do
coding for button and checkbox.

73
 RadioButton Control (Example)
• Double click your Select Department button to open up the
code window. Our code will make use of
the Checked property of radioButtons. This is either true or
false. It will be true if the user places a check in the box, and
false if there is no check.

Department of CSE, QUEST

Dr. Irfana Memon
74
 RadioButton Control (Example)
• Run the Program

Department of CSE, QUEST

Dr. Irfana Memon
75
 CheckedListBox Controls
CheckedListBox. This control presents several items in a list.
Each item is checkable—the user can check a box. The
CheckedListBox control in Windows Forms is a way to make

Department of CSE, QUEST

Dr. Irfana Memon
longer, dynamic checkable lists.

76
 Label Controls
• One useful control in Windows Forms is the Label control.
• This control serves as an invisible frame where you can place
text.

Department of CSE, QUEST

Dr. Irfana Memon
• Labels can have lots of text, but often only have a few words.
• They can be mutated in your C# code.

77
 PictureBox Controls
• PictureBox provides a rectangular region for an image. It
supports many image formats.
• It has an adjustable size.

Department of CSE, QUEST

Dr. Irfana Memon
• It can access image files from your disk or from the
Internet.
• It can resize images in several different ways.

78
 LinkLabel Control
• A LinkLabel control is a label control that can display a
hyperlink.
• A LinkLabel control is inherited from the Label class so it has
all the functionality provided by the Windows Forms Label
control.
• LinkLabel control does not participate in user input or

Department of CSE, QUEST

Dr. Irfana Memon
capture mouse or keyboard events.

79
 TextBox Control
TextBox. This lets users type letters and enter data. It is part
of the Windows Forms platform and is used with C# code. It

Dr. Irfana Memon

Department of CSE, QUEST
is added with the Visual Studio designer. Many events and
properties are available on this control.

80
 TextBox Controls (Example)
We can add two more controls to the form, a Button and a
Text Box.

Dr. Irfana Memon

Department of CSE, QUEST
OK, time to add some code. Before
you do, click File > Save All from the
menu bar at the top of Visual C#. You
can also run your program to see
what it looks like. Type some text in
your text box, just to see if it works.
Nothing will happen when you click
your button, because we haven't
written any code yet. Let's do that
now. Click the red X on your form to 81

halt the program, and you'll be

returned to Visual C#.
 TextBox Controls (Example)

Dr. Irfana Memon

82

Department of CSE, QUEST

 RichTextBox Control
• RichTextBox has many formatting options.

Department of CSE, QUEST

Dr. Irfana Memon
• It applies colors, background colors, multiple fonts, and
margins to the text.
• It adds more complexity than the regular TextBox.
• But the RichTextBox provides needed features to programs.

83
 Remaining Control

Dr. Irfana Memon

84

Department of CSE, QUEST

 Remaining Control

we were discussing Common controls and their properties. Let

Department of CSE, QUEST

Dr. Irfana Memon
discuss remaining common controls.

• Date Time Picker

• Month Calendar
• MaskedTextBox
• Progress bar

85
 DateTimePicker Control
• The DateTimePicker control is used to select date & time, and to
display date and time in the specified format.

Department of CSE, QUEST

Dr. Irfana Memon
86
 DateTimePicker Control

• After you place a DateTimePicker control on a Form, the next

step is to set its properties.

• And you know that the easiest way to set properties is from the

Department of CSE, QUEST

Dr. Irfana Memon
Properties Window.

• Take a look on the properties:

87
DateTimePicker Control (Properties)

• The DateTimePicker control has two parts, a label that

displays the selected date and a popup calendar that allows
users to select a new date.

• The most important property of the DateTimePicker is the

Department of CSE, QUEST

Dr. Irfana Memon
Value property, which holds the selected date and time.

dateTimePicker1.Value = DateTime.Today;

The Value property contains the current date and time the
control is set to.
88
DateTimePicker Control (Properties)

• You can use the Text property or the appropriate member of

Value to get the date and time value.

• DateTime iDate;
• iDate = dateTimePicker1.Value;

Department of CSE, QUEST

Dr. Irfana Memon
• The control can display one of several styles, depending on
its property values.
• The values can be displayed in four formats, which are set
by the Format property: Long, Short, Time, or Custom.

• dateTimePicker1.Format = DateTimePickerFormat.Short; 89
 Convert string to DateTime

• Different methods like Convert.ToDateTime(String),

DateTime.Parse() and DateTime.ParseExact() methods can be
used for converting a string-based date to a System.DateTime
object.

Department of CSE, QUEST

Dr. Irfana Memon
• To find date difference

• The DateTime.Substract method may be used in order to

find the date-time difference between two instances of the
DateTime method.

90
DateTimePicker Control (Properties)
Name: Name property represents a unique name of a
DateTimePicker control. It is used to access the control in the code.

Location (Height, Width): The Location property takes a Point

that specifies the starting position of the DateTimePicker on a Form.

Department of CSE, QUEST

Dr. Irfana Memon
Size: The Size property specifies the size of the control.

Font: Font property represents the font of text of a DateTimePicker

control. If you click on the Font property in Properties window, you
will see Font name, size and other font options.

Value: The Value property represents the currently set date time
91
value in a control.

Format: The Format property is used to set the Time.

DateTimePicker Control (Properties)
MinDate : The MinDate used to set the minimum value of date and
time can be selected by a control

MaxDate: The MaxDate used to set the maximum value of date and
time can be selected by a control.

Calendar Foreground and Background:

Department of CSE, QUEST

Dr. Irfana Memon
CalendarFont,CalendCalendarForeColor, CalendarMonthBackground,
CalendarTitleBackColor, and CalendarTitleForeColor properties may
be used to format calendar.

ShowCheckBox and ShowUpDown: You can make a

DateTimePicker control editable where you can change the value
without using the Calendar. This can be done by setting
92
ShowCheckBox property to true. Once this property is true, the
date part of the control is editable.
 MonthCalender Control
MonthCalendar Control is referred as a graphical interface that is
widely used to modify and set date information based on your
requirements.

Properties:
•Name

Department of CSE, QUEST

Dr. Irfana Memon
•Backcolor
•Forecolor
•SelectionRange
•SelectionStart
•FirstDayOfWeek
•MaxDate
•ShowTodayCircle
•MinDate
•ShowDate
•CalendarDimensions 93
•TodayDate
•ShowWeekNumbers
 MonthCalender Control
(Properties)
MonthCalendar control comes with different useful properties
including, name, location, font, forecolor, back color, margin,
MaximumDate, MaximumSize etc. Let’s discuss them one by
one. Following window will appear as click on the properties.

Properties:

Department of CSE, QUEST

Dr. Irfana Memon
•Name
•Backcolor
•Forecolor

94
 MonthCalender Control
(Properties)
SelectionRange

SelectionRange is widely used property which defines the selected

range of dates in the control.

SelectionStart

Department of CSE, QUEST

Dr. Irfana Memon
SelectionStart property specifies the start date of the selected range
of dates.

FirstDayOfWeek
FirstDayOfWeek property gives you an option to start week in the
application with your preferred day. By default Sunday is selected as
the start of the week and Saturday is considered as the last day of 95
the week.
 MonthCalender Control
(Properties)
ShowTodayCircle

ShowTodayCircle property is used to set the circle around current

date. By default the value of this property is set as true. You can set it
to false if you want to remove the circle around the current date.

Department of CSE, QUEST

Dr. Irfana Memon
•ShowDate

ShowDate property displays the current date at the bottom of the

calendar if its value is set as true. Setting the value to false will
disappear the date at the bottom of the calendar.

96
 MonthCalender Control
(Properties)
MaxDate and MinDate

The maximum and minimum time period in the control is set

by using two properties MaxDate and MinDate.

MaxDate determines the maximum valid date for the control.

Department of CSE, QUEST

Dr. Irfana Memon
MinDate determines the minimum valid date for the control.

Forexample: MaxDate as 12/31/2021 and MinDate as

1/1/1700

97
 MonthCalender Control
(Properties)
•CalendarDimensions
CalendarDimensions determines the number of months in a single
grid.
Default dimension is set as (1,1) which will only display one month
range in the grid.
Maximum 12 month can be displayed in a single grid.
Maximum dimension you can set is (4,3) which shows 12 months in

Department of CSE, QUEST

Dr. Irfana Memon
four columns and three rows.
Following figure shows two columns and two rows in the calendar
grid because dimensions are set as (2,2)

98
 MonthCalender Control
(Properties)
•TodayDate

•TodayDate is very useful property that determines the current

date it captures from the system.

Department of CSE, QUEST

Dr. Irfana Memon
•You can select any date explicitly using TodayDate property
and set it as current date.

BoldedDates
It is used to highlight some dates on the calendar.

99
 MonthCalender Control
•ShowWeekNumbers
(Properties)
ShowWeekNumbers property allows you to display week
number on the calendar. By default this property value is set as
false.
Set this value as true if you want to display number of weeks

Department of CSE, QUEST

Dr. Irfana Memon
in the current month of the calendar.
In the following figure, 9,10,11,12,13,14 are the week numbers
of the calendar year.

100
 MaskedTextBox Control
• MaskedTextBox accepts text input of a specific format.
• We often require phone numbers to have their area code and
also the correct number of digits.

Department of CSE, QUEST

Dr. Irfana Memon
• To solve this problem, we use the MaskedTextBox control in
Windows Forms.
Properties:
• Location
• Size
• Background, Foreground, BorderStyle
• Name
• Text •Font
• TextAlign • Maximum Length
• TextLength • Mask 101
• MaskFull
• BeepOnError
 ProgressBar Control
A ProgressBar control is used to represent the progress of a
lengthy operation that takes time where a user must wait for
the operation to be finished.
Properties:
•Name
•Positioning a ProgressBar

Department of CSE, QUEST

Dr. Irfana Memon
•Dock property
•Minimum
•Maximum
•Value
•RightToLeftLayout
•MarqueeAnimationSpeed
102
 ProgressBar Control (Example)
Let see how we use progressbar ?
For this we need three controls: Button, Progressbar, Timer
1. Open new project.
2. Drag and Move one button, one progressbar, and one timer
from toolbox to form.
3. Now set properties of each tool according to your

Department of CSE, QUEST

Dr. Irfana Memon
requirement.

103
 ProgressBar Control (Example)
4. Double click on button, it transfer you code page. Do this
coding:

Department of CSE, QUEST

Dr. Irfana Memon
5. Double click on Timer, it transfer you code page. Do this coding:

104
 ProgressBar Control (Example)
6. Run, click button and see progress filling.

Department of CSE, QUEST

Dr. Irfana Memon
7. Speed of filling can be controlled by increasing/decreasing
interval property of timer. 105
 Container

Dr. Irfana Memon

Department of CSE, QUEST
106
 Container
• Container controls are specialized controls that serve as a
customizable container for other controls.

• Container controls give the form logical and physical

subdivisions that can group other controls into consistent UI
(User Interface) subunits

Department of CSE, QUEST

Dr. Irfana Memon
1. Panel
2. FlowLayoutPanel
3. TableLayoutPanel
4. GroupBox
5. SplitContainer
6. TabControl 107
 Panel Controls

• The Panel control creates a subsection of a form that can

host other controls.
• The Panel can be indistinguishable from the rest of the

Department of CSE, QUEST

Dr. Irfana Memon
surrounding form, or it can be surrounded by a border as
determined by the BorderStyle property.

108
 Panel Controls
To create a Panel Control at design-time, you can drag and drop a
Panel Control from the Toolbox to a Form in Visual Studio.
After you dragging and dropping a Panel Control to the Form, the

Department of CSE, QUEST

Dr. Irfana Memon
Panel looks like Figure.
Once a Panel is on the form, you can move it around and resize it
using the mouse and set its properties and events.

109
 Panel Controls (Properties)
After you place a Panel Control on a form, the next step is to
set its properties.
The easiest way to set properties is from the Properties
Window.

Department of CSE, QUEST

Dr. Irfana Memon
You can open the Properties window by pressing F4 or right-
clicking on a control and selecting the Properties menu item.
The Properties window looks as in Figure.

110
 Panel Controls (Properties)
• The Panel has most of the common properties
• Important properties of the Panel control are shown in
Table.

Department of CSE, QUEST

Dr. Irfana Memon
111
 GroupBox Controls
• In a GroupBox other controls may be placed.
• When designing user interfaces in Windows Forms, you can
use this control to create a square shape where you can place

Department of CSE, QUEST

Dr. Irfana Memon
other controls.
•This creates an important level of visual continuity.

Properties
•The GroupBox has most of
the common control
properties, such as Location,
Height, Width, and Size,
Background and
Foreground, Name, Text, 112
and Font.
 FlowLayoutPanel
•FlowLayoutPanel control is used to arrange its child controls
in a horizontal or vertical flow direction.
•Or in other words, FlowLayoutPanel is a container which is
used to organize different or same types of controls in it either
horizontally or vertically.
•The FlowLayoutPanel class is used to represent windows flow

Department of CSE, QUEST

Dr. Irfana Memon
layout panel and also provide different types of properties,
methods, and events.

Properties:

AutoScroll , AutoSize, BorderStyle, AutoSizeMode,

FlowDirection, Padding, and WrapContents 113
 TableLayoutPanel
• The TableLayoutPanel control is a specialized panel that aids
in the design and layout of the UI (User Interface).
• The TableLayoutPanel is essentially a table that provides cells
for the individual hosting of controls.
• You can drag controls from the Toolbox into each of the cells.

Department of CSE, QUEST

Dr. Irfana Memon
Properties:
Grid
AutoSize

114
 TabControl
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.

Department of CSE, QUEST

Dr. Irfana Memon
Properties:
TabPages
BorderStyle
Appearance
Alignment
Multiline
Autoscroll 115
Borderstyle
Text
 SpiltContainer Controls
The SplitContainer control provides the functionality of a
splitter to divide and resize two controls.

Department of CSE, QUEST

Dr. Irfana Memon
Properties:
Orientation
Panel1 and Panel2
SplitterDistance
SplitterIncrement
SplitterRectangle
SplitterWidth

116
 Wish You Good Luck

Dr. Irfana Memon

Department of CSE, QUEST
117