Building Windows Forms Application

Objectives
◆ Overview Windows Forms (WinForm)
◆ Explain about type Controls and Components in WinForm
◆ Working with Common Controls: Label, TextBox, MaskedTextBox,etc
◆ Working with Menu, ProgressBar and Timer in WinForm
◆ Explain about Position and Layout in WinForm
◆ Demo create Windows Forms Application
◆ Demo creating and using Menu in WinForm
◆ Demo create MDI Application in WinForm
5/14/2021 2
Overview Windows Forms
 Introduction to Windows Forms
◆ Windows Forms is a UI framework for building desktop apps. It provides one of
the most productive ways to create desktop apps based on the visual designer
provided in Visual Studio
◆ With Windows Forms, we develop graphically rich apps that are easy to
deploy, update, and work while offline or while connected to the internet
◆ Windows Forms apps can access the local hardware and file system of the
computer where the app is running
◆ Windows Forms has rich UI controls that emulate features in high-end apps
like Microsoft Office
◆ Functionality such as drag-and-drop placement of visual controls makes it
easy to build desktop apps
5/14/2021 4
 Introduction to Windows Forms
◆ The Windows Forms development platform supports a broad set of app
development features, including controls, graphics, data binding, and user
input
◆ Windows Forms features a drag-and-drop visual designer in Visual Studio to
easily create Windows Forms apps
◆ Windows Forms is a UI technology for .NET, a set of managed libraries that
simplify common app tasks such as reading and writing to the file system
◆ When we use a development environment like Visual Studio, we can create
Windows Forms smart-client apps that display information, request input from
users, and communicate with remote computers over a network

5/14/2021 5
5/14/2021 6
Introduction to Windows Forms
◆ Click one deployment Create App with least operation

◆ Application setting Store global data to reuse anywhere

◆ New Windows Forms controls

ToolStrip, MenuStrip, ProgressBar, etc.

◆ New Data Binding model

Powerfull way to link control with data
source ( BindingSource component )
◆ Rich graphics
GDI+ : drawing and painting image on
forms

5/14/2021 7
Create WinForm Application Demonstration
1. Open Visual Studio
2. Select Create a new project

5/14/2021 9
3. In the Search for templates box, type winforms, and then press Enter
4. In the code language dropdown, choose C#
5. In the templates list, select Windows Forms App(.NET) and then click Next

5/14/2021 10
6. In the Configure your new project window, set the Project name to MyWinApp and
click Next (save project to a folder by adjusting the Location setting)
7. In the Additional information window, select Target Framework to .NET 5.0 and click
Create

5/14/2021 11
5/14/2021 12
Working with Controls in WinForm
 A Strategy for Designing the GUI
◆ Identify needed controls / components
◆ Isolate regions and behaviors
◆ Sketch (phác hoạ) the GUI
◆ Choose Layout managers

Input data
Implement
Requirements Output Data
event handlers
Operations

5/14/2021 14
 Forms Class
◆ Is represented as a class in the System.Windows.Forms namespace

◆ Is the basic unit of an application

◆ Presents information to the user

◆ Receives information from the user

Properties Text, BackColor, ForeColor, Font, WindowState,
AcceptButton, Location, Modal, Name
Methods Activate, Close, Focus, Hide, Show, Enabled

Events Load, Activated,Shown,Deactivate, FormClosing,

FormClosed, Resize, Click, GotFocus

5/14/2021 15
 Types of Control
◆ Base Control Class: The Control class is the base class for Windows Forms
controls. It provides the infrastructure required for visual display in Windows
Forms applications and provides the following capabilities:
▪ Exposes a window handle. Manages message routing
▪ Provides mouse and keyboard events, and many other user interface events
▪ Provides advanced layout features

◆ Composite Controls: A composite control is a collection of Windows Forms

controls encapsulated in a common container. This kind of control is sometimes
called a user control

5/14/2021 16
 Types of Control
◆ Extended Controls: It is a control that is created by inheriting from any existing
Windows Forms control. With this approach, we can keep all of the inherent
functionality of a Windows Forms control, and then extend that functionality by
adding custom properties, methods, or other features

