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
 Advanced User Interface
Enhancement
• After completing this chapter, you will be able to:

 Menues

Department of CSE, QUEST

Dr. Irfana Memon
 Dialog Boxes
 Types of a Dialog Box

4
 Menus
• Menus are a common Windows tool that make it easy to access
commonly used commands.
• It is not hard to imagine a Windows application with no menu
bar: all of your applications to this point have used buttons.
• Menus are a more natural interface than buttons because they

Department of CSE, QUEST

Dr. Irfana Memon
allow you to group related actions.
• Therefore, menus are an important part of most Windows
applications.
• The menu bar is found at the top of the application window
directly under the title bar.

5
 Menus
There are different menus supported in visual studio 2019.
1. ContextMenuStrip
2. MenuStrip
3. StatusStrip
4. ToolStrip

Department of CSE, QUEST

Dr. Irfana Memon
5. ToolStripContainer

6
 ContextMenuStrip
•The ContextMenuStrip control provides functionality of
context menus in Visual Studio 2019.
•To create a ContextMenuStrip control at design-time, you
simply drag and drop a ContextMenuStrip control from Toolbox
onto a Form in Visual Studio.

Department of CSE, QUEST

Dr. Irfana Memon
7

Figure 1 Figure 2
 ContextMenuStrip (Properties)

• The ContextMenuStrip has some common properties such as

Name, Background and Foreground, Font.
• Other properties are following:

 ContextMenuStrip Items

Department of CSE, QUEST

Dr. Irfana Memon
 Adding Menu Item Click Event Handler
 Display Image in a Menu Item
 Setting Image a Menu Item Background (BackgroundImage
property)
 Vertical Text in Menu Items(TextDirection property)
 Set Tooltip of a Menu Item (ToolTipText property)
 Menu Grip 8
 ContextMenuStrip (Properties)
ContextMenuStrip Items:
• A Menu control is nothing
without menu items. The Items
property is used to add and work
with items in a ContextMenuStrip.

• We can add items to a

Department of CSE, QUEST

Dr. Irfana Memon
ContextMenuStrip at design-time
from Properties Window by
clicking on Items Collection.
When you click on the Collections,
the String Collection Editor
window will pop up where you
can type strings.
•Each line added to this collection 9
will become a ContextMenuStrip
item.
 ContextMenuStrip (Properties)
Adding Menu Item Click
Event Handler

•The main purpose of a menu item is

to add a click event handler and write
code that we need to execute on the
menu item click event handler.

Department of CSE, QUEST

Dr. Irfana Memon
• For example, on File >> New
menu item click event handler, we
may want to create a new file.
The simplest way to add an event
handler, you double click on a menu
item and the designer will add a
click event handler for that menu
item. You can also see and update it
in the Events window as you can see 10
in Figure
 ContextMenuStrip (Properties)
Display Image in a Menu Item
The Image property is used to set an
image as part of a menu item with the
text. If you go to the designer and select
Image property, you will be asked to add

Department of CSE, QUEST

Dr. Irfana Memon
an image to the application and the
selected image will be displayed in the
menu item before the text.
A menu item with an image looks like
Figure

11
 ContextMenuStrip (Properties)
Setting Image a Menu Item Background
•The BackgroundImage property is used to set an image as background of
a menu item.
•The BackgroundImageLayout is used to set the layout of the image.

Vertical Text in Menu Items

•By default, the text of a menu is horizontal.

Department of CSE, QUEST

Dr. Irfana Memon
•You can change the direction of menu items by setting TextDirection
property that is a type of ToolStrupTextDirection.

Set Tooltip of a Menu Item

•The ToolTipText property is used to set the tooltip of a menu items.

Menu Grip
•By default, menus do not have a grip but we can show a grip by setting 12
GripStyle property to visible.
 ContextMenuStrip (Example)
Contextmenustrip display in the bottom bar of form
This can be used when we click on right of the mouse button
then it will apear a new window, you can add the some option .
For example , Exit, Open dialog box.

Department of CSE, QUEST

Dr. Irfana Memon
13
 ContextMenuStrip (Example)
Double click on the Exit in contextMenuStrip1, it open following
code page.

Department of CSE, QUEST

Dr. Irfana Memon
14
 ContextMenuStrip (Example)
Coding for exit from the application

Department of CSE, QUEST

Dr. Irfana Memon
Application.Exit(); // coding for the exit the application 15
 ContextMenuStrip (Example)
Contextmenustrip is a class. So you can pass your designed
Contextmenustrip1 by writing this code after InitializeComponent();
public Form1()
{
InitializeComponent();
this.ContextMenuStrip = contextMenuStrip1;
}

Department of CSE, QUEST

Dr. Irfana Memon
Run and right click mouse, u
can see this window.
Click Exit, it will close the
application.
16
 ContextMenuStrip (Example)
Now for open the dialog box, double click on open in contextmenustrip. Do
following code:

Department of CSE, QUEST

Dr. Irfana Memon
17
 ContextMenuStrip (Example)
Run the program. Right click the mouse and click the Open. It will open the this
open dialog box.

Department of CSE, QUEST

