CASE Tools Graphical User Interface Programming Using C#

1. CASE Tools Graphical User Interface Programming Using C# Ref: C# How to Program by Deitel

2. Introduction • The most commonly used of the basic graphics classes and structures reside in the System.Drawing namespaces. • Class Graphics contains methods used for drawing strings, lines, rectangles and other shapes on a Control. • The drawing methods of class Graphics usually require a Pen or Brush object to render a specified shape. • The Pen draws shape outlines and the Brush draws solid objects.

4. Classes:Color, Font and FontFamily • Structure Color contains static properties which set the colors of various graphical components, plus methods that allow users to create new colors. • Class Font contains properties that define unique fonts. • Class FontFamily contains methods for obtaining font information.

5. Coordinate System • By default, the upper-left corner of a GUI component (such as a Panel or a Form) has the coordinates (0, 0). • A coordinate pair has both an x-coordinate (the horizontal coordinate) and a y-coordinate (the vertical coordinate). • The x-coordinate is the horizontal distance (to the right) from the upper-left corner. The y-coordinate is the vertical distance (downward) from the upper-left corner. • Programmers position text and shapes on the screen by specifying their (x,y) coordinates. • Coordinate units are measured in pixels.

6. Graphics Contexts and Graphics Objects • A C# graphics context represents a drawing surface that enables drawing on the screen. • A Graphics object manages a graphics context by controlling how information is drawn. • Graphics objects contain methods for drawing, font manipulation, color manipulation and other graphics-related actions. • Every Windows application that derives from class System.Windows.Forms.Forminherits an virtual OnPaint event handler where most graphics operations are performed. • The arguments to the OnPaint method include a PaintEventArgs object from which we can obtain a Graphics object for the control.

7. We must obtain the Graphics object on each call to the method, because the properties of the graphics context that the graphics object represents could change. • The OnPaint method triggers the Control’s Paint event. • To override the inherited OnPaint method, use the following method definition: • protected override void OnPaint( PaintEventArgs e ) • Next, extract the incoming Graphics object from the PaintEventArgs argument: • Graphics graphicsObject = e.Graphics; • Variable graphicsObject now is available to draw shapes and strings on the form.

8. Calling the OnPaintmethod raises the Paint event. • Instead of overriding the OnPaintmethod, programmers can add an event handler for the Paint event. • Visual Studio .NET generates the Paint event handler in this form: protected void MyEventHandler_Paint(object sender, PaintEventArgs e ) • An event—such as the covering, uncovering or resizing of a window—calls the OnPaintmethod of that form. • Similarly, when any control (such as a TextBoxor Label) is displayed, the program calls that control’s Paint method. • If programmers need to cause method OnPaintto run explicitly, they should not call method OnPaint. Rather, they can call the Invalidate method (inherited from Control).

9. Invalidate method refreshes a control’s client area and implicitly repaints all graphical components. • Controls, such as Labels and Buttons, do not have their own graphics contexts, but one can be created. • To draw on a control, first create its graphics object by invoking the • CreateGraphics method: • Graphics graphicsObject = controlName.CreateGraphics(); • where graphicsObject represents an instance of class Graphics and controlName is any control. • Now, a programmer can use the methods provided in class Graphics to draw on the control.

10. Color Control • Every color can be created from a combination of alpha, red, green and blue components(called ARGB). • ARGB components are bytes that represent integer values in the range from 0 to 255. The alpha value determines the opacity of the color. • . The table in Fig. 16.4 describes two FromArgb method calls. One takes three int arguments, and one takes four int arguments (all argument values must be between 0 and 255). • Color properties A, R, G and B return bytes that represent int values from 0 to 255,

12. SolidBrush • SolidBrush constructor takes a Color object—(the color to draw). • In most Fill methods, Brushes fill a space with a color, pattern or image.

13. Application • The application in Fig. 16.6 demonstrates several of the methods and properties described in Fig. 16.4. It displays two overlapping rectangles, allowing the user to experiment with color values and color names.

