Keyboard Events and Mouse Events

Keyboard and Mouse are two most important input devices. When user uses these devices, Visual Basic generates a set of events. In this chapter, we will discuss about the events that are generated by keyboard and mouse. We will also see how to use these events and how to choose the right event. Drag and Drop interface has gained a lot of popularity and acceptance among users. We will discuss about how to implement drag and drop interface, and properties, methods and events related to drag and drop.

Keyboard Events
When user presses a key on the keyboard, Visual Basic generates a few events. These events allow user to know which key is exactly pressed. Keyboard events occur for the controls that can receive input (have focus).

The following are the keyboard events available in Visual Basic:

Event When does it occur?
KeyDown When user presses the key on keyboard.
KeyUp When user releases the key on keyboard.
KeyAscii When user presses and releases an ANSI key.
Table 8.1: Keyboard events

KeyPreview property of Form
If the KeyPreview property of the form is set to True, the form receives keyboard events before controls on the form receive the events. This is useful when you want to have a global keyboard handler for the form.

The following section will discuss all the details related to the three keyboard events mentioned in table 8.1.

KeyDown and KeyUp events
Keydown event occurs when user has pressed a key from keyboard. KeyUp event occurs when user releases a key that he has pressed earlier. That means every KeyDown event is followed by a KeyUp event.

These events occur for all types of keys including special keys like F1 and Home key. The following are parameters for these two events.

Parameter Meaning
KeyCode A key code is the code of the key pressed. Each key on the keyboard has a code. You can use constants such as vbKeyF1 (the F1 key) to know which key on the keyboard is actually pressed by user.
Shift An integer that corresponds to the state of the SHIFT, CTRL, and ALT keys at the time of the event. Please see the section “Knowing status of control key” for details on this.
Table 8.2: Parameters of KeyDown and KeyUp events.

Knowing the status of control keys
It is possible to know which of the three control keys - SHIFT, CTRL, and ALT – are pressed at the time of pressing a key using Shift parameter of KeyDown and KeyUp events.

Shift parameter is an integer parameter with first three bits containing the status of these three control keys. Depending upon which keys are pressed the corresponding bits will be set. The bit and the corresponding key will be:

Bit Key Value Constant
0 SHIFT 1 VbShiftMask
1 CTRL 2 VbCtrlMask
2 ALT 4 vbALTMask

Note: You need not directly deal with bit number. You always use constants to check for the corresponding key.

To test whether shift key is pressed, enter:

If (Shift and vbCtrlMask) <> 0 then
‘ shift key is pressed
End if

To check whether user has pressed CTRL + F1, enter:

If keycode = vbkeyF1 and ( Shift And vbCtrlMask) <> 0 then
‘ user has pressed Ctrl + f 1
end if

keyDown and KeyUp events will not occur when user presses:

• The Enter key if the form has a CommandButton control with the Default property set to True.
• The Esc key if the form has a CommandButton control with the Cancel property set to True.
• The Tab key.

Note: KeyDown and KeyUp events are generally used to trap extended keys such as function key and arrow keys.

KeyPress Event
Keypress event occurs when user presses and releases a key. This event occurs only when user presses one of the ANSI keys such as alphabets, digits etc. This event doesn’t occur when user presses arrow keys, function keys etc.

KeyAscii parameter
KeyPress event has a single parameter, KeyAscii, which contains the ASCII code of the key that is pressed.

Note: You can ignore the character by setting KeyAscii parameter to 0.

Sample Application Using Keyboard Events
Now let us develop a small demo application to understand how to use keyboard events. This application contains a textbox into which user enters a code. By default, whatever user enters is converted to upper case and digits are not allowed. However, user can select to convert subsequently entered characters to any case and also choose to allow digits by checking Allow Digits checkbox.

Let us take the required steps to create the project, create user interface, and change properties.

1. Select File->New Project and select Standard Exe type
2. Place the control
3. Change the properties as follows:

