Drawing Shapes on a Form

Drawing Shapes on a Form

Switch on low bandwidth view

Collapse All

Language Filter

This page is specific to

Microsoft Visual Studio 2008/.NET Framework 3.5

Other versions are also available for the following:

Microsoft Visual Studio 2005/.NET Framework 2.0

Visual Basic Guided Tour

Drawing Shapes on a Form

In this lesson, you will learn how to draw shapes such as rectangles or circles on a form.

In the previous lesson, you learned how to draw lines on a form using the DrawLine graphics method and a Pen object. In addition to the DrawLine method, Visual Basic also has graphics methods for drawing shapes, and graphics objects known as brushes for filling shapes.

Drawing Simple Shapes

Drawing a shape is similar to drawing a line—you need to define the coordinates and the color with which to draw. Where a line took coordinates defining a starting and ending point, a shape such as a square or rectangle takes coordinates describing its upper-left corner, width, and height.

Circles and ovals (also known as ellipses) do not have upper-left corners, so instead the coordinates describe the upper-left corners of their bounding rectangles—an imaginary rectangle of the same width and height of the circle or oval.

Try It!

To draw shapes

On the File menu, choose New Project.
On the Templates pane, in the New Project dialog box, select Windows Application.
In the Name box, type Shapes and then click OK.
A new Windows Forms project opens.
Double-click the form to open the Code Editor, and then select Paint from the Events drop-down list.

In the Form1_Paint event handler, add the following code.

Visual Basic

' Draw a 200 by 150 pixel green rectangle.
e.Graphics.DrawRectangle(Pens.Green, 10, 10, 200, 150)
' Draw a blue square
e.Graphics.DrawRectangle(Pens.Blue, 30, 30, 150, 150)
' Draw a 150 pixel diameter red circle.
e.Graphics.DrawEllipse(Pens.Red, 0, 0, 150, 150)
' Draw a 250 by 125 pixel yellow oval.
e.Graphics.DrawEllipse(Pens.Yellow, 20, 20, 250, 125)

Press F5 to run the program. You should see four shapes on the form.
Keep the project open—you will add to it in the next procedure.

Drawing Filled Shapes

So far, the shapes that you have drawn are just outlines. To draw shapes with solid colors, you need to use one of the fill methods such as FillRectangle or FillEllipse. The fill methods use a Brush object, another type of graphics object that can paint.

When filling a shape with a different color, you will need to define coordinates that are smaller than the shape; otherwise the border will be covered. For example, to fill a square with the coordinates 0, 0, 150, 150 you would specify a fill with the coordinates 1, 1, 148, 148, accounting for the one pixel thickness of the line.

To draw filled shapes

In the Form1_Paint event handler, add the following code below the code that you entered earlier.

Visual Basic

' Fill the circle with the same color as its border.
e.Graphics.FillEllipse(Brushes.Red, 0, 0, 150, 150)
' Fill the square with a different color.
e.Graphics.FillRectangle(Brushes.Aquamarine, 31, 31, 148, 148)

Press F5 to run the program.
Notice that the filled square appears on top of the filled circle, but that part of its border has disappeared. The order in which you call the graphics methods determines the order in which they are drawn—in this case, the filled circle was drawn after the blue-border rectangle.
Try changing the order of the methods and see what happens.

Next Steps

In this lesson, you learned how to draw and fill shapes. In the next lesson, you will learn how to draw text using graphics methods.

Next Lesson: Drawing Text on a Form

Tasks

Making Graphics Appear

Other Resources

Drawing Pictures: Using Graphics

Visual Basic Guided Tour