Transcript ppt

Windows Graphics
1
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.
2
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.
3
Windows Graphics
This presentation is based on
Professional C# 2008
Christian Nagel, et al.
Wrox, 2008
4
Windows Graphics

You can draw directly on a Windows form.




More complex than using labels, textboxes, etc.


Lines
Shapes
Text
But gives you more flexibility
Think “Office Graphics”


Not scientific visualization.
Not video games.
5
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.
6
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
Y
horizontal position
vertical position
Normal constructor
Point pt = new Point (10, 20);
7
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);
8
The Rectangle Structure


Defines both the location and the size
of a rectangle.
Two Constructors
Size 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);
9
The Rectangle Structure
Properties -- all integer






Left
Right
Top
Bottom
Width
Height
10
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.
11
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
12
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.
13
How to create a PaintEventHandler
The Events Icon
Name for Paint
Event Handler
14
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)
{
}
You will need to use this argument

The “e” passed to this function includes (as a property) the
Graphics object that you need to use to draw on the form.
15
Drawing Text on a Form
using 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);
}
16
Here’s the result
17
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.
18
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);
19
Here is the result.
20
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.
21
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);
}
22
Here is the result
23
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);
24
Here is the result
25
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);
}
26
Here is the result
27
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);
}
28
Here it is.
29
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_Development/
Downloads/USF_Bull_small.jpg
30
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);
}
31
Displaying an Image
We can resize the image if necessary by providing a
bounding rectangle.
32
Check Image Size
33
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);
}
34
Bounding Rectangle for Image
35
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);
}
36
Sheared Image
37
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.
38
Creating a Resource

Add the image file to the project.

Project > Add Existing Item
Right click on USF_Bull_small.jpg and select Properties
39
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.
40
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);
}
41
Program Running
42
Form Update

What if we need to update the form?

Example:

Instead of “Hello, world!” let’s show the
curent date and time.
43
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);
}
44
Program Running
What can we do to update the time?
Try moving, resizing, minimizing, maximizing.
45
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.
46
Forcing a Paint Event

Add a Timer component to the program.

Drag and drop from the toolbox.


Check properties.



Components section.
Be sure it is enabled.
Set interval to 1000 (milliseconds).
Add a “Tick” event handler.

Double click on timer1 in the component
tray.
47
Tick Event Handler
private void Timer_Tick(object sender, EventArgs e)
{
Invalidate();
Update();
}
48
Running with Ticks
Now the form updates itself every second.
49
What else?


There is a lot more to learn about
Windows graphics.
For more, see
Professional C# 2008
Christian Nagel, et al.
Wrox, 2008
Chapter 33


Or any of several thick books on C#
Or study the .NET documentation
50