Object Property Value
Form1 Caption Keyboard Events Demo
Label1 Caption Code
Text1 Text “”
Frame1 Caption Convert To
Option1 Name OptUpper
Caption &Upper
Option2 Name OptLower
Caption &Lower
Check1 Name Chkallowdigits
Caption &Allow Digits
Command1 Name Cmdexit
Caption &Exit

Writing code for KeyPress Event
As we have to convert the entered text to either of the cases and disallow digits, if Allow Digits check box is unchecked, the right event for this is KeyPress event. Here is the code for KeyPress event of Text1.

Private Sub Text1_KeyPress(KeyAscii As Integer)

Select Case KeyAscii
Case 48 To 57
' ignore if Allow Digits is unchecked
If chkallowdigits.Value = 0 Then
KeyAscii = 0 ' ignore
End If
Case 65 To 90:
'check whether lower case is selected
If optlower.Value Then
keyascii = KeyAscii + 32 ' convert to lower
End If
Case 97 To 122:
'check whether upper case is selected
If optupper.Value Then
KeyAscii = KeyAscii - 32 ' convert to upper
End If
End Select
End Sub
Listing 8.1: Code for KeyPress event.

In the above code, we check whether the key is a digit, or an upper case letter, or a lower case letter using ASCII code of the entered key.

The ASCII codes are as follows:

Letters A to Z 65 to 90
Letters a to z 97 to 122
Digits 0 to 9 48 to 57
Space 32
Backspace 9

Next we will understand mouse events.

Mouse Events
Mouse events occur when user presses and releases mouse buttons. The following are the events related to mouse.

Event When does it occur?
Click When user presses and releases a mouse button.
Dblclick When user presses and releases and again presses and releases a mouse button.
MouseDown When user presses a mouse button.
MouseUp When user releases a mouse button.
MouseMove When user moves mouse pointer.
Table 8.3: Mouse events.

Click and Dblclick event do not have any parameters. It is not possible to know which button is pressed and the position of mouse pointer at the time of click.

MouseDown, MouseUp and MouseMove events give the following information:

• The position of mouse pointer on the object at the time of user pressing a mouse button
• Which button is pressed - Left, Right or Middle.
• Which of the control keys, such as SHIFT, CTRL, and ALT, are pressed along with mouse button.
The following are the parameter of MouseDown, MouseUp and MouseMove events.


Parameter Meaning
Button Contains a value indicating which button is pressed. The values are:
1 – left, 2 – Right, 4 – Middle.
Shift Contains a value indicating which control keys are held down at the time of pressing mouse button.
1 –Shift, 2 – Ctrl, 4 – Alt.
x, y The coordinates of the location where mouse pointer was at the time of click.
Table 8.4: Parameters of MouseDown, MouseUp and MouseMove events

Note: The Button argument for MouseDown and MouseUp differs from the button argument used for MouseMove. For MouseDown and MouseUp, the button argument indicates exactly one button per event, whereas for MouseMove, it indicates the current state of all buttons.

Sample Application using Mouse Events
The following program allows user to draw lines as you drag the mouse pointer. Here is the list of options available in this program.

• You can draw as you move mouse pointer by holding down the left button.
• You can draw a line by connecting two points, Where points are marked with right mouse button.
• You can clear the form by holding down Shift key and pressing left mouse button.
Steps to create application
Here are the steps required to create the application.

1. Select File-> New Project and select Standard Exe as the project type.
2. Change the Caption of the form to Mouse Events Demo.
3. Write the code for required events as show in listing .

General/Declaration
Dim firstclick As Boolean
Dim px, py

Private Sub Form_Load()
firstclick = True
End Sub

Private Sub Form_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)

Static x1, y1

'shift click - clear the form
If Button = 1 And Shift = 1 Then
Cls
Exit Sub
End If
‘ if right button is pressed for the first time remember the
‘ coordinates of the point
If Button = 2 Then
If firstclick Then
x1 = X
y1 = Y
firstclick = False ‘ next click will not be first click
Else
‘ This is second click so draw a line connecting first click
‘ point and current point
Line (x1, y1)-(X, Y)
firstclick = True ‘ next click will be first click
End If
‘ if left button is pressed remember coordinates of the point where
‘ mouse button has gone down so that these coordinates can be used
‘ in MouseMove event
ElseIf Button = 1 Then
px = X
py = Y
End If
End Sub