16. When the application begins its execution, it calls class ShowColors’sOnPaintmethod to paint the window. • Line 44 gets a reference to PaintEventArgs e’s Graphics object and assigns it to Graphics object graphicsObject. • Lines 47–50 create a black and a white SolidBrushfor drawing on the form. • Class SolidBrush derives from abstract base class Brush; programmers can draw solid shapes with theSolidBrush. • Graphics method FillRectangledraws a solid white rectangle with the Brush supplied as a parameter (line 53). • It takes as parameters a brush, the x- and y-coordinates of a point and the width and height of the rectangle to draw. The point represents the upperleft corner of the rectangle. • Lines 56–57 display the string Name property of the Brush’s Color property with the Graphics DrawStringmethod.

17. The programmer has access to several overloaded DrawString methods; the version demonstrated in lines 56–57 takes a string to display, the display Font, a Brush and the x- and y-coordinates of the location for the string’s first character. • Lines 60–62 assign the Color behindColor value to the Brush’s Color property and display a rectangle. • Lines 65–68 extract and display the ARGB values of Color frontColor and then display a filled rectangle that overlaps the first. • Button event handler colorValueButton_Click (lines 78–89) uses Color method FromArgb to construct a new Color object from the ARGB values that a user specifies via text boxes. It then assigns the newly created Color to frontColor. • Button event handler colorNameButton_Click (lines 92–99) uses the Color method FromName to create a new Color object from the colorName that a user enters in a text box. This Color is assigned to behindColor.

18. If the user assigns an alpha value between 0 and 255 for the frontColor, the effects of alpha blending are apparent. • The predefined GUI component ColorDialog is a dialog box that allows users to select from a palette of available colors. It also offers the option of creating custom colors. • The program in Fig. 16.7 demonstrates the use of such a dialog. When a user selects a color and presses OK, the application retrieves the user’s selection via the ColorDialog’s Color property. • The GUI for this application contains two Buttons. The top one, background- • ColorButton, allows the user to change the form and button background colors. • The bottom one, textColorButton, allows the user to change the button text colors.

21. Lines 28–45 define the event handler that is called when the user clicks Button textColorButton. • The event handler creates a new ColorDialog named color-Chooser and invokes its ShowDialog method, which displays the window. • Property Color of colorChooser stores users’ selections. • Lines 42–43 set the text color of both buttons to the selected color. • Lines 48–65 define the event handler for button backgroundColorButton. The method modifies the background color of the form by setting BackColor equal to the dialog’s Color property. • The method creates a new ColorDialog and sets the dialog’s FullOpen property to true. • The dialog now displays all available colors, as shown in the screen capture in Fig. 16.7. The regular color display does not show the right-hand portion of the screen.

22. Users are not restricted to the ColorDialog’s 48 colors. • To create a custom color, users can click anywhere in the ColorDialog’s large rectangle—this displays the various color shades. • Adjust the slider, hue and other features to refine the color. • When finished, click the Add to Custom Colors button, which adds the custom color to a square in the custom colors section of the dialog. • Clicking OK sets the Color property of theColorDialog to that color. • Selecting a color and pressing the dialog’s OK button causes the application’s background color to change.

23. Drawing Lines, Rectangles and Ovals • Methods DrawRectangle and FillRectangle (lines 33 and 42) draw rectangles on the screen. • For each method, the first argument specifies the drawing object to use. • The DrawRectangle method uses a Pen object, whereas the FillRectangle method uses a Brush object (in this case, an instance of SolidBrush—a class that derives from Brush). The next two arguments specify the coordinates of the upper-left corner of the rectangle, • The fourth and fifth arguments specify the rectangle’s width and height. • Method DrawLine (lines 36–39) takes a Pen and two pairs of ints, specifying the start and endpoint of the line. The method then draws a line, using the Pen object passed to it.