Dr. Irfana Memon
18
 MenuStrip
•The MenuStrip class is the foundation of menus functionality
in Windows Forms.
•To create a MenuStrip control at design-time, you simply
drag and drop a MenuStrip control from Toolbox to a Form in
Visual Studio.
•Menustrip display on the top of form

Department of CSE, QUEST

Dr. Irfana Memon
19
 MenuStrip (Properties)
After you place a MenuStrip control on a Form, the next step
is to set properties.
The easiest way to set properties is from the Properties
Window.
The MenuStrip has common properties, such as Name, Font,

Department of CSE, QUEST

Dr. Irfana Memon
Background and Foreground.
Here, we discuss special properties: MenuStrip Items

20
 MenuStrip (Properties)
MenuStrip Items: A Menu control
is nothing without menu items. The
Items property is used to add and
work with items in a MenuStrip.

When you click on the Collections,

Department of CSE, QUEST

Dr. Irfana Memon
the String Collection Editor window
will pop up where you can type
strings.

Each line added to this collection

will become a MenuStrip item.
21
 MenuStrip (Example)
Create an application like Windows Forms Application. On the
application form to create a menu on the model, as shown in
Figure .

Department of CSE, QUEST

Dr. Irfana Memon
22
MenuStrip (Example)
1. Run Microsoft Visual Studio. Create project using Windows
Forms Application template
2. To create the menu you need use the control MenuStrip. It
is located on the Toolbox on the tab “Menus&Toolbars”

Department of CSE, QUEST

Dr. Irfana Memon
23
MenuStrip (Example)
After placing the component on the form (with the mouse)
application form will look as shown in Figure. At the
bottom of the form of designing an object with
name menuStrip1 is placed. By using this name you can
access to the properties and methods of the menu.

Department of CSE, QUEST

Dr. Irfana Memon
24
MenuStrip (Example)
If you point by mouse on the item TypeHere of menu, then the
button of pop-up menu will be appear. If you open the menu
(mouse click), then you can select one of three controls in menu
MenuItem – standard item of menu;
ComboBox – the item of “drop-down list” type;
TextBox – the control of “edit field” type.

Department of CSE, QUEST

Dr. Irfana Memon
25
MenuStrip (Example)
To create the submenu File you need to type “File”. With
the help of mouse and keyboard you can add items of
menu. To delete the menu item, you need select it
previously and press Delete button.

Department of CSE, QUEST

Dr. Irfana Memon
Creating submenu “File“

26
MenuStrip (Example)
After creating all menu items, application form will have view as
shown at Figure

Department of CSE, QUEST

Dr. Irfana Memon
Next steps are the
programming the events,
which will be generated
when the user will select
the particular menu item.

27
 Contextmenustrip
vs
MenuStrip

• MenuStrip control is associated with the Windows Form;

Department of CSE, QUEST

Dr. Irfana Memon
• ContextMenuStrip control is associated with a control, which
is added to the Windows Form.

28
 StatusStrip
•A typical status bar control, placed on the bottom of a Form is
used to display some text that represents a status of the
application and user actions.
•To build a StatusStrip control at design-time, simply drag and
drop a StatusStrip control from the Toolbox to the Form.

Department of CSE, QUEST

Dr. Irfana Memon
29
 StatusStrip
• It also allows you to add several controls to a StatusStrip
control including a StatusLabel, ProgressBar,
DropDownButton, and a SplitButton.
• If you click on little dropdown icon, you will see four of these
controls in the listing as shown in Figure 2.
As soon as you select one of these controls, it will be added to

Department of CSE, QUEST

Dr. Irfana Memon
the StatusStrip control.

30
 StatusStrip (Properties)
• The StatusStrip class is inherited from the
ToolStrip ->ScrollableControl->Control classes

•Hence has all of the common properties supported by a

Windows Forms control.

Department of CSE, QUEST

Dr. Irfana Memon
•Some of these common properties include Font, BackColor,
Dock, BackgroundImage, and TextDirection.

31
 StatusStrip (Properties)
Docking a StatusStrip
•A StatusStrip control can be docked at top, bottom, left, right, or
center.
Background Image
The BackColor property sets the background color of a StatusStrip
control. We can also set an image as the background color of a
StatusStrip control.

Department of CSE, QUEST

Dr. Irfana Memon
The BackgroundImage property is used to set the background image
of a StatusStrip control.

32
 StatusStrip (Properties)
•We can also set the layout of the background image using the
BackgroundImageLayout property that can be stretched, tiled,
centered, centered or zoomed as you can see in Figure.

Department of CSE, QUEST

Dr. Irfana Memon
33
 StatusStrip (Properties)
Sizing Grip, Grip Style, and Layout Style
•The sizing grip is a little sizing handle in the lower right corner of a
control.
• Using the SizingGrip property is used to enable the sizing handle.
•The SizingGrip property works with the GripStyle and the
LayoutStyle properties.
•The GripStyle property is used to show or hide the grip style.

Department of CSE, QUEST

Dr. Irfana Memon
•The LayoutStyle property as shown in Figure represents the layout
type of the grip.

34
 StatusStrip (Properties)
