1

Windows Graphics

2

Objectives

You will be able to Use the Windows GDI+ to draw arbitrary figures and

text on a Windows form.

Add a handler for the Paint event to your program.

Draw text strings directly on a Windows form at any position.

Draw lines, rectangles, circles, and ellipses directly on a Windows form at any position.

Display images directly on a Windows form (without using a PictureBox control.)

Use a resource from the running assembly.

Cause your program to update the form when needed.

3

Windows Graphics

The .NET Framework includes a general purpose graphics facility called GDI+ New and improved version of the old

Graphical Device Interface (GDI) Not covered in our textbook.

Use Visual Studio Help to get documentation.

Search on Graphics Rich and complex subject.

We will just scratch the surface. Even so, you will be able to do a lot.

4

Windows Graphics

This presentation is based on

Professional C# 2008Christian Nagel, et al.Wrox, 2008

5

Windows Graphics You can draw directly on a Windows form.

Lines Shapes Text

More complex than using labels, textboxes, etc. But gives you more flexibility

Think “Office Graphics” Not scientific visualization. Not video games.

6

Windows Graphics From the Graphics Help page:

The Graphics object provides methods for drawing a variety of lines and shapes.

Simple or complex shapes can be rendered in solid or transparent colors, or using user-defined gradient or image textures.

Lines, open curves, and outline shapes are created using a Pen object.

To fill in an area, such as a rectangle or a closed curve, a Brush object is required.

For more information about how to create and use pens and brushes, see Pens, Brushes, and Colors in the MSDN documentation.

7

The Point structure

Represents a position on a two-dimensional surface

Used to define locations on a form

A Point has two integer properties: X horizontal position Y vertical position

Normal constructor Point pt = new Point (10, 20);

8

The Size Structure

Used to define size of windows, forms, controls, and other rectangular areas.

Like Point, has two integer properties Width Height

Can be constructed using a Point, or using separate integer parameters:

Size aSize = new Size(pt);Size bSize = new Size (width, height);

9

The Rectangle Structure

Defines both the location and the size of a rectangle.

Two ConstructorsSize mySize = new Size (200, 300);Point startPoint = new Point( 10, 10);Rectangle myRect = new Rectangle (startPoint, mySize);

int left = 10;int top = 10;int width = 200;int height = 300;Rectangle myRect = new Rectangle (left, top, width,

height);

10

The Rectangle Structure

Properties -- all integer Left Right Top Bottom Width Height

11

The Graphics Class

You have to have a Graphics object in order to draw on a form.

It provides the methods and properties that you need in order to draw.

12

The Paint Event

A Paint event is broadcast each time a form needs to be redrawn.

Controls handle this event internally. You never see it. They draw themselves.

To do your own drawing on a form, you provide a handler for this event: A PaintEventHandler

13

How to create a PaintEventHandler

In design mode Right click on the form Open the form’s Properties window Click on the “Events” icon

lightening bolt Scroll down to Paint Enter name for your event handler

Example: Form_Paint or just double click on the box.

14

How to create a PaintEventHandler

The Events Icon

Name for Paint Event Handler

15

How to create a PaintEventHandler

Visual Studio creates a PaintEventHandler stub Opens the code window at that point

private void Form_Paint(object sender, System.Windows.Forms.PaintEventArgs e)

{ }

The “e” passed to this function includes (as a property) the Graphics object that you need to use to draw on the form.

You will need to use this argument

16

Drawing Text on a Formusing System;

using System.Drawing;

using System.Windows.Forms;

…

private void Form_Paint(object sender, System.Windows.Forms.PaintEventArgs e)

{ Font myFont = new Font("Arial", 12);

Point myPoint = new Point (20, 30);

e.Graphics.DrawString ("Hello, World!", myFont, SystemBrushes.WindowText, myPoint);}

17

Here’s the result

18

Drawing Text on a Form

This version of DrawString draws the specified string straight to the right, starting from the specified point.

No wrap.

If it runs off the form, you lose it.

19

Suppose we start close to the edge:

private void Form_Paint(object sender, System.Windows.Forms.PaintEventArgs e)

{

Font myFont = new Font("Arial", 12);

Point myPoint = new Point (220, 30);

e.Graphics.DrawString ("Hello, World!", myFont, SystemBrushes.WindowText, myPoint);}

20

Here is the result.

21

Drawing Text on a Form

Another version of DrawString confines the string to a Rectangle specified by the caller.

The Point that was the final argument is replaced by the bounding Rectangle.

22

Using a Bounding Rectangle for Text

private void Form_Paint(object sender, System.Windows.Forms.PaintEventArgs e)

{ Font myFont = new Font("Arial", 12);

Rectangle boundingRect = new Rectangle (220, 20, 70, 200);

e.Graphics.DrawString ("The quick brown fox jumped over the lazy dog's back.",

myFont, SystemBrushes.WindowText, boundingRect);}

23

Here is the result

24

Let’s draw the Rectangle.

private void Form_Paint(object sender, System.Windows.Forms.PaintEventArgs e)