◆ Custom Controls: It is a control that is created by inheriting from Control

class. The Control class provides all of the basic functionality required by
controls, including mouse and keyboard handling events, but no control-specific
functionality or graphical interface
5/14/2021 17
 Control Class
◆ Control class: Base class of all controls available in WinForms
Properties Method Event
• CanFocus • Focus • Click
• Controls • GetNextControl • ControlAdd
• Enable • Hide • DoubleClick
• IsMNemonic • Validating
• Name
• Select • Validated
• Parent
• Show • KeyPress
• TabIndex
• Leave
• Visible • LostFocus
• MouseClick
• Move

5/14/2021 18
 Label
◆ Label controls are used to display text that cannot be edited by the user.
They're used to identify objects on a form and to provide a description of
what a certain control represents or does

5/14/2021 19
 TextBox
◆ A TextBox control accepts user input on a Form

5/14/2021 20
 MaskedTextBox
◆ A MaskedTextBox control provides a validation mechanism for user input on a
Form. When we want a TextBox to accept a date in mm/dd/yyyy format, we can
set masking in the MaskedTextBox

5/14/2021 21
MaskedTextBox
Mask Description
0 Digit, required. [0-9]
9 Digit or space, optional
Digit or space, optional. If this position is blank in the mask, it will be rendered as a
#
space in the Text property. Plus (+) and minus (-) are allowed
L Letter, required [a-zA-Z]
? Letter, optional. [a-zA-Z]
& Character, required. If the AsciiOnly property = true, behaves like the "L"
Character, optional. Any non-control character. If the AsciiOnly property =true, this
C
element behaves like the "?" element
Alphanumeric, optional. If the AsciiOnly property =true, the only characters it will accept
A
are the ASCII letters a-z and A-Z
Alphanumeric, optional. If the AsciiOnly property is set to true, the only characters it will
a
accept are the ASCII letters a-z and A-Z
5/14/2021 22
 Button
◆ A Button control is a child control placed on a Form and used to process click
event and can be clicked by a mouse click or by pressing ENTER or ESC keys

5/14/2021 23
 ListBox
◆ A ListBox control provides a user interface to display a list of items. Users can
select one or more items from the list
◆ A ListBox may be used to display multiple columns and these columns may
have images and other controls

5/14/2021 24
 ComboBox
◆ The ComboBox control provides combined functionality of a text box and a
listbox in a single control. Only one list item is displayed at one time in a
ComboBox and rest of the available items are loaded in a drop down list

5/14/2021 25
 More Controls
◆ Value Setting ControlForm class
▪ RadioButton
▪ CheckBox
▪ CheckListBox
◆ Grouping Controls
▪ GroupBox
▪ Panel
◆ Images Control
▪ PictureBox
▪ ImageList

5/14/2021 26
 Grouping Control
◆ GroupBox: Represents a Windows
control that displays a frame around a
group of controls with an optional caption

◆ Panel: Used to group collections of

controls.

5/14/2021 27
 RadioButton
◆ A RadioButton control provides a round interface to select one option from a
number of options. Radio buttons are usually placed in a group on a container
control, such as a Panel or a GroupBox, and one of them is selected

5/14/2021 28
 Position and Layout of Controls
◆ Anchor: Anchoring a control allows
us to tie the control to one or more
sides of the parent container. As the
container changes in size, any child
control will maintain its distance to
the anchored side

5/14/2021 29
 Position and Layout of Controls
◆ Dock: The Dock property sets which
border of the control is aligned to the
corresponding side of the parent, and
how the control is resized within the
parent

◆ When a control is docked, the container

determines the space it should occupy
and resizes and places the control. The
width and height of the control are still
respected based on the docking style

5/14/2021 30
 Position and Layout of Controls
◆ Flow Layout: The FlowLayoutPanel control
arranges its contents in a horizontal or vertical
flow direction. We can wrap the control's contents
from one row to the next, or from one column to
the next

◆ Table layout: The TableLayoutPanel control

arranges its contents in a grid. Because the
layout is done both at design time and run time, it
can change dynamically as the application
environment changes

