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# 2008 Christian 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.Pens, Brushes, and Colors

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: Xhorizontal position Yvertical 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 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);

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 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); }

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: Downloads/USF_Bull_small.jpg Downloads/USF_Bull_small.jpg

31 Displaying an Image private void Form1_Paint(object sender, PaintEventArgs e) { Image bull = 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 = //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 = //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 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, 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