Making Graphics Appear
In this lesson, you will learn how to use the graphics methods in Visual Basic to draw on a form.
In an earlier lesson, you learned how to display pictures on a form using a PictureBox control. That works fine if you already have a picture, but sometimes you might want to draw something directly on your form. For example, you might want to draw a line to separate two fields, or a circle to highlight an important label.
In Visual Basic, you can use graphics methods to draw just about anything on a form or on a control.
Graphics Basics
Before you start drawing, there are a few things that you need to know. A computer screen is made up of thousands of tiny dots known as pixels—by defining the color of each pixel, your program controls what displays on the screen. Of course, most of this work is already done for you by the code that defines forms and controls.
Think of a form as a canvas upon which you can draw or paint—as with a real canvas, a form has dimensions. Where a real canvas is measured in inches or centimeters, a form is measured in pixels. A system of coordinates determines where each pixel is located, with the X coordinate measuring left to right and the Y coordinate measuring top to bottom.
The coordinates start at the upper-left corner of the form, so if you wanted to draw a single dot 10 pixels from the left and 10 pixels down, you would express the X and Y coordinates as 10, 10.
Pixels are also used to express the width and height of graphics. To define a square that is 100 pixels wide and 100 pixels tall, with its upper-left corner 10 pixels from the left and 10 pixels down, you would express the coordinates as 10, 10, 100, 100.
The act of drawing on the screen is known as painting. Forms and controls have a Paint event that occurs whenever they need to be redrawn, for example, when a form is first displayed or when it has been covered by another window. Any code that you write to display graphics is usually contained in the Paint event handler.
Drawing a Line
To draw a line across a form, there are two things that you need to define—its coordinates and its color. As noted above, the X and Y coordinates are expressed in pixels. For a line, there are two sets of coordinates—the starting location followed by the ending location.
Just as you would use a pen to draw a line on a piece of paper, Visual Basic uses a Pen object to draw on the form. The Pen object defines the appearance of the line—in this case, the color. In the following procedure, you will draw horizontal, vertical, and diagonal lines on a form.
Try It!
To draw lines
On the File menu, choose New Project.
On the Template pane, in the New Project dialog box, click Windows Application.
In the Name box, type Lines 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.
' Draw a 400 pixel black line 25 pixels from the top of the form. e.Graphics.DrawLine(Pens.Black, 0, 25, 400, 25) ' Draw a 500 pixel red line 100 pixels from the left of the form. e.Graphics.DrawLine(Pens.Red, 100, 0, 100, 500) ' Draw a diagonal blue line from the upper left to the lower right. e.Graphics.DrawLine(Pens.Blue, 0, 0, Me.Width, Me.Height)Press F5 to run the program. You should see three lines on the form.
Next Steps
In this lesson, you learned the basics of graphics, as well as how to draw lines. In the next lesson, you will learn to draw shapes such as rectangles and circles.
Next Lesson: Drawing Shapes on a Form
See Also
Tasks
Displaying Images: Using the PictureBox Control