24. Methods DrawEllipse and FillEllipse each take five arguments, the first argument specifies the drawing object to use. The next two arguments specify the upper-left coordinates of the bounding rectangle representing the area in which the ellipse will be drawn. The last two arguments specify the bounding rectangle’s width and height, respectively. • Figure 16.15 depicts an ellipse bounded by a rectangle. The bounding rectangle is not displayed on the screen.

25. Graphics Drawing Methods and Descriptions DrawLine( Pen p, int x1, int y1, int x2, int y2 ) • Draws a line from (x1, y1) to (x2, y2). The Pen determines the color, style and width of the line. DrawRectangle( Pen p, int x, int y, int width, int height ) • Draws a rectangle of the specified width and height. The top-left corner of the rectangle is at point (x, y). The Pen determines the color, style, and border width of the rectangle. FillRectangle( Brush b, int x, int y, int width, int height ) • Draws a solid rectangle of the specified width and height. The top-left corner of the rectangle is at point (x, y). The Brush determines the fill pattern inside the rectangle. DrawEllipse( Pen p, int x, int y, int width, int height ) • Draws an ellipse inside a rectangle. The width and height of the rectangle are as specified, and its top-left corner is at point (x, y). The Pen determines the color, style and border width of the ellipse. FillEllipse( Brush b, int x, int y, int width, int height ) • Draws a filled ellipse inside a rectangle. The width and height of the rectangle are as specified, and its top-left corner is at point (x, y). The Brush determines the pattern inside the ellipse.

27. Drawing Arcs:

28. Graphics methods for drawing arcs DrawArc( Pen p, int x, int y, int width, intheight, intstartAngle, intsweepAngle ) • Draws an arc of an ellipse, beginning from angle startAngle(in degrees) and sweeping sweepAngledegrees. The ellipse is defined by a bounding rectangle of width w, height h and upper-left corner (x,y). The Pen determines the color, border width and style of the arc. DrawPie( Pen p, int x, int y, int width, intheight, intstartAngle, intsweepAngle ) • Draws a pie section of an ellipse, beginning from angle startAngle(in degrees) and sweeping sweepAngledegrees. The ellipse is defined by a bounding rectangle of width w, height h and upper-left corner (x,y). The Pen determines the color, border width and style of the arc. FillPie( Brush b, int x, int y, int width, intheight, intstartAngle, intsweepAngle ) • Functions similarly to DrawPie, except draws a solid arc (i.e., a sector). The Brush determines the fill pattern for the solid arc.

30. Lines 47–49 perform similar functions, except that the specified arc sweeps -270 degrees. • The Size property of a Rectangle determines the arc’s height and width. Line 53 sets the Size property to a new Size object, which changes the size of the rectangle. • The remainder of the program is similar to the portions described above, except that a SolidBrush is used with method FillPie. The resulting arcs, which are filled, can be seen in the bottom half of the screenshot Fig. 16.18.

31. Advanced Graphics Capabilities

32. Lines 26–45 define the Paint event handler for our form. • lines 32–41 make use of System.Drawing.Drawing2D enumerations DashCapand DashStyleto draw a diagonal dashed line. • Line 38 sets the DashCapproperty of coloredPen(not to be confused with the DashCapenumeration) to a member of the DashCapenumeration. • The DashCapenumeration specifies the styles for the start and end of a dashed line. • In this case, we want both ends of the dashed line to be rounded, so we use DashCap.Round. • Line 39 sets the DashStyleproperty of coloredPen(not to be confused with the DashStyleenumeration) to Dash- Style.Dash, indicating that we want our line to consist entirely of dashes.

33. Draw Image Use paint to draw actor

34. Save the actor image in the debug folder of the windows application with name actor and type bmp.

36. Write the following Paint event handler private void Form1_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; Bitmap b = new Bitmap(“actor.bmp"); g.DrawImage(b,new Point(5,5)); }