Department of CE/IT

Dot Net Technologies

Building GUI with C# Unit no : 5

Dot Net Technologies
(01CE0602)
Unit 5: Building GUI with C#
1) Working with C# windows applications Department of CE/IT
2) Working with common form controls
3) Visual Inheritance Unit no : 5
4) Creating MDI Form Dot Net Technology
(01CE0602)
5) Event Handling
 Till now we have seen console application

All the output and input operation results were on console in form of
text

Working
with C# Windows Forms is a Graphical User Interface(GUI) class library
which is bundled in .Net Framework.
windows
applications Its main purpose is to provide an easier interface to 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.

WinForms can be used only to develop the Windows Forms

Working Applications not web applications.

with C#
windows WinForms applications can contain the different type of controls like
labels, list boxes, tooltip etc.
applications
To create windows Forms Application, follow steps shown
 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

1. Open Visual Studio

Creating
Windows 2. On the start window, select Create a new project.
Form
Application
 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

1. Open Visual Studio

Creating
Windows 2. On the start window, select Create a new project.
Form
Application
 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

1. Open Visual Studio

Creating
Windows 2. On the start window, select Create a new project.
Form
Application 3. On the Create a new project window, select the Windows Forms
App (.NET Framework) template for C#
 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

1. Open Visual Studio

Creating
Windows 2. On the start window, select Create a new project.
Form
Application 3. On the Create a new project window, select the Windows Forms
App (.NET Framework) template for C#
 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

1. Open Visual Studio

Creating
Windows 2. On the start window, select Create a new project.
Form
Application 3. On the Create a new project window, select the Windows Forms
App (.NET Framework) template for C#

4. In the Configure your new project window, type or

enter DemoWinForm in the Project name box. Then, select Create.
 When the application is created successfully, you will be presented
with blank form

On Creation
of WinForms
Application
 When the application is created successfully, you will be presented
with blank form

On Creation
of WinForms
Application
 When the application is created successfully, you will be presented
with blank form.

Lets start creating a application, and exploring toolbox and

components that we can add to form and make it interactive.

On Creation
of WinForms
Application
 Lets see the properties of form

Form
properties
 Text: Gets or sets the text associated with this control

IsMdiContainer: Gets or sets a value indicating whether the form is a

container for multiple-document interface (MDI) child forms.
true if the form is a container for MDI child forms; otherwise, false. The
default is false.
Form
properties - IsMdiChild: Gets a value indicating whether the form is a multiple-
document interface (MDI) child form.
true if the form is an MDI child form; otherwise, false.

ForeColor: used to get/set forecolor of the control

 BackColor: this is used to the background color of the form.

Form
properties - MinimizeBox : Gets or sets a value indicating whether the Minimize button
is displayed in the caption bar of the form.
 MaximizeBox: Gets or sets a value indicating whether the Maximize button is
displayed in the caption bar of the form.

Form ControlBox: Gets or sets a value indicating whether a control box is displayed
properties - in the caption bar of the form.

true false
 Task :
Create a form with backcolor as white and forecolor as black
Set the text property to your firstname-Roll no
Set control box to false
Set the programatic name of form as your firstname.

Form -
 Some of the control we will be looking at are as follows:
1. Textbox
2. Label
3. Button
4. Checkbox
5. Radiobutton
Controls 6. Listbox
7. Combobox
8. Linklabel
9. Picturebox
10. MessageBox
11. Datetimepicker
 Label controls are typically used to provide descriptive text for a control.
For example, you can use a Label to add descriptive text for
a TextBox control to inform the user about the type of data expected in the
control.
Label controls can also be used to add descriptive text to a Form to provide
the user with helpful information.
For example, you can add a Label to the top of a Form that provides
Label instructions to the user on how to input data in the controls on the form.
Label controls can be also used to display run time information on the status
of an application.
For example, you can add a Label control to a form to display the status of
each file as a list of files is processed.
 To Add a label to form, drag and drop from toolbox the label on the form and
