Visual Basic.Net - Graphics for Beginners

[dday9]

Basic Introduction to GDI+
The most basic form of graphics programming in Visual Basic.Net utilizes a collection of classes known as GDI+. GDI+ stands for Graphics Device Interface Plus and the reason for the plus suffix is because prior to GDI+ there was GDI so it is there to be shown as an improvement over its predecessor.

The GDI+ classes reside in the System.Drawing namespace and some classes are:

1. System.Drawing.Bitmap
2. System.Drawing.Graphics
3. System.Drawing.Icon
4. System.Drawing.Image

Just to name a few. Each class serves its purpose and throughout the following tutorial you’ll find how to utilize these classes to do basic drawing operations in Visual Basic.Net.

Surfaces
In order for a painter to start painting, he must have a canvas; the same is true in programming. In Visual Basic.Net, there are two types of canvases for a programmer to use. The first type of canvas is any type of object that inherits System.Windows.Forms.Control, these include:

1. System.Windows.Forms.Button
2. System.Windows.Forms.Panel
3. System.Windows.Forms.TextBox

Just to name a few. In order to access the control’s canvas, aka – surface, you would handle the control’s Paint event.

The second type of canvas is the System.Drawing.Bitmap class. A Bitmap consists of a collection of pixels that ultimately make up an image; just like any class, to declare a Bitmap you must declare a new instance of the object and because a Bitmap implements the System.IDisposable interface it is important to declare a new instance of a Bitmap by utilizing the Using statements.
Here is an example of declaring a Bitmap:

Using b As Bitmap = New Bitmap(50, 50)

End Using

 

Graphics
Once you have a canvas to draw on, you need to have some kind of object to start the drawing; the System.Drawing.Graphics class is what takes care of the drawing operations in Visual Basic.Net. There are three different methods to use the Graphics class, one method accesses a Graphics object that already exist while the other two methods actually create a Graphics object.

In order to access a Graphics object that already exists, you must utilize the PaintEventArgs in a control’s Paint event. This is the parameter e in the event declaration, highlighted in red:

Private Sub Form1_Paint(ByVal sender As Object, ByVal e As PaintEventArgs) Handles MyBase.Paint
    Dim g As Graphics = e.Graphics
End Sub

In this particular example, it allows you to access the Graphics object associated with the surface of Form1. Something worth mentioning is that the Graphics class also implements System.IDisposable, but if you notice in the example that I do not utilize the Using statement. This is because disposing of any part of an argument in an event handler is typically a bad idea and it’s best to allow the operating system to release the object after the painting takes place.

The first example of creating a Graphics object is to use a control’s CreateGraphics method. This method creates the Graphics for a particular Control. Here would be an example of creating a Graphics object for a Panel using the CreateGraphics method:

Private Sub CreateButtonGraphics(ByVal sender As Panel)
    Using g As Graphics = sender.CreateGraphics()

    End Using
End Sub

The last example of creating a Graphics object would be to use one of the many From methods. The different From methods include:

1. System.Drawing.Graphics.FromHdc
2. System.Drawing.Graphics.FromHdcInternal
3. System.Drawing.Grpahics.FromHwnd
4. System.Drawing.Grpahics.FromHwndInternal
5. System.Drawing.Graphics.FromImage

The method most commonly used is the FromImage method and this is because a programmer will typically create a Bitmap to draw on rather than drawing on another device or window. The following is an example of creating a Bitmap and then creating a Graphics object from that Bitmap:

Using b As Bitmap = New Bitmap(50, 50)
    Using g As Graphics = Graphics.FromImage(b)

    End Using
End Using

Drawing Shapes
Now that you have a canvas to draw on and an object to do the drawing operations, it’s time to start drawing some basic primitive shapes. This is done by calling the various Draw and Fill operations from the Graphics object. A few drawing operations include:

1. System.Drawing.Graphics.DrawArc
2. System.Drawing.Graphics.DrawEllipse
3. System.Drawing.Graphics.DrawImage
4. System.Drawing.Graphics.DrawLine
5. System.Drawing.Graphics.DrawRectangle

Just to name a few. A few fill operations include:

1. System.Drawing.Graphics.FillEllipse
2. System.Drawing.Graphics.FillPolygon
3. System.Drawing.Graphics.FillRectangle

Just to name a few. The difference between Draw versus Fill is that Draw will draw just the outline of the shape whereas Fill will fill the interior of the shape.

