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:

Context menu showing a list of colors you can use with the Pen class in VB Net and C#

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:

Context menu in Visual Studio showing the DrawLine method selected

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:

C# code for drawing a line on a User Form

And this in C#:

VB Net code for drawing a line on a User Form

Run your programme and click your button. You should see the following straight line appear on your form:

A User Form in Visual Studio showing a line drawn when a button is clicked

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?

A User Form in Visual Studio showing a diagonal line drawn when a  button is clicked

Exercise

And how would you get the following diagonal line?

A User Form in Visual Studio showing another diagonal line drawn when a  button is clicked

Exercise

Draw a vertical red line like the one in the image below:

A User Form in Visual Studio showing a red line drawn when a  button is clicked

In the next lesson below, you'll see that there's a slight problem with the way form works.

The Paint Event >>

Back to the C# NET Contents Page

Back to the VB NET Contents Page