place it at the required position.

Properties:

Text : Set the Text associated with the control

Label TextAlign: set the position of the text within the label.

BackColor: sets the back color of label.

Forecolor: set the forecolor of the label text color.

Visible: determines the visibility of control, true visible, otherwise false.

Label
Label
 With the TextBox control, the user can enter text in an application.

This control has additional functionality that is not found in the standard
Windows text box control, including multiline editing and password character
masking.

TextBox Typically, a TextBox control is used to display, or accept as input, a single line
of text.

You can use the Multiline and ScrollBars properties to enable multiple lines of
text to be displayed or entered.

Set the AcceptsTab and AcceptsReturn properties to true to enable greater text
manipulation in a multiline TextBox control.
 To Add a TextBox to form, drag and drop from toolbox the TextBox on the
form and place it at the required position.

Properties:

Text : Set the Text associated with the control

TextBox CharacterCasing: sets casing to Upper, Nornal, Lower.
BackColor: sets the back color of label.
Forecolor: set the forecolor of the label text color.
Enable: Enable or disables textbox for input, true enabled, false disables
MaxLength: max characters allowed to be taken in input.
Multiline: Are multiple lines allowed to be in input, default single line input.
Default value is false.
TextBox
TextBox
 Represents a Windows button control

A Button can be clicked by using the mouse, ENTER key, or SPACEBAR if

the button has focus.

Set the AcceptButton or CancelButton property of a Form to allow users to

Button click a button by pressing the ENTER or ESC keys even if the button does not
have focus.

When you display a form using the ShowDialog method, you can use
the DialogResult property of a button to specify the return value
of ShowDialog.
 To add a button to the form, drag the control of toolbox and drop it on form or
panel.

Properties:

Text :Set the Text associated with the control