5/14/2021 31
Working with Controls Demonstration
1.Create a WinForm app named DemoCommonControls which includes a form
named frmEmployeeDetails as follows:

5/14/2021 33
2.Design UI as the following description table:

Object Type Object name Properties Event Handlers

Label lbTitle BorderStyle: FixedSingle ;
Font:16.2pt, style=Bold
Label lbEmpID Text : Employee ID
Label lbEmpName Text : Employee Name
Label lbPhone Text: Phone
Label lbGender Text : Gender
Label lbDegree Text: Degree
TextBox txtEmployeeID
TextBox txtEmployeeName
MaskedTextBox mtxtPhone Mask: 000-0000000
GroupBox gbGender

5/14/2021 34
Object Type Object name Properties Event Handlers
RadioButton rdMale Text: Male
Checked: true
RadioButton rdFemale Text: Female
ComboBox cboDegree Text: ---Select Degree---
Items:
Ph. D.
Master
Engineer
Bachelor
Technician
Button btnSave Text: &Save Click
Button btnCancel Text: &Cancel Click
Form frmEmployeeDetails Text: Employee Details;
StartPosition: CenterScreen
AcceptButton: btnSave
CancelButton: btnCancel
5/14/2021 35
3.Write codes for frmEmployeeDetails.cs then run project:

5/14/2021 36
 CheckBox
◆ A CheckBox control allows users to select single or multiple items from a list of
items

5/14/2021 37
 CheckedListBox
◆ Displays a ListBox in which a check box is displayed to the left of each item

5/14/2021 38
 DomainUpDown
◆ A DomainUpDown control allows users to provide a spin (up/down) interface to
move through pre-defined strings using up and down arrows
Properties Items, Wrap, ReadOnly
SelectedItem, SelectedIndex
Methods DownButton, UpButton

Events SelectedItemChanged

5/14/2021 39
 NumericUpDown
◆ A NumericUpDown control allows users to provide a spin (up/down) interface to
move through pre-defined numbers using up and down arrows
Properties Increment,Maximum,Minimum,Value
DecimalPlaces
ThousandsSeperator
Methods DownButton
UpButton
Events ValueChanged

5/14/2021 40
 SplitContainer
◆ The SplitContainer control can be
thought of as a composite control. It's
two panels separated by a movable
bar. When the mouse pointer is over
the bar, the pointer changes shape to
show that the bar is movable

5/14/2021 41
 PictureBox
◆ PictureBox control is used to display images in Windows Forms
Properties Image, ErrorImage, InitialImage, SizeMode
Methods Load, LoadAsync
Events Click, Leave, LoadCompleted

5/14/2021 42
 ImageList
◆ Provides methods to manage a collection of
Image objects
Properties Images, ColorDepth, ImageSize, Name
Methods Draw
Events RecreateHandle

5/14/2021 43
 TreeView
◆ Used for displaying data in a hierarchical maner
◆ Has three types of nodes : Root, Parent and Leaf
Properties Nodes, TopNode, SelectedNode, ShowPlusMinus,
ShowRootLines
Methods CollapseAll, ExpandAll, GetNodeAt, GetNodeCount

Events NodeMouseClick, ItemDrag, AfterCollapse,

AfterExpand, AfterSelect

5/14/2021 44
 ListView
◆ Used to display a collection of items in a list. The ListView control is an
ItemsControl that is derived from ListBox
◆ Types of ListView: Tile, List, Details, SmallIcon, LargeIcon
Properties Columns, Items, View, MultiSelect, Sort,
SelectedItems, SelectedIndices

Methods GetItemAt, Clear, ArrangeIcons

Events ColumnClick, SelectedIndexChanged,
ItemCheck, ItemSelectionChanged

5/14/2021 45
 DataGridView
◆ The DataGridView control provides a powerful and flexible way to display data
in a tabular format
◆ We can use the DataGridView control to show read-only views of a small
amount of data, or we can scale it to show editable views of very large sets of
data
◆ The DataGridView control supports display and edit tabular data from many
different kinds of data sources. Binding data to the DataGridView control is
straightforward and intuitive, and in many cases it is as simple as setting the
DataSource property
5/14/2021 46
 DataGridView
