A Drawing Program

This example shows  how to take control of the mouse via the lower level mouse events.

The task is to write a program that allows a user to draw on the screen. If you have used programs such as Windows Paintbrush or Corel Draw! then you will know that this is a big project! However, you might be surprised just how quickly you can create something that works using Visual Basic.

Start Visual Basic Express (or Visual Studio) running and  create a new Windows Forms application. This will, by default, have a Form called Form1.

Select the form by clicking on it, view the Properties Window, click the "lightening" button to display the events associated with the Form. Scroll down until you find the MouseDown event. If you double click on this you will be transferred to the code editor where a suitable event handler will have been created for you:

The default event handler doesn't contain any instructions - its just a "stub" waiting for you to fill in what should happen:

Private Sub Form1_MouseDown(
  ByVal sender As System.Object, 
  ByVal e As 
    System.Windows.Forms.MouseEventArgs) 
                 Handles MyBase.MouseDown
 End Sub

The first thing we can do is to simply draw a line from the top left hand corner of the form - which is location 0,0 to the location where the mouse button was pressed. This we can do by first getting the Graphics object corresponding to Form1. Some objects in Visual Basic can be drawn on and this is done using their Graphics object - more about this later.

The form's graphics object can be otained using:

Dim g As Graphics = CreateGraphics()

The Graphics object has lots of methods that let you draw on the Form. For example there is a DrawLine method that will draw a line in a particular color from one point to another. That is:

g.DrawLine(Pens.Black, 0, 0, e.X, e.Y)

will draw a line in black from the point 0,0 to the point where the mouse button was pressed i.e. where the MouseDown event occurred. Notice that way that we use the EventArgs object e to get the position of the mouse.

Putting the two instructions together, the complete event handler is:

Private Sub Form1_MouseDown(
   ByVal sender As System.Object, 
   ByVal e As 
     System.Windows.Forms.MouseEventArgs) 
   Handles MyBase.MouseDown
 Dim g As Graphics = CreateGraphics()
 g.DrawLine(Pens.Black, 0, 0, e.X, e.Y)
End Sub

if you now run the program you will discover that every time you press the mouse button down a line is drawn from the top left-hand corner to the location of the mouse.

Drawing lines from 0,0 to the current position of the mouse is interesting but we need to be able to draw from any location to any location. To do this we have to use a slightly clever method. When the mouse button is pressed down we simply need to remember the location and then when the mouse button is released at a second location we can draw a line from the first location to the second.

This isn't difficult but it does involve some new ideas that we will only get to grips with in later chapters. The main idea is that we can add properties to the Form object that can be used to store the mouse's position when the mouse button is pressed. To do this we need to redefine the MouseDown event handler to read:

Dim x, y As Integer
Private Sub Form1_MouseDown(
   ByVal sender As System.Object, 
   ByVal e As 
     System.Windows.Forms.MouseEventArgs)
   Handles MyBase.MouseDown
 x = e.X
 y = e.Y
End Sub

The first line starting Dim creates two new properties for the form called x and y which the event handler uses to store the co-ordinates of the first location.

Next we need to add a MouseUp event handler - use the Properties Window in the designer again. Now all we need to do is use the instructions we used earlier to get the Graphics object and draw the line from the first to the second location:

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

Now if you run the program you will discover that you can draw lines anywhere on the Form by holding down the mouse button at the starting location, moving the mouse to the finishing location and releasing the mouse button. The lines then appears as if by magic.

<ASIN:143022455X >

<ASIN:0073517259 >