Button BackColor: sets the back color of label.
Forecolor: set the forecolor of the label text color.
TextAlignment: set or get the alignment of the text that will be displayed on
the control. [values: TopLeft, TopCenter, TopRight, MiddleLeft,
MiddleCenter, MiidleRight, BottomLeft, BottomCenter, BottomRIght[
FlatStyle : Determines the appearance of the control, when a user moves
mouse over the control [Values: flat, popup, standard, system]
Button
 After clicking button 1,
Properties are updated

Button
 Enables the user to select a single option from a group of choices when paired
with other RadioButton controls.

The RadioButton control can display text, an Image, or both

When the user selects one option button (also known as a radio button) within
RadioButton a group, the others clear automatically.

All RadioButton controls in a given container, such as a Form, constitute a

group.

To create multiple groups on one form, place each group in its own container,
such as a GroupBox or Panel control.
 Use the Checked property to get or set the state of a RadioButton.

Properties:

Text :Set the Text associated with the control

BackColor: sets the back color of label.
RadioButton Forecolor: set the forecolor of the label text color.
TextAlignment: set or get the alignment of the text that will be displayed on
the control. [values: TopLeft, TopCenter, TopRight, MiddleLeft,
MiddleCenter, MiidleRight, BottomLeft, BottomCenter, BottomRIght[
FlatStyle : Determines the appearance of the control, when a user moves
mouse over the control [Values: flat, popup, standard, system]
Checked : indicates component is in checked state or not. (can be set to true
only for one radio button in a group)
RadioButton
RadioButton
 Represents a Windows CheckBox.

Use a CheckBox to give the user an option, such as true/false or yes/no.

The CheckBox control can display an image or text or both.

CheckBox CheckBox and RadioButton controls have a similar function: they allow the
user to choose from a list of options.

CheckBox controls let the user pick a combination of options. In contrast,

RadioButton controls allow a user to choose from mutually exclusive options.

 Use the Checked property to get or set the state of a CheckBox.

Properties:

Text :Set the Text associated with the control

BackColor: sets the back color of label.
CheckBox Forecolor: set the forecolor of the label text color.
TextAlignment: set or get the alignment of the text that will be displayed on
the control. [values: TopLeft, TopCenter, TopRight, MiddleLeft,
MiddleCenter, MiidleRight, BottomLeft, BottomCenter, BottomRIght[
FlatStyle : Determines the appearance of the control, when a user moves
mouse over the control [Values: flat, popup, standard, system]
Checked : indicates component is in checked state or not.
CheckBox
CheckBox
 Represents a Windows combo box control.

A ComboBox displays a text box combined with a ListBox, which enables the
user to select items from the list or enter a new value.

You can add individual objects with the Add method. You can delete items
ComboBox with the Remove method or clear the entire list with the Clear method.

the ComboBox also provides features that enable you to efficiently add items
to the ComboBox and to find text within the items of the list.

The FindString and FindStringExact methods enable you to search for an item
in the list that contains a specific search string.
 the SelectedIndex property to get or set the current item, and
the SelectedItem property to get or set a reference to the object.
Properties:
SelectedIndex : to get or set the current item
SelectedItem : to get or set a reference to the object
DropDownStyle: Control the appearance of combobox [ Simple, DropDown,
ComboBox DropDownList]
Sorted: specifies, wether item in the list portion of combobox is sorted or not.
BackColor: sets the back color of label.
Forecolor: set the forecolor of the label text color.
Items : add a list of items as collection.
ComboBox
ComboBox
 Represents a Windows control to display a list of items.

The ListBox control enables you to display a list of items to the user that the
user can select by clicking.

A ListBox control can provide single or multiple selections using

ListBox the SelectionMode property.

The ListBox also provides the MultiColumn property to enable the display of
items in columns instead of a straight vertical list of items.

The FindString and FindStringExact methods enable you to search for an item
in the list that contains a specific search string.
 the SelectedIndex property to get or set the current item, and
the SelectedItem property to get or set a reference to the object.
Properties:
SelectedIndex : to get or set the current item
SelectedItem : to get or set a reference to the object
Sorted: specifies, wether item in the list portion of combobox is sorted or not.
ListBox BackColor: sets the back color of label.
Forecolor: set the forecolor of the label text color.
Items : add a list of items as collection.
SelecttionMode: if the listbox support selection [None, One, MultiSimple]
MultiColumn: Indicates if the values to e displayed in column horizintally.
ListBox
ListBox
 Represents a Windows label control that can display hyperlinks.

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
LinkLabel control does not participate in user input or capture mouse or
keyboard events.

Multiple hyperlinks can be specified in the text of the control.

Each hyperlink can perform a different task within an application.

 Properties:
Text : Set the Text associated with the control

TextAlign: set the position of the text within the label.

BackColor: sets the back color of label.

LinkLabel
Forecolor: set the forecolor of the label text color.

LinkVisited: determines if the hyperlink should be rendered as visited or not.

VisitedLinkColor: determines the color of hyperlink when LinkVisited is set

to true.
 Lets add a LinkLabel from toolbox

LinkLabel
 Double click on label, to generate click event on label and add the code in
generated methods as shown below

LinkLabel
 Click on “open Notepad”, to open notepad.

LinkLabel
LinkLabel
 Inheritance is an important feature of Object oriented Programming language,
using which we can reuse code and extend the functionality of a class.
Because OOPS technology is applied to visual elements like buttons, text
boxes or any controls in a windows form, inheriting of the visual elements is
referred to as visual inheritance.
Form inheritance enables you to create a base form and then inherit from it

Visual
and make modifications while preserving whatever original settings you need.
To implement Visual Inheritance, we create a windows Form (base form ) and
Inheritance inherit forms from the base form.
This is known as Form inheritance.
The advantage of using this feature is that when changes are made to the base
form, all the inherited forms will automatically adapt the changes.
You can create derived-class forms programmatically or by using the Visual
Inheritance picker.
 In your class, add a reference to the namespace containing the form you wish
to inherit from.

In the class definition, add a reference to the form to inherit from. The
reference should include the namespace that contains the form, followed by a
period, then the name of the base form itself.
Visual
Inheritance -
Programmatically

When inheriting forms, keep in mind that issues may arise with regard to
event handlers being called twice, because each event is being handled by
both the base class and the inherited class.
 Form 1 in action

Visual
Inheritance –
Programmatically
Example
 Form 1, when button1 is clicked a message box is shown

Visual
Inheritance –
Programmatically
Example

Lets inherit form in form2, programmatically.

 Add new class file, [Link]

Visual
Inheritance –
Programmatically
Example
 Form 2 in Action

Visual
Inheritance –
Programmatically
Example
 We have Seen Form1, at start, as shown below.

Visual
Inheritance –
Using Inheritance
Picker Dialog Box

Lets Create a Windows Form by using the Inheritance Picker

 In Visual Studio, from the Project menu, choose Add Windows Form.

Visual
Inheritance –
Using Inheritance
Picker Dialog Box
 The Add New Item dialog box opens, click on windows forms.

Visual
Inheritance –
Using Inheritance
Picker Dialog Box
 Select inherited form windows, change name if required, click Add.

Visual
Inheritance –
Using Inheritance
Picker Dialog Box
 Select Form that you want to inherit, from Inheritance Picker Dialog Box.
We are selecting Form1, click Ok.

Visual
Inheritance –
Using Inheritance
Picker Dialog Box
 Form3 will be Inheriting Visual Appearance from Form1

Visual
Inheritance –
Using Inheritance
Picker Dialog Box
 A Multiple Document Interface (MDI) programs can display multiple child
windows inside them.
This is in contrast to single document interface (SDI) applications, which can
manipulate only one document at a time.
Multiple-document interface (MDI) applications enable you to display
multiple documents at the same time, with each document displayed in its
own window.
MDI Forms MDI applications often have a Window menu item with submenus for
switching between windows or documents.
As stated, MDI Forms can display multiple child windows inside them, thus
form that display multiple child under it, is MDI parent and windows that are
displayed under it are its child.
 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.
Creating an MDI parent form is easy, both in the Windows Forms Designer
and programmatically.

MDI Parent
 Create an MDI parent form at design time

MDI Parent

Change the IsMDIContainer Property to true.

 As property IsMdiContainer is changed, appearance also changes.

MDI Parent
 To display any form under MDI parent, set the property MdiParent of that
form to MDI parent.
To demonstrate, lets add Form4 with label having text as MDI CHILD

MDI Child
 On Form Load event of Form1, create a object of Form4 in Form1, and set its
MdiParent as Form1.

MDI Child
 Now when you will run your application, you will see Form4 is contained
inside Form1, as shown below.

MDI Child

Note: As soon as close MDI parent form, all child forms are also closed
automatically.
 Events are based on delegate Model.
We have seen Event handler delegate and event, and how we can subscribe a
methods with event with “+=“ and unsubscribe with “-=“.
Lets see how mouse events and key events and click events in action with
example.

Event handling
 Lets say we have Form1 as shown below, with label on it.

Event handling
 We will add mouse enter, leave, down and up event on the form and will
change text of label .accordingly.

Event handling
 Initially

Event handling
 As soon as mouse comes over form label text will be changed to “mouse
entered” and as move away from form, label text will be change to “mouse
left”

Event handling
 Similarly, as you press mouse for click, it will show mouse down at given
location and as soon you release mouse button, it will show mouse up at
location.

Event handling
 Things to note:
MouseEnter and MouseLeave are just Notifications , thus using EventArgs as
second parameter.
MouseDown and MouseUp are notification along with data, location of x,y
where mouse button pressed and released, thus taking MouseEventArgs as
second Parameter, as MouseEventArgs Inherits EventArgs and incorporates
location data into it.
Event handling
 Things to note:
Also the methods are subscribed to events using “+=“, check your form
designer file generated by visual studio IDE.
In out case it is [Link].
Check how methods are subscribed to events in the InitializeComponent();
method

Event handling
Thanks