{ Font myFont = new Font("Arial", 12); Rectangle boundingRect = new Rectangle (220, 20, 70, 200); e.Graphics.DrawString ("The quick brown fox jumped over the lazy

dog's back.", myFont, SystemBrushes.WindowText, boundingRect);

e.Graphics.DrawRectangle (SystemPens.WindowText, boundingRect);}

25

Here is the result

26

Drawing Other Figures

private void Form_Paint(object sender, System.Windows.Forms.PaintEventArgs e)

{ Point topLeft = new Point (20, 20); Point bottomRight = new Point (200, 200);

e.Graphics.DrawLine (SystemPens.WindowText, topLeft, bottomRight);}

27

Here is the result

28

How about an Ellipse?

We specify a Rectangle to bound the ellipse. And this time, let’s create our own pen.

private void Form_Paint(object sender System.Windows.Forms.PaintEventArgs e)

{ Pen redPen = new Pen(Color.Red, 4);

// Create rectangle for ellipse. Rectangle rect = new Rectangle( 50, 50, 200, 100);

// Draw ellipse to screen. e.Graphics.DrawEllipse(redPen, rect);}

29

Here it is.

30

Displaying an Image

We can also display images. Note: No PictureBox control here. We will display the image directly with a

Graphics object.

Download an image to a convenient directory.

Example: http://www.cse.usf.edu/~turnerr/Software_Systems_Develo

pment/Downloads/USF_Bull_small.jpg

31

Displaying an Image

private void Form1_Paint(object sender, PaintEventArgs e)

{

Image bull = Image.FromFile(@"C:\USF_Bull_small.jpg");

Point p = new Point(100, 100);

e.Graphics.DrawImage(bull, p);

}

32

Displaying an Image

We can resize the image if necessary by providing a bounding rectangle.

33

Check Image Size

34

Bounding Rectangle for Image

private void Form1_Paint(object sender, PaintEventArgs e)

{

Image bull = Image.FromFile(@"C:\USF_Bull_small.jpg");

//Point p = new Point(100, 100);

Point[] bounds = new Point[3];

bounds[0] = new Point(10, 10); // Top left

bounds[1] = new Point(10 + bull.Width * 2, 10); // Top right

bounds[2] = new Point(10, 10 + bull.Height*2); // Bottom left

e.Graphics.DrawImage(bull, bounds);

}

35

Bounding Rectangle for Image

36

Bounding Rectangle for Image

We can even shear the image if desired.

private void Form1_Paint(object sender, PaintEventArgs e)

{

Image bull = Image.FromFile(@"C:\USF_Bull_small.jpg");

//Point p = new Point(100, 100);

Point[] bounds = new Point[3];

bounds[0] = new Point(100, 10); // Top left

bounds[1] = new Point(100 + bull.Width * 2, 10); // Top right

bounds[2] = new Point(10, 10 + bull.Height*2); // bottom left

e.Graphics.DrawImage(bull, bounds);

}

37

Sheared Image

38

Using a Resource

Displaying an image from a file is not convenient if we want to deploy the application. Have to deploy the image as well as the

executable file. Put it in the right directory.

We can avoid this problem by creating a resource. The image becomes a part of the

assembly that we deploy.

39

Creating a Resource

Add the image file to the project. Project > Add Existing Item

Right click on USF_Bull_small.jpg and select Properties

40

Build Action

Set the Build Action property of the .jpg file to Embedded Resource

Compiler will add the image to the assembly as a resource.

We can access the resource at run time to create the image. Don't need the file at run time.

41

Using a Resource

private void Form1_Paint(object sender, PaintEventArgs e)

{

String resource_name = @"Resource_Demo.USF_Bull_small.jpg";

System.Reflection.Assembly a =

System.Reflection.Assembly.GetExecutingAssembly();

System.IO.Stream s = a.GetManifestResourceStream(resource_name);

Image bull = Image.FromStream(s);

Point p = new Point(100, 100);

e.Graphics.DrawImage(bull, p);

}

42

Program Running

43

Form Update

What if we need to update the form?

Example: Instead of “Hello, world!” let’s show

the curent date and time.

44

Current Date and time

private void Form_Paint(object sender,

PaintEventArgs e)

{

Font myFont = new Font("Arial", 12);

Point myPoint = new Point (20, 30);

String timeString = DateTime.Now.ToString();

e.Graphics.DrawString (timeString,

myFont,

SystemBrushes.WindowText,

myPoint);

}

45

Program Running

What can we do to update the time?

Try moving, resizing, minimizing, maximizing.

46

Update

Paint event happens when form is miniminzed and then displayed again.

If we resize the window so that the time does not show and then enlarge it so that the time does show, we see an undated vesion of the time. Not if size change does not affect the

text display.

47

Forcing a Paint Event

Add a Timer component to the program. Drag and drop from the toolbox.

Components section. Check properties.

Be sure it is enabled. Set interval to 1000 (milliseconds).

Add a “Tick” event handler. Double click on timer1 in the component

tray.

48

Tick Event Handler

private void Timer_Tick(object sender, EventArgs e)

{

Invalidate();

Update();

}

49

Running with Ticks

Now the form updates itself every second.

50

What else?

There is a lot more to learn about Windows graphics.

For more, seeProfessional C# 2008Christian Nagel, et al.Wrox, 2008Chapter 33

Or any of several thick books on C# Or study the .NET documentation