In order to call the various Draw operations, the Graphics object needs an object that will actually draw the shape and this object is the System.Drawing.Pen class. The Pen class determines the color, width, and style of the shape. The Pen class also implements IDisposable which means that it is important to utilize the Using statement when creating pens. Here are examples of creating different pens:

Using p As Pen = New Pen(Color.Red)
    ‘Creates a new red color pen with the size defaulted to 1
End Using

Using p As Pen = New Pen(Color.Red, 5)
    ‘Creates a new red color pen with the size set to 5
End Using

The Fill operations also need an object that will actually fill the shape and this object is the System.Drawing.Brush class. The Brush class is a bit different than the Pen class in that there are several different types of brushes. However, for this tutorial we will be using the System.Drawing.SolidBrush class to do the various Fill operations. Just like the Pen class, the SolidBrush implements IDisposable and it is important to utilize the Using statement when creating a SolidBrush. Here is an example of a solid brush:

Using b As SolidBrush = New SolidBrush(Color.Red)
    ‘Creates a new red color brush
End Using

Now that we have all the objects needed, we can start drawing primitive shapes. Here is an example of drawing and filling several primitive shapes on a Form’s surface:

Private Sub Form1_Paint(ByVal sender As Object, ByVal e As PaintEventArgs) Handles MyBase.Paint
    Dim g As Graphics = e.Graphics

    ‘Draw a simple house
    Using p As Pen = New Pen(Color.Red)
        ‘Draw the upper-left roof
        g.DrawLine(p, New Point(50, 50), New Point(75, 25))

        ‘Draw the upper-right roof
        g.DrawLine(p, New Point(75, 25), New Point(100, 50))

        ‘Draw the body
        g.DrawRectangle(p, New Rectangle(50, 50, 50, 50))
    End Using

    Using b As SolidBrush = New SolidBrush(Color.Yellow)
        ‘Fill in a Sun
        g.FillEllipse(b, New Rectangle(0, 0, 35, 35)

         ‘Fill in the door for the house
         g.FillRectangle(b, New Rectangle(60, 75, 30, 100))
    End Using
End Sub

Conclusion
Hopefully you learned how to draw in Visual Basic.Net using GDI+. As you can tell, drawing is fairly simple but can have its pitfalls such as not utilizing the Using statements when declaring the various objects.

[dday9]

Reserved.

[ByteKnight]

I do not know how anyone else did not comment on this. Thank you, VERY MUCH for this tutorial. I haven't found any of these in similar fashion. Incredible for beginners such as myself. Thank you!

[dday9]

Good, I'm glad you liked it!

[ByteKnight]

Good, I'm glad you liked it!

Are there any other overloads that are good to read more about? Eclipse, rectangle, etc?

[dday9]

I'm sorry for the late reply, I thought that I had replied to you but apparently I had not. Some good "intermediate" methods to read up on are:

• DrawPolygon
• FillPolygon
• DrawPath
• FillPath

Draw/Fill Polygon helps draw more complex shapes and Draw/Fill Path helps set regions on controls.

[sreekrishnaraj]

It is very nice ,very easy to understand....

[dday9]

Good, I'm glad you liked it!

[schoemr]

Thank you dday I like how you explain by use real life example of painter and canvas. I have not draw this house yet but am going to try!

[cristiano.gossmann]

Eu consigo ter interação com o objeto desenhado? Ex, desenhei um retângulo, consigo programar se ao clicar nela, apresentar uma determinada mensagem, ou até mesmo deixar a borda destacada, sinalizando que selecionei o objeto?

[cristiano.gossmann]

Can I have interaction with the drawn object? For example, I drew a rectangle, can I program it by clicking on it, displaying a certain message, or even leaving a highlighted border, signaling that I select the object?

[dday9]

This is a good question and I may amend my original post to include this question.

Whenever you draw on a bitmap, the shape made is not an object (aka - class) and therefore the data associated with the shape is not automatically stored somewhere. However, there is a simple workaround, you could store the data yourself and redraw it as needed where the user interacts with object. So for example, with your request, you could create a Class that stores the Rectangle (point and size) of the shape as well as a property that indicates if it is "selected". Then whenever you draw the shape using GDI+, you would simultaneously create a new instance of this custom Class. Then in the paren't click event where the shape is drawn, you would check if the location of where the parent was clicked is within the bounds of the shape drawn.