Windows Graphics

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.

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 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: • http://www.cse.usf.edu/~turnerr/Software_Systems_Development/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, 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