Private Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)

‘ if user is moving mouse pointer by holding down left button
If Button = 1 Then
Line (px, py)-(X, Y)
‘ current point becomes previous point for the next event
px = X
py = Y
End If
End Sub
Listing 8.2: Code for Mouse events in sample application

Test Run
Run the above project and test whether it is doing what it is supposed to do.

1. Press F5 to run the project.
2. First take the mouse pointer to the point from where you want to draw a line and click on right button.
3. Then take the mouse pointer to the ending point and again click on right button to draw a line connecting first point with the second point.
FirstCilck is a variable that is used to know whether the click is first click or second click. It is set to false by default. It is set to true after form encounters the first click and again set to false at second click.

4. Now, test dragging mouse pointer to draw a line. Whenever you move the mouse pointer by holding left button a continuous line is to be drawn as you move the mouse pointer. Test it by dragging the mouse pointer to draw your name
5. To clear whatever is on the form, press Shift + left button of mouse
Drag and Drop
Drag and drop is an interface. It allows users to drag and drop a control to another control. Dropping control invokes an action. For example, in windows explorer when you drag a set of files from one directory and drop them on another directory, all the selected files will be moved (or copied, if Ctrl key is pressed) to the directory on which the files are dropped.

The control that is being dragged is called Source, and the object on which the Control is dropped is called as Target.

The following are various properties, methods and events related to drag and drop.

Type Name Meaning
Property Dragmode Specifies whether control is in manual drag mode or in automatic drag mode. Please see the following section on drag modes.
Property Dragicon Specifies the icon to be used as the mouse pointer during drag and drop operation.
Method Drag Begins, ends, or cancels a drag operation.
Event Dragdrop This event occurs when a source control is dropped on the target. This event occurs on target.
Event DragOver Occurs on target when the dragging process is in progress.
Table 8.5: Properties, Methods, and Events related to Drag-and-drop.


Manual vs. Automatic drag mode
A control may be in either manual drag mode or automatic drag mode. In manual drag mode, program has to initiate dragging process by calling drag method. Whereas in automatic drag mode, whenever user clicks on the control, drag process is initiated.

Set DragMode property of the Control to 0 for manual drag mode or 1 for automatic drag mode.

Drag method
Drag method is used to initiate, cancel or end drag operation. Drag method is used to initiate drag operation only when control is in manual drag mode (DragMode set to 0).

Drag action

The following are the valid actions.

Action Constant Meaning
0 VbCancel Cancels drag operation.
1 VbBeginDrag Initiate drag operation.
2 VbEndDrag Ends drag operation and drops the Control.

Note : Change the icon used as mousepointer during dragging process using DragIcon property before dragging is initiated.

Events related to Drag and drop
During drag-and-drop operation DragOver and DragDrop events occur. Both events occur on target Control. DragOver event occurs when dragging is in progress. DragDrop event occurs after the Control is dropped. Both events allow you to access the source control through source parameter

The following are the common parameters of DragOver and DragDrop events. DragOver has one extra parameter – State.

Parameter Meaning
Source Refers to the control that is being dragged. You can access the properties and methods of source control, for example : Source.Picture
X, y The x and y coordinates of mouse pointer within target control.
State Indicates the transition state of the control being dragged in relation to a target control. The following are valid values:
0 = Enter (source control is being dragged within the range of a target).
1 = Leave (source control is being dragged out of the range of a target).
2 = Over (source control has moved from one position in the target to another).
Table 8.6 : Parameters of Drag and Drop event procedures.

Sample Application using Drag and Drop
Let us develop a small application using drag and drop. The aim of this application is to illustrate how to use various methods, properties and events related to drag and drop.

The application contains four image controls. Three of them will contain images of the default size and one will stretch the image. When user drags any of the three images into fourth image and drops it, the dropped image will be displayed in enlarged mode. To get an idea about how it will be,

