Home and Learn: Intermediate Programming
Draw a Line on a User Form
Graphics Tutorials: For C# and VB NET Students
The NET framework comes with a lot of inbuilt classes to do with Graphics. You can use these classes to draw on forms, and on form objects such as Picture Boxes.
The first thing we'll do is to draw a line on a form when a button is clicked. This will teach you how to create objects from the various Graphics classes. It will also highlight a problem that needs to be solved.
Drawing lines on a form
To draw anything on a form or form object, you need to use a Graphics object. This will take care of all the tricky graphic card manipulation, and getting your drawing to the screen.
So start a new project. Put a button on your new form, somewhere on the right-hand side. Make the form a little big bigger. Now double click your button to get at the coding window.
To set up a graphics object, add this line to your button code in VB Net:
Dim surface As Graphics = CreateGraphics()
And this in C#:
Graphics surface = CreateGraphics();
If you get a wavy line in VN Net, change it to:
Dim surface As Drawing.Graphics = CreateGraphics()
But the line just sets up a variable of type Graphics. We've called it surface. After the equal sign, you create a Graphics object.
Lines, and most other shapes, are drawn with Pen objects. Once you set up a Pen object, you then instruct the graphics object to draw a line with your chosen Pen. So add this line to your code:
VB Net
Dim pen1 As Pen = New Pen(Color.Black, 2)
C#
Pen pen1 = new Pen(Color.Black, 2);
We're setting up a variable of type Pen. We've called ours pen1. We're creating a Pen object with the New keyword. After the word Pen, you type a round bracket. The first thing you need to do is to specify a colour for your pen. As soon as you type the round bracket, you should see a list of colours to choose from:
There's quite a lot! Select one from the list, then type a comma.
The second argument is for the width of your pen. The width value is a Single in VB and a float in C#, so you can have 1.5, say, or 2.4. But type the number 2, then the final round bracket.
Now that we have a graphics object and a pen, we can tell the graphics object to draw the line. This is quite straightforward because the graphics object has a Sub/method called DrawLine.
Type the name of your graphics object, and then a dot. You should see a list of all the things that the graphics object can do:
As you can see, the graphics object can draw lots of other things too. We'll meet a few more soon, but for now select DrawLine from the list. Then type a round bracket. You should see the colour list appear again. You'll also see 1 of 4 possible overloads. Keep it on the first one. Don't select a colour, though. Instead, type the name of your pen tool, which was pen_one for us. Now type a comma. You'll be invited to type in some number for the position of your line: X1, Y1, X2, Y2. The first two numbers, X1 and Y1, are for the start of your line. X1 is how far to the left you want to start drawing your line; Y1 is how far down you want to start drawing. Type 10, 10 for the first two numbers. The next set of numbers, X2 and Y2, are for the end of your line. Again, X2 is how far to the left, and Y2 is how far down. Type 100, 10 for the second two numbers. Then type the closing round bracket. You should have this (add a semicolon at the end, in C#):
surface.DrawLine(pen1, 10, 10, 100, 10)
So what you're saying here is "Draw a line with the pen tool I've set up. Draw it at position 10, 10, 100, 10".
The entire code should now look like this in Visual Basic .Net:
And this in C#:
Run your programme and click your button. You should see the following straight line appear on your form:
So to recap. To draw a line on a form, you do the following:
- Set up a Graphics object with CreateGraphics()
- Set up a Pen object, and specify a colour and line width
- Use the DrawLine Subroutine or method using your Pen, and some position coordinates
To get some more practice, try the following exercises.
Exercise
How would you get the following diagonal line?
Exercise
And how would you get the following diagonal line?
Exercise
Draw a vertical red line like the one in the image below:
In the next lesson below, you'll see that there's a slight problem with the way form works.
Back to the Intermediate Programming Contents Page