◆ The DataGridView control supports the standard Windows Forms data binding
model, so it will bind to instances of classes described in the following list:

▪ Any class that implements the IList interface, including one-dimensional arrays

▪ Any class that implements the IListSource interface, such as the DataTable and DataSet
classes

▪ Any class that implements the IBindingList interface, such as the BindingList<> class

▪ Any class that implements the IBindingListView interface, such as the BindingSource
class
5/14/2021 47
DataGridView

5/14/2021 48
 RichTextbox
◆ RichTextBox control is a textbox that gives us rich text editing controls and
advanced formatting features also includes loading rich text format (RTF) files
Properties Font, ScrollBars, SelectedText,
SelectionFont, SelectionLength, Text,
WordWrap
Methods AppendText, Copy, Paste, Redo, Undo
Events Click, HScroll, Vscroll,
SelectionChanged

5/14/2021 49
 ProgressBar
◆ 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 Maximum; Minimum; Step; Style; Value

Methods Increment, PerformStep

5/14/2021 50
 DateTimerPicker
◆ The Windows Forms DateTimePicker control allows the user to select a
single item from a list of dates or times
Properties Format, MinDate, MaxDate, ShowCheckBox,
Value, CustomFormat
Methods Focus, Show
Events Click, FormatChanged, ValueChanged

5/14/2021 51
 Timer
◆ The Timer class in C# represents a Timer control that executes a code block at
a specified interval of time repeatedly
Properties Enable, Interval

Methods Start, Stop

Events Tick

5/14/2021 52
 MenuStrips
◆ Common UI elements that may be contained within a MenuStrip:
▪ ToolStripMenuItem: A traditional menu item
▪ ToolStripComboBox: An embedded ComboBox
▪ ToolStripSeparator: A simple line that separates content
▪ ToolStripTextBox: An embedded TextBox
◆ When the ampersand character (&) is placed before a letter in a menu item, it
denotes the item’s shortcut key. In this example, we are creating &File and
E&xit; therefore, the user may activate the Exit menu by pressing Alt+F, and
then X

5/14/2021 53
 MenuStrips Demonstration
◆ Create a WinForm app named MyApp which includes a form named frmMain then writes codes as
follows:

5/14/2021 54
 MenuStrips Demonstration

5/14/2021 55
 Multiple-Document Interface(MDI) Application
◆ Multiple-document interface (MDI) applications enable you to display multiple
documents at the same time, with each document displayed in its own window
◆ The foundation of a Multiple-Document Interface (MDI) application is the MDI
parent form. This is the form that contains the MDI child windows, which are
the sub-windows wherein the user interacts with the MDI application
◆ MDI applications follow a parent form and child form relationship model. MDI
applications allow us to open, organize, and work with multiple documents at
the same time by opening them under the context of the MDI parent form
◆ MDI applications often have a Window menu item with submenus for switching
between windows or documents

5/14/2021 56
 MDI Application Demonstration

1.Create a WinForm app named MyMDIApp which includes a form named frmMain
2.On the frmMain, set the "IsMdiContainer" property to True (the default value is False).
Notice that the background color of the form has changed to dark gray
3.On the MyMDIApp project, right-click, and select Add | Form(Windows form) named
frmChildForm and click Add then design user interface as follows :

5/14/2021 57
 MDI Application Demonstration
4.Write codes for frmMain.cs then run project:

5/14/2021 58
 MDI Application Demonstration

5/14/2021 59
Lab and Assigment

1. Do Hands-on Lab:

Lab_01_AutomobileManagement_Using_LINQ and WinForms.pdf

2. Do Assigment:

Assignment_01_MemberManagement.pdf

5/14/2021 60
Summary
◆ Concepts were introduced:
▪ Overview Windows Forms (WinForm)
▪ Explain about type Controls and Components in WinForm
▪ Working with Common Controls: Label, TextBox, MaskedTextBox,etc
▪ Working with Menu, ProgressBar and Timer in WinForm
▪ Explain about Position and Layout in WinForm
▪ Demo create Windows Forms Application
▪ Demo creating and using Menu in WinForm
▪ Demo create MDI Application in WinForm

61