After second image is dropped on to fourth image, where it is enlarged

The following are the steps to be taken to develop this sample application.

1. Start a new project using File->New Project and select Standard EXE as the type of the project.
2. Place four image controls on the form and change the properties as follows.

Object Property Value
Image1 Picture C:\windows\web\disney.ico
Image2 Picture C:\windows\web\life.ico
Image3 Picture C:\windows\web\hwood.ico
Image4 Stretch True
BorderStyle 1-Fixed Single.
Form1 Caption Drag and Drop Example

Note: The picture that is placed in Image control must be an Icon. Because the same picture is used for DragIcon property, Which can take only an Icon.

Write the following code. The code consists of MouseDown event for first three image controls and DragDrop event for fourth image.

Private Sub Image1_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
Image1.DragIcon = Image1.Picture
Image1.Drag

End Sub

Private Sub Image2_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
Image2.DragIcon = Image2.Picture
Image2.Drag
End Sub


Private Sub Image3_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
Image3.DragIcon = Image3.Picture
Image3.Drag
End Sub

Private Sub Image4_DragDrop(Source As Control, X As Single, Y As Single)
Image4.Picture = Source.Picture
End Sub

Listing 8.3: Code for Drag and Drop sample application.

Test Run
1. Run the application to understand how it implemented drag and drop. To run press F5.
2. Click on any of the first three images and start moving the mouse pointer by holding down left button (dragging).
3. Along with mouse pointer the picture of the image control that you are dragging is moved. This is because we changed DragIcon property to the icon in Image control before dragging process starts.
4. Move the mouse pointer to Image4 and drop it there. At this stage you should see the enlarged image displayed in fourth image control

Using DragOver event
You can use DragOver event of Image4 to display a different icon when control enters into it to inform the user that the pointer has reached the place where the control can be dropped. This could be done by changing DragIcon property of the source control when State parameter is 0 (enter). Again DragIcon can be reset when control goes out of image4. The sample code is shown in listing 8.4.

Private Sub Image4_DragOver(Source As Control, X As Single, Y As Single, State As Integer)

' if entering into control then change dragicon to icon
' that indicates potential area to drop

If State = 0 Then ‘replace potential.ico with an Icon that you want ‘ to use.
Source.DragIcon = LoadPicture("potential.ico")
' if leaving then reset control's dragicon
ElseIf State = 1 Then
Source.DragIcon = Source.Picture
End If

End Sub
Listing 8.4: Code to change mouse pointer when control enters and leaves target.

Using a control array to simplify code
A control array is an array of controls. A control array is used when we have to write more or less the same code for a group of controls of the same type. The sample application that we have developed for drag and drop, is one of the candidates for control array. As you can see, the code that we wrote for first three images is same except the name of the control. So by using a control array we can write the same code just for once, instead of three times.

The concept of control array is same as the concept of menu array, Which we have seen in chapter 7. A control array is a collection of controls with the same name but with different values for Index property of the controls. Whenever an event occurs at any of the controls in the control array, only one event procedure is fired; that is of the control array and not individual controls.

The event procedures of control array contain one extra parameter, Index, that contains the index value of the control at which event has occurred.

To create a control for three images, take the following steps:

1. Change the Name property of all three images (Image1, Image2 and Image3) to Images.
2. Change the Index of first image control to 0, second image control to 1, and third image control to 2.
3. Write the code for MouseDown event of control array - Images, as shown in listing 8.5.
Private Sub Images_MouseDown(Index as Integer, Button As Integer, Shift As Integer, X As Single, Y As Single)
Images(index).DragIcon = Images(index).Picture
Image(index).Drag
End Sub
Listing 8.5: Code for MouseDown event of the control array.

Images (index) refers to the control that initiated the event. So we use Drag method of that control to start dragging.

That's all. No more changes are required. Code for DragDrop and DragOver events will remain the same. If you run the application, it will do the same job as before. But it is more efficient because we have only one event procedure for three images instead of three separate event procedures.