GDI+ Graphics in Visual Basic 2005 .NET

GDI+ is the way to draw shapes, fonts, images or generally anything graphic in Visual Basic .NET. To start at the beginning, you may want to read Part 1 and Part 2. This segment of the tutorial builds on the foundation established there.

In part 2, we learned how to create a smooth shape from an array of Point objects - the trigonometric functions sine, cosine, and tangent were used as an example - and I mentioned that "a Brush object can also be used in most cases to fill a shape." But the use of brushes in GDI+ goes well beyond simply filling a shape. You can produce startling results with several different kinds of brushes.

To introduce bitmapped graphics, let's see how we can use a custom image to fill a shape using a Brush object. The end result will be a "different" way to draw an image. It's not a "recommended" image drawing technique, but one designed to show you just how the GDI+ objects work.

The first thing to do (and the first thing that you will do in most GDI+ graphics programs) is to code an OnPaint subroutine that Overrides the OnPaint method provided by Visual Basic. Open the code window of a standard Windows Application. After the Class statement, start to enter the code ...

Protected Overrides Sub OnPaint

Notice that if you press Enter right after "OnPaint" then VB.NET's Intellisense will fill in the rest for you:

Public Class Form1
   Protected Overrides Sub OnPaint( _
      ByVal e As System.Windows.Forms.PaintEventArgs)
      MyBase.OnPaint(e)
   End Sub
End Class

Calling the overridden OnPaint method in the MyBase object is always a good idea so Intellisense adds it automatically.

Next, create an instance of the Graphics object passed with the PaintEventArgs. But this time, lets use the new Using keyword that's new in VB.NET 2005. The examples presented so far haven't been as careful as you should be in production code to Dispose the objects created when they're not needed anymore. Creating graphic objects and failing to dispose of them again can cause a program to exhaust system resources in some cases so it's a good practice to dispose of them at the end of procedures. Before VB.NET 2005, this often required the use of a Try - Catch block containing If blocks to avoid crashing when a program attempted to dispose of an object that didn't exist. (If you see this in other books or tutorials, you'll know why it's there now.) But the 2005 version of VB.NET adds the Using block which handles the problem automatically.

In previous examples, we created an instance of the Graphics object with a statement like this:

Dim g As Graphics = e.Graphics

Instead, create the instance with a Using block.

Using g As Graphics = e.Graphics
... code that uses the g instance
End Using

This disposes of the g Graphics object instance when the Using block is exited. We do the same with the Pen object just a bit later.

Then we create a pleasing background on the form with the Clear method.

g.Clear(Color.LightSalmon)

I decided that I wanted to use an image of my pet lizard, Spiney. The image is a JPG file, 236 pixels wide and 221 pixels high. One way to display this image is to paint a line with a graphics brush using the image. (Again, this is just to illustrate what can be done, not necessarily what should be done.) So I created a Pen object with no color 221 pixels wide.

Using myPen As New Pen(Color.Empty, 221)

Instead of a solid color for myPen, I'm going to use a TextureBrush filled with the image of my pet lizard. The TextureBrush is really intended to be used with a small, repeating pattern to provide a "background" for shapes. But that doesn't mean you can't use it any way you like.

myPen.Brush = New TextureBrush(New Bitmap("C:\spiney.jpg"))

The g object was passed from the form, so anything painted on this object will have the form coordinates. To start painting my object in the right place, I use the TranslateTransform method. This statement starts painting 36 pixels right and 20 pixels down (a position determined simply by what looked good).

g.TranslateTransform(36, 20)

Finally, I draw a line (?) 236 pixels long starting 111 pixels down the form to allow for the 221 pixel width.

g.DrawLine(myPen, 0, 111, 236, 111)

It's not a standard way to paint a bit mapped image on a form, but it works! Check out illustration to meet Spiney the lizard!

--------
Click Here to display the illustration
Click the Back button on your browser to return
--------

Here's the complete code for this program:

Public Class Form1
   Protected Overrides Sub OnPaint( _
      ByVal e As System.Windows.Forms.PaintEventArgs)
      Using g As Graphics = e.Graphics
         g.Clear(Color.LightSalmon)
         Using myPen As New Pen(Color.Empty, 221)
            myPen.Brush = _
               New TextureBrush( _
               New Bitmap("C:\spiney.jpg"))
            g.TranslateTransform(36, 20)
            g.DrawLine(myPen, 0, 111, 236, 111)
         End Using
      End Using
      MyBase.OnPaint(e)
   End Sub
End Class

In addition to your own images, GDI+ offers brushes in a solid color - use the SolidBrush object - and a rich library of hatch patterns that you can use (56 at last count) - use the HatchBrush object.

In the next lesson, we take a look at how shapes can be blended together. For a "time out" example showing how Geoff, an About Visual Basic reader from England, used GDI+ for a programming tutorial explaining binary numbers using the metaphor of a traffic light, go to this link.