Visual C# Tutorials

Windows Forms Tutorials and Lessons

Mouse Events

You can use several special events to react to certain mouse interactions to the control. You have seen the Click event which occurs when the a control is clicked by the mouse (although pressing Enter while the control is selected also generates the Click event). As you will see, there are more advanced events that are specifically used for handling mouse interactions. Some of these events have a type MouseEventHandler delegate which has a parameter MouseEventArgs that contains details about the mouse operation. The following the Mouse events that you can use.

Event Description
MouseCaptureChanged Occurs when the control loses or gains mouse capture.
MouseClick Occurs when the control is clicked by the mouse.
MouseDoubleClick Occurs when the control is double clicked by the mouse.
MouseDown Occurs when the mouse pointer is over the control and a mouse button is pressed.
MouseEnter Occurs when the mouse pointer enters the control.
MouseHover Occurs when the mouse pointer rests on the control.
MouseLeave Occurs when the mouse pointer leaves the control.
MouseMove Occurs when the mouse pointer is moved over the control.
MouseUp Occurs when the mouse pointer is over the control and a mouse button is released.
MouseWheel Occurs when the mouse wheel moves while the control has focus.

Figure 1 - Mouse Events

Let's now take a look at the capabilities of some of these events. Create a new Windows Forms Application and add a button in the middle of the form.

Mouse Events 01

Let's add an event handler for the button's MouseEnter and MouseLeave events. What we would like to do is whenever the mouse enters the client area of the button, the button will be grow bigger, and when the mouse leaves, it will return to its original size.

Go to the Properties Window and click the Events button represented by a thunder icon. Then find the MouseEnter event and double click it to create an event handler for that event.

private void button1_MouseEnter(object sender, EventArgs e)
{
    button1.Height += 30;
    button1.Width += 30;
    button1.Top -= 15;
    button1.Left -= 15;
}

When the mouse enters the control, its height and width is increased by 30 pixels. When the button is resized, it stays in the same position so the button will not appear in the center. We moved the button 15 pixels to the top and left (half of 30) so when the button is resized, it will still be centered. We now need to reset the size and location of the button when the mouse leaves the control. Go again to the properties window and find the MouseLeave event and double click it.

private void button1_MouseLeave(object sender, EventArgs e)
{
    button1.Height -= 30;
    button1.Width -= 30;
    button1.Top += 15;
    button1.Left += 15;
}

The event handler simply reverts the operation done by the MouseEnter event handler.

The MouseClick event is an enchanced version of the Click event. It allows you to determine some details about the click such as the location in the control where the mouse is clicked. Let's add an event handler for the button's MouseClick event. Again, go to the Properties Window and find the MouseClick in the events section and double click it. Use the following code to show the location of the click with respect to the top left corner of the control.

private void button1_MouseClick(object sender, MouseEventArgs e)
{
    MessageBox.Show(String.Format("Clicked at point ({0}, {1})", e.X, e.Y));
}

The event handler uses the MouseEventArgs object to access the X and Y properties which represents the X and Y coordinates of the point where the mouse was clicked. Now, when you click the button, a message box will appear showing the location of the click.

The MouseDown event is triggered when a button is pressed down while the mouse is over the control. The MouseUp event is the reversed and occurs when the pressed button is released. Let' demonstrate this event. Add an event handler to the MouseDown event. Just so the MouseClick event handler will not interfere with this event, comment out or delete its content. Now use the following code for the MouseDown event handler.

private void button1_MouseDown(object sender, MouseEventArgs e)
{
    if (e.Button == MouseButtons.Left)
        MessageBox.Show("Left Click");
    else if (e.Button == MouseButtons.Right)
        MessageBox.Show("Right Click");
    else
        MessageBox.Show("Middle Click");
}

The event handler uses the MouseEventArgs object to access the Button property which contains the details of which mouse button was clicked. The MouseButton enumeration contains values Left, Right, and Middle to refer to the three mouse buttons.

You can handle the MouseWheel event to detect if the mouse wheel has been moved. The mouse wheel event is not available in the Properties Window so we need to access it in code. In the form's constructor, right below the InitializeComponent method, type the following code. The moment you type +=, press the tab key twice to generate an event handler for the MouseWheel event.

public Form1()
{
    InitializeComponent();
    button1.MouseWheel += new MouseEventHandler(button1_MouseWheel);
}

Use the following event handler for the MouseWheel event.

void button1_MouseWheel(object sender, MouseEventArgs e)
{
    button1.Height += e.Delta / 60;
    button1.Width += e.Delta / 60;
    button1.Top -= e.Delta / 120;
    button1.Left -= e.Delta / 120;
}

We used the Delta property of the MouseEventArgs class. The Delta represents the number of notches that were moved forward or backward. Each notch is equal to the WHEEL_DATA constant which is 120. We divide Delta by 60 so each notch of the mouse wheel moved will only increase the width and height by 2 pixels instead of 120. Moving the wheel forward yields a positive Delta value and moving it backwards yields a negative value. The last two lines are used to adjust the position of the button so it will always be centered. Instead of dividing by 60, we divide the Delta by 120 so every moved notch, the top and left of the button will move by 1 pixel. Run the program and while the button has the focus, move the wheel forward to increase the size of the button, and backwards to decrease its size.


Previous Lesson
Dynamically Adding Controls

Index
Windows Forms

Next Lesson
Keyboard Events