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
 Drawing in Winform
• After completing this chapter, you will be able to:.
Drawing surfaces
Working with graphics and graphical transformations
Drawing geometric shapes

Department of CSE, QUEST

Dr. Irfana Memon
Working with images
Working with text and fonts
Printing on printer

4
 Drawing spaces
It consists of several spaces:

System.Drawing : provides basic classes such as surfaces,

pencils, brushes, classes for text painting.
System.Drawing.Imaging : Provides classes for working with
images, pictures and icons, classes for converting to different

Department of CSE, QUEST

Dr. Irfana Memon
file formats and for resizing images.
System.Drawing.Drawing2D: Provides classes for graphical
transformations - blends, matrixes, and more.
System.Drawing.Text: Provides classes for accessing the
graphical environment fonts.
System.Drawing.Printeing : Provides printer printing classes
and system dialog boxes for printing. 5
 Drawing in winform
• First you need to create a Graphics object.
• The Graphics object represents a GDI+ drawing surface, and
is the object that is used to create graphical images.
• There are two steps in working with graphics:
1. Creating a Graphics object.

Department of CSE, QUEST

Dr. Irfana Memon
2. Using the Graphics object to draw lines and shapes, render
text, or display and manipulate images.

6
 Creating a graphic object
A graphics object can be created in a variety of ways. To create a
graphics object:
Receive a reference to a graphics object as part of
the PaintEventArgs in the Paint event of a form or control. This is
usually how you obtain a reference to a graphics object when
creating painting code for a control. Similarly, you can also obtain
a graphics object as a property of the PrintPageEventArgs when

Department of CSE, QUEST

Dr. Irfana Memon
handling the PrintPage event for a PrintDocument.
OR
Call the CreateGraphics method of a control or form to obtain a
reference to a Graphics object that represents the drawing surface
of that control or form. Use this method if you want to draw on a
form or control that already exists.
OR
Create a Graphics object from any object that inherits from Image. 7
This approach is useful when you want to alter an already existing
image.
 Creating a graphic object
To obtain a reference to a Graphics object from the
PaintEventArgs in the Paint event
•Declare the Graphics object.
•Assign the variable to refer to the Graphics object passed as part of
the PaintEventArgs.
•Insert code to paint the form or control.

Department of CSE, QUEST

Dr. Irfana Memon
private void Form1_Paint(object sender,
System.Windows.Forms.PaintEventArgs pe)
{
// Declares the Graphics object and sets it to the Graphics object
// supplied in the PaintEventArgs.
8
Graphics g = pe.Graphics;
// Insert code to paint the form here.
}
 Creating a graphic object
CreateGraphics Method
You can also use the CreateGraphics method of a control or
form to obtain a reference to a Graphics object that represents
the drawing surface of that control or form.
To create a Graphics object with the CreateGraphics

Department of CSE, QUEST

Dr. Irfana Memon
method
Call the CreateGraphics method of the form or control upon
which you want to render graphics.

Graphics g;
// Sets g to a graphics object representing the drawing surface of the
// control or form g is a member of.
g = this.CreateGraphics(); 9
 Creating a graphic object
Create from an Image Object
Additionally, you can create a graphics object from any object
that derives from the Image class.
To create a Graphics object from an Image
Call the Graphics.FromImage method, supplying the name of

Department of CSE, QUEST

Dr. Irfana Memon
the Image variable from which you want to create
a Graphics object.
The following example shows how to use a Bitmap object:

Bitmap myBitmap = new Bitmap(@"C:\Documents and

Settings\Joe\Pics\myPic.bmp");
Graphics g = Graphics.FromImage(myBitmap);
10
 Drawing and manipulating
shapes and images
After it is created, a Graphics object may be used to draw lines and
shapes, render text, or display and manipulate images.
The principal objects that are used with the Graphics object are:
1. The Pen class—Used for drawing lines, outlining shapes, or
rendering other geometric representations.

Department of CSE, QUEST

Dr. Irfana Memon
2. The Brush class—Used for filling areas of graphics, such as filled
shapes, images, or text.
3. The Font class—Provides a description of what shapes to use
when rendering text.
4. The Color structure—Represents the different colors to display.

11
 Drawing
• Let see How to draw Line, Rectangle, Ellipse, Polygon, etc
• We can do drawing in the PaintHandlerEvent.
1. Open New Project
2. Goto Even property of Form, double click on Paint, it will
transfer you to code page.

Department of CSE, QUEST

Dr. Irfana Memon
//We write code here

12
 Drawing
3. How to: Draw a Line on a Windows Form

Department of CSE, QUEST

Dr. Irfana Memon
13
 Drawing
3. How to: Draw a Line on a Windows Form

Department of CSE, QUEST

Dr. Irfana Memon
4. Run and See output

14
 Drawing
5. How to: Draw a Rectangle on a Windows Form

Department of CSE, QUEST

Dr. Irfana Memon
15
 Drawing spaces
5. How to: Draw a Rectangle on a Windows Form

Department of CSE, QUEST

Dr. Irfana Memon
6. Run and See output

16
 Drawing
7. How to: Draw a Ellipse on a Windows Form

Department of CSE, QUEST

Dr. Irfana Memon
17
 Drawing
7. How to: Draw a Ellipse on a Windows Form

Department of CSE, QUEST

Dr. Irfana Memon
8. Run and See output

18
 Drawing
How to Draw figure in the Center of Form ?

Department of CSE, QUEST

Dr. Irfana Memon
19
 Drawing
How to Draw figure in the Center of Form ?

Department of CSE, QUEST

Dr. Irfana Memon
20
 Drawing
How to Draw figure in the Center of Form ?

Department of CSE, QUEST

Dr. Irfana Memon
21
 How to Draw Arc on Form ?
Drawing

Dr. Irfana Memon

22

Department of CSE, QUEST

 How to Draw Arc on Form ?
Drawing

Dr. Irfana Memon

23

Department of CSE, QUEST

 How to Draw Arc on Form ?
Drawing

Dr. Irfana Memon

24

Department of CSE, QUEST

 Drawing (Example)

Dr. Irfana Memon

25

Department of CSE, QUEST

 Drawing (Example)

Dr. Irfana Memon

26

Department of CSE, QUEST

 How to use Brush?
Drawing

Dr. Irfana Memon

27

Department of CSE, QUEST

 How to use Brush?
Drawing

Dr. Irfana Memon

28

Department of CSE, QUEST

 How to use Brush?
Drawing

Dr. Irfana Memon

29

Department of CSE, QUEST

 How to use Brush?
Drawing

Dr. Irfana Memon

30

Department of CSE, QUEST

 Exercise
Draw a Bezier spline with start point (10, 100) and endpoint
(200, 100). The control points are (100, 10) and (150, 150).

Department of CSE, QUEST

Dr. Irfana Memon
31
 Wish You Good Luck

Dr. Irfana Memon

32

Department of CSE, QUEST