From Dan Mabbutt,
Your Guide to Visual Basic.
FREE Newsletter. Sign Up Now!

Mar 4 2007

GDI+ is the way to draw shapes, fonts, images or generally anything graphic in Visual Basic .NET. You can get the most from this tutorial by starting with Part 1 where the fundamentals of GDI+ are explained.

Previous Lesson Links

• Part 1 - Introduction to GDI+ and the Graphics object
• Part 2 - Drawing a curve with a series of connected points
• Part 3 - Advanced vector graphics with an intro to bitmapped graphics

Part 3 showed that a shape can be painted in a variety of ways: with a solid color, a VB.NET supplied hatch pattern, or with your own graphic image.

It's also possible to blend different things together to create a composite. To show how this can be done, imagine you wanted a graphic that displays the approximate temperature by changing from mostly blue (cold) to mostly red (hot). GDI+ can produce a smooth color gradient automatically in just a few lines of code.

To make things more interesting, let's add a few more conditions.

• The display must change dynamically when the temperature changes. (I'll simulate this by adding a scrollbar component to "change" the temperature.)
• The display must also include another image that changes when the temperature is above or below the midpoint.

After all ... programs should do things, not just sit there. The illustration below shows you what it will look like.

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

I use the entire surface of the form as the Graphics "canvas" again, so as in previous examples, the way to start the program is to override the OnPaint event for the form to create a Graphics object.

Protected Overrides Sub OnPaint( _
   ByVal e As System.Windows.Forms.PaintEventArgs)
   Dim g As Graphics = e.Graphics

I use properties and methods in a LinearGradientBrush object to get the effect I want, so I declare a LinearGradientBrush in the OnPaint subroutine with a Using block to ensure that the object is disposed when the subroutine is exited. I use the size of the form itself from the Me.ClientRectangle object to provide a boundary for the LinearGradientBrush. And I decided that a horizontal gradient looked best.

Using myBrush As LinearGradientBrush _
   = New LinearGradientBrush( _
   Me.ClientRectangle, _
   Color.Blue, Color.Red, _
   LinearGradientMode.Horizontal)

The Blend property of the LinearGradientBrush lets me control the gradient between blue and red. The Blend property holds two arrays: Factors and Positions. Each element of the Positions array has a corresponding Factors color value. Both are floating point numbers (type Single) that should be between 0 and 1. Values in the Positions array indicate the percentage distance across the gradient. The Factors array is the percentage of the starting and ending color. I used the word "should" because I've discovered that you can get some bizarre effects with numbers outside this range. And you can also make the program crash on an ArgumentException error so caution is advised.

You can use larger arrays to get interesting "wave like" gradients but all I need is one factor in the middle to control this gradient. I declare these as class level variables (before the first Sub) and load them in the form Load event. Only the Factors element for the middle will change.

Public Class BlendForm
   Private PositionArray(2) As Single
   Private FactorArray(2) As Single
...
   Private Sub BlendForm_Load( ...
      FactorArray = New Single() {0.0, 0.5, 1.0}
      PositionArray = New Single() {0.0, 0.5, 1.0}
   End Sub

With this code in place, the OnPaint event can create the Blend property for the LinearGradientBrush. Notice that the Blend object itself has three elements.

Dim myBlend As Blend = New Blend(2)
myBlend.Factors = FactorArray
myBlend.Positions = PositionArray
myBrush.Blend = myBlend

Now I'm ready to actually create the gradient in the OnPaint event.

g.FillRectangle( _
   myBrush, Me.ClientRectangle)

This code will create a nice even gradient from blue to red across the whole form. But the whole job isn't done yet. The next step is to vary the gradient with an HScrollBar component to simulate a temperature change. In a real application, the temperature might be passed in as a parameter from another program.

Add the HScrollBar to the form and double-click it to generate the default Scroll event subroutine. One line of code is all it takes to vary the gradient.

      PositionArray(1) = BlendScroll.Value / 91

The "magic number" 91 is necessary to compensate for what I think is a genuine bug in Microsoft's .NET "scroll bar" components. See my blog "They broke the scroll control!" for details.

And that's it! .... For the gradient. You might want to run your code if you're following along to make sure it works up to this point. On the next page, we complete our requirements list by drawing an image on the gradient that also changes with the temperature.