Chapter 20: Drawing Basics

Visual Basic .NET provides a large assortment of objects for drawing and for controlling drawing attributes. The Graphics object provides methods that enable you to draw and fill rectangles, ellipses, polygons, curves, lines, and other shapes. Pen and Brush objects determine the appearance of lines (solid, dashed, dotted) and filled areas (solid colors, hatched, filled with a color gradient).

This chapter provides an overview of the drawing process and a survey of the most important drawing namespaces and their classes. It describes in detail the most central of these classes, the Graphics object, and provides examples showing how to use it.

Chapter 21 describes some of the other important drawing classes in greater detail.

If you are new to graphics, this chapter and those that follow may involve a lot of new concepts and unfamiliar terms. The examples available on the book’s web site will help make many of the concepts more concrete. If you find some terms confusing, you can find additional details by using the advanced Microsoft search page search.microsoft.com/search/search.aspx?st=a. The advanced Google search page www.google.com/advanced_search also returns excellent results and you can enter one of the Microsoft sites www.microsoft.com, msdn.microsoft.com, or support.microsoft.com in the Domain field if you like. You can also consult online glossaries such as the Webopedia (www.webopedia.com) and Wikipedia (www.wikipedia.org) for basic definitions.

Drawing Overview

Whenever you draw something in Visual Basic, you must use a Graphics object. This object represents the surface where you are drawing, whether it is a PictureBox, Form, or PrintDocument control. Sometimes you will have to create a Graphics object, and other times (as in a Paint event handler) one is provided for you.

The Graphics Device Interface+ (GDI+), or the .NET version of GDI drawing routines, uses two classes, Pen and Brush, to determine the appearance of whatever they are drawing.

Tip 

Note that Windows Vista uses a slightly different underlying graphics model than previous versions of Windows. Microsoft has worked to make it compatible with GDI+, but you might encounter some small differences or glitches. For some additional information about the underlying graphics system, see the article “Graphics APIs in Windows Vista” at msdn2.microsoft.com/library/bb173477.aspx.

A Pen object determines how lines are drawn. A Pen sets a line’s color, thickness, dash style, end cap style, and other properties. The Pen applies to all lines drawn by a GDI+ routine. For example, the DrawPolygon subroutine draws a series of lines, and its Pen parameter determines how all the lines are drawn.

A Brush object determines how areas are filled. A Brush sets the area’s fill color, hatch pattern (a pattern of lines, dots, checks, or other shapes), color gradient (shading from one color to another), and texture (image tiled over the area). Chapter 21 provides more advanced details of these and provides figures showing examples. The Brush applies to GDI+ routines that fill closed areas such as FillRectangle, FillEllipse, and FillPolygon.

The basic steps for drawing a simple shape are:

1. Obtain a Graphics object.

2. Define a Brush object and fill with it.

3. Define a Pen object and draw with it.

For example, the Paint event handler shown in the following code runs when the form needs to redraw itself. The Paint event handler’s e.Graphics parameter gives the Graphics object on which the program should draw. When the event handler is finished, Visual Basic copies the contents drawn in this Graphics object onto the parts of the form that must be redrawn. The event handler creates an orange SolidBrush object. SolidBrush is a class derived from the Brush class, so it will serve as a Brush. The program uses the brush to fill the circle bounded by the square with upper-left corners at (10, 10) and 100 pixels wide and 100 pixels tall. The code then creates a pen representing a 10-pixel wide blue line and uses it to draw the outline of the same circle.

  Private Sub Form1_Paint(ByVal sender As Object, _  ByVal e As System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint     Using circle_brush As New SolidBrush(Color.Orange)         e.Graphics.FillEllipse(circle_brush, 10, 10, 100, 100)     End Using     Using circle_pen As New Pen(Color.Blue, 10)         e.Graphics.DrawEllipse(circle_pen, 10, 10, 100, 100)     End Using End Sub  

Whenever the form is hidden and exposed, partially covered and exposed, minimized and restored or maximized, or resized to expose a new part of the form, the Paint event handler executes and redraws the circle. Figure 20-1 shows the result. You can’t see the colors in the book, but you can see that the solid circle has a thick border.

Figure 20-1: This program uses SolidBrush and Pen objects to draw an orange circle with a wide blue outline.

The Graphics object’s filling and drawing methods provide several overloaded versions. Most can take an object parameter that defines the shape to draw. For example, the FillEllipse and DrawEllipse methods can take a Rectangle as a parameter to define the ellipse’s bounding rectangle.

This provides a convenient method for ensuring that the filled and drawn areas match exactly. The following code draws the same circle as the previous example, but it uses a Rectangle method to define the circle. It uses the same Rectangle for its calls to FillEllipse and DrawEllipse, so it’s easy to tell that they define exactly the same circle. If you modify this code to change the circle, you don’t need to remember to change its coordinates everywhere they occur, because the circle is defined in only one place (the Rectangle).

  Private Sub Form1_Paint(ByVal sender As Object, _  ByVal e As System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint     Dim rect As New Rectangle(10, 10, 100, 100)     Using circle_brush As New SolidBrush(Color.Orange)         e.Graphics.FillEllipse(circle_brush, rect)     End Using     Using circle_pen As New Pen(Color.Blue, 10)         e.Graphics.DrawEllipse(circle_pen, rect)     End Using End Sub  

All GDI+ drawing is based on these simple steps, but there are a lot of variations. Pens and brushes can be much more complicated. For example, you can fill a polygon with a color gradient that follows a path you define and then outline it with a custom dash pattern. The Graphics object also provides some fairly exotic drawing routines such as DrawBezier, which draws a Bézier curve.

Tip 

A Bézier curve is a smooth curve guided by a set of four control points. The curve starts at the first point and ends at the last. The middle two points control the curve’s direction and curvature. The section “DrawBezier” later in this chapter gives more information on Bézier curves, and Figure 20-7 shows an example.

The following sections describe the namespaces containing the most useful GDI+ objects. Chapter 21 provides additional details and contains pictures of the results produced by many of these objects.