Mastering VB Events
Article Index
Mastering VB Events
Mouse events and Parameters
A Drawing Program
More features and problems

Simple this program may be but we need to go a little further. We need to allow the user to select the type of shape that is drawn - for example, a line or a rectange. The simplest way to do this is to add two buttons labelled Line and Box to the form.

Obviously the shape drawn depends on the button that the user last clicked on but this means that we have to "remember" this fact while the program is running. Once again we add a property to the Form1 object to record the shape to be drawn. In this case the new property is called Shape can be set to 1 to indicate that a line has to be drawn and to 2 to indicate that a box is required.

To set Shape all we need is to define the click event handlers for each button as:

Dim Shape As Integer
Private Sub Button1_Click(
  ByVal sender As System.Object,
  ByVal e As System.EventArgs)
  Handles Button1.Click
Shape = 1
End Sub

Private Sub Button2_Click(
  ByVal sender As System.Object,
  ByVal e As System.EventArgs)
  Handles Button2.Click
Shape = 2
End Sub

With this addition we can now rewrite the MouseDown and MouseUp routines to take notice of the value in Shape. In fact it is only MouseDown that has to be changed because it has to do the actual drawing.

MouseDown is the most complicated as it has to do the actual drawing.  The Graphics object has a method to draw a Rectangle called DrawRectangle. This works in much the same way as DrawLine but now you specify the color, top left hand corner and the width and hieght of the rectangle. This means we have to use the two locations to work out the width and height.

To select which command is used we need to test the value in Shape using an IF conditional command. As with the graphics commands, the IF command will be explained in detail later but all it does is to test the condition that follows it and carries out the command if the condition is true.

For example:

If Shape = 1 Then
g.DrawLine(Pens.Black, x, y, e.X, e.Y)
End If

draws a line only if Shape is equal to 1.

If you follow this then you should have no trouble following the logic of the complete MouseDown routine:

Private Sub Form1_MouseUp(
  ByVal sender As Object,
  ByVal e As
   System.Windows.Forms.MouseEventArgs)
  Handles Me.MouseUp
 Dim g As Graphics = CreateGraphics()
 If Shape = 1 Then
  g.DrawLine(Pens.Black, x, y, e.X, e.Y)
 End If
 If Shape = 2 Then
  g.DrawRectangle(Pens.Black, x, y,
                        e.X - x, e.Y - y)
 End If
End Sub

If you run the program as it is you will discover that as long as you click one of the buttons first then you can draw a line or a rectangle - as long as you also click on the top left hand corner and then "drag" the mouse down to the bottom right hand corner.

 

rectangles

 

There are a number of problems with this early attempt at a drawing program. The only one that is easy to fix is that when the program is first run the Shape variable doesn't have a value until the user clicks on one of the buttons. To give Shape a default value we can define the Load event handler for Form1 as:

Private Sub Form1_Load(
  ByVal sender As Object,
  ByVal e As System.EventArgs)
  Handles Me.Load 
Shape = 1
End Sub

which sets Shape to 1 when the form is loaded.

The other two main problems with the program are that if you try to draw a rectangle starting from the bottom right hand corner nothing appears. See if you can work out why - hint: it is to do with the calculated width and height of the rectangle. The second problem is that the drawing vanishes if another window overlaps it or if the application is minimised and restored. What we need is called "persistent" and while this isn't difficult it takes us into some subtle areas of implementation.

That's all there is to the program. Now you have seen how mouse events can be used to discover where on the screen the user is pointing and how to use the object included in event routines. In addition we have seen how global variables work and looked ahead to see how graphics commands and the IF statement work.

The key thing to take away from this demonstration is that a typical Visual Basic application is essentially a set of event handlers that are called in response to things happening, usually in the outside world. Events are what make a program do things.

 

To access the complete project including the graphics once you have registered,  click on CodeBin.

 

This is the third chapter in an eBook introducing Visual Basic 2010.

See also:

Chapter 1 - Hello VB

Chapter 2 - Mastering VB Properties

Chapter 4 - Mastering VB Controls

Chapter 5 - Graphics and Animation

 

If you would like to be informed about new articles on I Programmer you can either follow us on Twitter, on Facebook , on Digg or you can subscribe to our weekly newsletter.

<ASIN:0470502223>

<ASIN:0672331136>

<ASIN:0735626693>