Default Winforms on their own can sometimes look a bit bland, but there are some things we we can do, which do not require much coding, that can really enrich the GUI experience.

The MouseEnter and MouseLeave events can be easily overlooked when writing a forms application. A MouseEnter event is raised when the mouse pointer moves over an area, or to be more correct, a specific controls region. The MouseLeave event is the opposite. It is raised when the pointer is moved outside of the region of a control.

You can take advantage of these events in many ways. In this post, we’ll use them to highlight the control over which the pointer is, and display descriptive text associated with that control. The style is meant to be not unsimilar to some of the Microsoft installation dialogs. 🙂

NB If you wish, you can skip the steps below by downloading the source files from my GitHub repository.

Create the Forms Project

First of all, create a new forms project. Let’s call it MouseEnter. Now add the following controls, setting their properties as mentioned below.

Position labelDescription so that it occupies the left half of the form, underneath the blue panel.

Position these last three labels on the right hand side of the form, with the Options label at the top, followed by the other two directly under it.

Your form layout should now look something like this :

With the labelDescription control positioned as we want it, clear its the text property, so that it is blank.

Now we need to add code for five events :

• form loading
• mouse enters overview label region
• mouse leaves overview label region
• mouse enters mouse enter application region
• mouse leaves mouse leave application region

Writing the Event Code

We’ll register event handlers for the above actions by the process below, and then paste in the event code that is further down this page.

• Select the properties panel, and the events (lightening) button
• Double click on the form
• Go back to the form view, select the overview label, double click on MouseEnter.
• Do this also for the MouseLeave event
• Repeat the above for the mouseenterapplication label.

Once you have completed, this your form should show a set of entries for the events we have selected. These will be empty. Select the text, and clear it.

Select the text below, copy it into the clipboard, and then paste it into the code window.

$labelOverview_MouseEnter={
	$labelOverview.ForeColor = 'Blue'
	$labelDescription.Text = $overviewText
}

$labelOverview_MouseLeave={
	$labelOverview.ForeColor = 'Black'
	$labelDescription.Text = $defaultDescriptionText
}

$labelMouseEnterApplication_MouseEnter={
	$labelMouseEnterApplication.ForeColor = 'Blue'
	$labelDescription.Text = $applicationText
}

$labelMouseEnterApplication_MouseLeave={
	$labelMouseEnterApplication.ForeColor = 'Black'
	$labelDescription.Text = $defaultDescriptionText
}

$frmMouseEnterDemo_Load={
	$script:defaultDescriptionText = 'Welcome to the MouseEnter example! This example demonstrates how we can use this.'
	$script:overviewText = 'When the mouse pointer enters an area on which a control resides, a MouseEnter is raised. After the mouse departs from that specific controls area, a MouseLeave event occurs'
	$script:applicationText = 'This application provides an example of how we can use the MouseEnter and MouseLeave events to enrich the GUI experience on a form'
	$labelDescription.Text = $script:defaultDescriptionText
}

This sets the text that  to be shown when a control’s region is entered or left by the mouse pointer, and also other actions to be performed in these circumstances. When the pointer enters a control’s region, we set its text is set blue, and the label on the left hand of the screen displays some descriptive text. On startup, or when a pointer leaves a controls region, this description is reset back to the default welcome text.

Rearrange your form as you wish.

Conclusion

Now let’s run our project to see the results.

Overview Mouse Enter

Overview MouseLeave

When the pointer is positioned over one of the options, the font changes to blue, and the descriptive text on the left hand side also changes. When the pointer moves outside the controls region, the default text is displayed, and the font set back to black.

And a video which highlights what’s happening a bit better. Apologies for the poor quality, I’m still wrestling with uploads to YouTube at the moment :

As always, comments and feedback welcome. Thanks for reading.

cheers,

Tim