Text Direction
•The TextDirection is another useful property that was missing in the
StatusBar control.
•Using the TextDirection property, we can set the text direction of the
StatusStrip control.
• It has three properties – Horizontal, Vertical90 and Vertical270.

Department of CSE, QUEST

Dr. Irfana Memon
Figure shows Verical90 text of a StatusStrip control.

35
 StatusStrip (Properties)
Adding StatusStrip Items
•A StatusStrip control is nothing but a container for the child
controls.
•A StatusStrip control can host several child controls. These child
controls are represented by the Items property.
•If you click on the Items property of the StatusStrip control, you will

Department of CSE, QUEST

Dr. Irfana Memon
see Items Collection Editor where you can add, update, and delete
the child controls.
•If you click on the Items property, you will see the Item Collection
Editor where you can select an item type from the DropDown and
click Add button to add the child control.
•The DropDown has four item types and these items are the
ToolStripStatusLabel, ToolStripProgressBar,
ToolStripDropDownButton, and ToolStripSplitButton.
36
 ToolStrip
•ToolStrip control provides functionality of Windows toolbar
controls.
•To create a ToolStrip control at design-time, simply drag and
drop a ToolStrip control from Toolbox onto a Form.

Department of CSE, QUEST

Dr. Irfana Memon
37
 ToolStrip
• The next step is to set ToolStrip control properties.
•A ToolStrip control is nothing but a container without adding its
child controls.
•A ToolStrip control is capable of hosting Button, Label, SplitButton,
DropDownButton, Separator, ComboBox, TextBox and

Department of CSE, QUEST

Dr. Irfana Memon
ProgressBar controls.

38
 ToolStrip
•Now let's add a few controls to ToolStrip control.
•If you click on a little dropdown handle on a ToolStrip control in
designer, you will see a list of possible controls (See Figure) that can
be added to a ToolStrip.
•To add a control, simply select that control and it will be added to
the ToolStrip control.

Department of CSE, QUEST

Dr. Irfana Memon
•Another way to add
controls to a ToolStrip
control is by using the
Items property. Click on
the Items property and
you will see Item
Collection Editor. You can
39
add items.
 ToolStrip
Size: Set the height and width of the control.

Text: Set the text associated with this control.

RenderMode: Set a value that indicates which visual styles will be
applied to the ToolStrip.

Department of CSE, QUEST

Dr. Irfana Memon
LayoutStyle: Set a value indicating how the ToolStrip lays out the items
collection.
Visibility properties: By assigning a Visibility property to false, you make it
so a ToolStrip cannot be dragged to that side. By default, all sides have a
Visibility of true.

40
 ToolStripContainer
• A ToolStripContainer has panels on its left, right, top, and
bottom sides for positioning and rafting ToolStrip, MenuStrip,
and StatusStrip controls.
•To create a ToolStrip control at design-time, simply drag and
drop a ToolStrip control from Toolbox onto a Form.

Department of CSE, QUEST

Dr. Irfana Memon
41
 ToolStripContainer
Properties:
•Button
•Label
•SplitButton
•DropDownButton

Department of CSE, QUEST

Dr. Irfana Memon
•Separator
•ComboBox
•TextBox
• ProgressBar
•Size
•Text
•RenderMode 42
•LayoutStyle
•Visibility properties
 DialogBox
• A dialog box is a special window, which can be used to interact
with the user and display information.
• It acts as a container that can hold various controls to retrieve
information.
• A dialog box is a window that allows you to collect and

Department of CSE, QUEST

Dr. Irfana Memon
display related information using various controls.
• Some of the dialog boxes that you have used in Windows are
Save As, Color, Print and Page Setup

43
 Elements of DialogBox
•A dialog box consists of:
 Title bar displaying caption and the close icon
 Instruction text informing what the user should do (optional)
Content with controls to select or display information
 Action area having buttons and link labels

Department of CSE, QUEST

Dr. Irfana Memon
Footnote area explaining about the window (optional)

44
 Types of DialogBox
• There are two types of dialog boxes namely :
 modal dialogbox
 modeless dialogbox
• A modal dialog box does not allow the user to activate any
other window in the application unless the dialog box is closed.
• A modeless dialog box allows user to focus and work with the

Department of CSE, QUEST

Dr. Irfana Memon
same application without closing the dialog box.

45
 Example of DialogBox
1. Open new project
2. Drag and move two buttons on Form
3. Set properties of these two buttons according your
requirement. We set one button as Modal and other
button as Modaless respectively.

Department of CSE, QUEST

Dr. Irfana Memon
46
 Example of DialogBox
4. Add new Form2 by right click on Solution explorer.
Drag and move Label to Form2. Set property Text= Hello

Department of CSE, QUEST

Dr. Irfana Memon
47
 Example of DialogBox
5. Double click on Modal button.

Department of CSE, QUEST

Dr. Irfana Memon
6. Double click on Modaless button.

48
 Example of DialogBox
7. Run and see by click on Modal and Modaless button.

Department of CSE, QUEST

Dr. Irfana Memon
49
 Wish You Good Luck

Dr. Irfana Memon

50

Department of CSE, QUEST