VISUAL PROGRAMMING

Engr. Anees Ahmed Soomro

Assistant Professor
CS QUEST Nawabshah

https://anees-soomro.neocities.org
Visual Programming

• Creating GUI Application

• Handling User Interaction Events
• Manipulating Controls
• Mouse Events Keyboard Events
• A graphical user interface (GUI) allows a user to interact visually
with a program.
• And provides consistent user interfaces that enable a user to learn
new apps more quickly because the apps have the same “look” and
“feel.”
• Visual Studio is an example of GUI application, window containing
various GUI controls.
• Near the top, there’s a menu bar containing the menus FILE, EDIT,
VIEW, PROJECT, BUILD, DEBUG, TEAM, TOOLS, TEST,
WINDOW, and HELP.
• Below that is a tool bar of buttons, each with a defined task.
• GUIs are built from GUI controls (sometimes called widgets —
short for window gadgets).
• GUI controls are objects that can display information on the screen
or enable users to interact with an app via the mouse, keyboard or
some other form of input.
 Some Basic GUI Controls:
Label:
Displays text.
TextBox:
Enables the user to enter data via the keyboard. It can also be used to display
editable or uneditable text.
Button:
Triggers an event when clicked with the mouse.
CheckBox:
Specifies an option that can be selected (checked) or unselected (not checked).
ComboBox:
Provides a drop-down list of items from which the user can make a selection
either by clicking an item in the list or by typing in a box.
ListBox:
Provides a list of items from which the user can make a selection by clicking
one or more items.
Panel: A container in which controls can be placed and organized.
 Windows Forms
Windows Forms is a library to create GUIs.
A Form is a graphical element that appears on your computer’s
desktop; it can be a dialog, a window or an MDI window (multiple
document interface window).
A component is an instance of a class that implements the
IComponent interface, which defines the behaviors that
components must implement, such as how the component is loaded.
A control, such as a Button or Label, has a graphical
representation at runtime. Some components lack graphical
representations.
 Toolbox
• The Windows Forms controls and components are accessible
from Toolbox, organized into categories by functionality.
• To add a control to a Form, select that control or component from
the Toolbox and drag it onto the Form.
• To remove a control from the form, select the component and
press Delete button.
 Form
• 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.
• 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.
• The controls presented here are located in namespace
System.Windows.Forms.
• In visual programming, the IDE maintains GUI-related code and you write
the bodies of the event handlers to indicate what actions the program
should take when particular events occur.
• For a list of Common Form properties, methods and an event
<See page 522 (563) of the book>.
Event Handling:
• GUIs applications are event driven.
• When the user interacts with a GUI component, an event is generated that
drives the program to perform a task.
• Common events include clicking a Button, typing in a TextBox, selecting
an item from a menu, closing a window and moving the mouse.
• All GUI controls have events associated with them.
• A method that performs a task in response to an event is called an event
handler, and this process of responding to events is known as event
handling.
<See page 523 (564) of the book>.
Control Properties and Layout
• There are many properties associated with the controls.
• The Text property for example, specifies the text that appears
on a control.
• The location of this text varies depending on the control.
• In a Form, the text appears in the title bar, but the text of a
Button appears on its face.

<See page 530 (571) of the book>

*) Source: Essential C# 5.0 by Mark

Michaelis
Label, TextBox and Button
COMMON CONTROLS

• A Label displays text that the user cannot directly modify.

• A Label’s text can also be changed programmatically by modifying
the Label’s Text property.
• A textbox (class TextBox) is an area in which either text can be
displayed by a program or the user can type text. A password
TextBox is a TextBox that hides the information entered by the
user.
• A button is a control that the user clicks to trigger a specific action
or to select an option in a program. There are several types of
buttons, such as checkboxes and radio buttons.
• All the button classes derive from class ButtonBase (namespace
System.Windows.Forms), which defines common button features.

<See page 533 (574) of the book>

 GroupBoxes and Panels:
• GroupBoxes and Panels arrange controls on a GUI.
• GroupBoxes and Panels group together several controls of
similar functionality or several controls that are related.
• All of the controls in a GroupBox or Panel move together when
the GroupBox or Panel is moved.
• A GroupBoxes and Panels can also be used to show or hide a set
of controls at once by modifying a container’s Visible property,
which toggles the visibility of all the controls within it.
• The primary difference between these two controls is that
GroupBoxes can display a caption (i.e., text) and do not include
scrollbars, whereas Panels can include scrollbars and do not
include a caption.

<See page 536 (577) of the book>

CheckBoxes and RadioButtons:
• CheckBoxes and RadioButtons are two types of state buttons that can be in the on/off or true/false
states.
• Like class Button, classes CheckBox and RadioButton are derived from class ButtonBase.

CheckBoxes
• A CheckBox is a small square that either is blank or contains a check mark.
• When the user clicks a CheckBox to select it, a check mark appears in the box.
• If the user clicks the CheckBox again to deselect it, the check mark is removed.
• You can also configure a CheckBox to toggle between three states (checked, unchecked and
indeterminate) by setting its Three-State property to true.
• Any number of CheckBoxes can be selected at a time.

Handling CheckedChanged Event:

• Checking and unchecking a checkbox generates a CheckedChanged event.
• This event can be handled as:
private void checkBox1_CheckedChanged(object sender,
EventArgs e)
{
MessageBox.Show( ((CheckBox)sender).Checked.ToString
() ); label3.Font = new Font(label3.Font,
FontStyle.Bold);
}
<See page 539 (580) of the book>
 RadioButtons
• Radio buttons (class RadioButton) also have two states—selected and not selected
(deselected).
• However, RadioButtons normally appear as a group, in which only one RadioButton can be
selected at a time.
• Selecting one RadioButton in the group forces all the others to be deselected.
• Therefore, RadioButtons are used to represent a set of mutually exclusive options.
• RadioButtons added to a container become part of the same group.
• To divide RadioButtons into groups, they must be added to separate containers, such as
GroupBoxes or Panels.

Handling CheckedChanged Event:

Clicking the radioButtons generate CheckedChanged event. The event handler is handled in the
code below:
private void radioButton1_CheckedChanged(object sender,
EventArgs e)
{
RadioButton radioButtonClicked = (RadioButton)sender;
if (radioButtonClicked == radioButton1)
{
if (radioButtonClicked.Checked == true)
MessageBox.Show("radioButton1 checked!");
else {
MessageBox.Show("radioButton1 unchecked!");
}
}
}
<See page 542 (583) of the book>
Mouse Events and Paint Program:
• Information about a mouse event is passed to the event-handling method through an
object of class MouseEventArgs, and the delegate used to create the mouse event
handlers is MouseEventHandler.
• Each mouse-event-handling method for these events requires an object and a
MouseEventArgs object as arguments.

<See page 554 (595) of the book>

Keyboard Events:
• Key events occur when keyboard keys are pressed and released.
• Such events can be handled for any control that inherits from
System.Windows.Forms.Control.
• There are three key events—KeyPress, KeyUp and KeyDown.
• The KeyPress event occurs when the user presses a key that represents an
ASCII character.
• The specific key can be determined with property KeyChar of the event
handler’s KeyPressEventArgs argument.
• ASCII is a 128-character set of alphanumeric symbols.

<See page 556 (597) of the book>