Custom Control - Roll Over Label
Hello and welcome to my tutorial for creating custom controls. If this tutorial gets enough positive feedback I will create more controls of this nature with tutorials to accompany them. Please bear in mind that there is no accompanying code or project file. If you wish to use this control you will have to write it. I assume readers of this are familiar with creating projects and basic class usage.
Introduction
One of the things I have noticed is the lack of information on custom controls out there. Custom controls are extremely important in terms of code reuse and help to keep form code clean of so called "custom designer" code. For instance I tend to use roll over labels a lot in my code. The are a great piece of eye candy that can be used for descriptions and the like. When a user's mouse enters the label boundary the mouse changes to a different colour that the base fore colour. When the mouse leaves the label boundary the colour returns to the original base colour.
Setting Up The Project
First we need to set up the project. Select control library (user control) as the project type. We select this type rather that a class library because it sets up the references we need for the project. Name the project CustomControls. The solution explorer will contain a user control (UserControl1.vb) go ahead and delete that we wont be using it. In the solution explorer, right click the project name (CustomControls) and add a new class. Rename this class RollOverLabel.vb. If everything is correct you should have the following code when you click on the class.
VB Code:
Public Class RollOverLabel
End Class
Inheriting Functionality
As the dot net framework already provides a perfectly good label it makes sense not to rewrite the wheel. One of the pillars of object orientated programming is the ability to inherit functionality from existing classes. To inherit from the label class enter the following code directly under the RollOverLabel Class name.
VB Code:
Inherits System.Windows.Forms.Label
Extending Functionality
Obviously having a new label class that has the exact same functionality as the original is not going to be sufficient enough. The first thing we are going to do is create a variable to hold the roll over color as the original label has no such storage. Update your class so it looks like this
VB Code:
Public Class RollOverLabel
Inherits System.Windows.Forms.Label
Private HotColor As Color
End Class
The variable we have created is of the type colour because we are dealing with colours after all. The easiest way of changing a labels colour to the roll over colour is to assign HotColor to the label's ForeColor property. The problem with doing this is we discard the original ForeColor value which we need to revert back to when the user's mouse leaves the labels boundary. To this end we need another variable to store the base colour. Update your code like so.
VB Code:
Public Class RollOverLabel
Inherits System.Windows.Forms.Label
Private HotColor As Color
Private BaseColor As Color
End Class
The next logical step is to allow the user of this control supply the roll over color. This is done via a standard property called RollOverColor(). Place the following code after the variable declarations.
VB Code:
Public Property RollOverColor() As Color
Get
Return HotColor
End Get
Set(ByVal Value As Color)
HotColor = Value
End Set
End Property
Overriding Functionality
The idea of label is to change colours when the mouse enters/leaves the label boundary. Most standard controls already have methods to handle mouse enter/leave functionality. OO programming allows us to extend functionality of existing methods by using the Overrides keyword. This means that we don't have to rewrite functionality that is already in place. If you type Overrides OnMouseEnter() and press the return key VB will insert to following code.
VB Code:
Protected Overrides Sub OnMouseEnter(ByVal e As System.EventArgs)
MyBase.OnMouseEnter(e)
End Sub
VB places the correct method signature in for you as well as this line MyBase.OnMouseEnter(e). This line insures that the method carries out its standard functionality first. You should always place your code AFTER this line. Where going to add two statements to this code. Which are.
VB Code:
BaseColor = Me.ForeColor
Me.ForeColor = HotColor
The reason for the first line is to insure that the most current ForeColor value is stored. This means that even if the user changes the ForeColor at design or runtime we always have the most current value. The second line changes the actual ForeColor value to the hot colour (remember we are in the mouse enter method).
We need one more Overridden method. That is the OnMouseLeave() method. Based on the previous method it is simple to work out what this method will look like.
VB Code:
Protected Overrides Sub OnMouseLeave(ByVal e As System.EventArgs)
MyBase.OnMouseLeave(e)
Me.ForeColor = BaseColor
End Sub
As you can see we simply change the ForeColor value back to the base colour when the mouse leaves the label boundary.
Adding Polish
While we could leave it at that, there are a few more things we can add to make this label more polished. I'm talking about attributes. Attributes allow you to change certain design time elements so that a custom control acts like a standard control in the toolbox and properties windows. The first thing we need to do is add the following line above the class name
VB Code:
Imports System.ComponentModel
This will allow use to use attributes with our control. The first change we will make is the toolbox icon. At the moment it is a gear. Since this is a label we can "steal" the label icon an use it instead. To do this we enter the following line directly above the class name with not space between like so.
VB Code:
<ToolboxBitmap(GetType(Label))> _
Public Class RollOverLabel
The reason for no space is this line should actually be on the same line as the class name but that looks ugly.
VB Code:
<ToolboxBitmap(GetType(Label))> Public Class RollOverLabel
So instead we put it above and use the line break character to break up the line. There are two final attributes we can use that go directly above the RollOverColor() property. These are.
VB Code:
<Description("Sets the color the label will change to when moused over")> _
<Category("Appearance")> _
Public Property RollOverColor() As Color
The first attribute changes the discription in the properties window and the second changes the category in which it is placed. If you had any difficuty following along here is the code in full.
VB Code:
Imports System.ComponentModel
<ToolboxBitmap(GetType(Label))> _
Public Class RollOverLabel
Inherits System.Windows.Forms.Label
Private BaseColor As Color
Private HotColor As Color
<Description("Sets the color the label will change to when moused over")> _
<Category("Appearance")> _
Public Property RollOverColor() As Color
Get
Return HotColor
End Get
Set(ByVal Value As Color)
HotColor = Value
End Set
End Property
Protected Overrides Sub OnMouseEnter(ByVal e As System.EventArgs)
MyBase.OnMouseEnter(e)
BaseColor = Me.ForeColor
Me.ForeColor = HotColor
End Sub
Protected Overrides Sub OnMouseLeave(ByVal e As System.EventArgs)
MyBase.OnMouseLeave(e)
Me.ForeColor = BaseColor
End Sub
End Class
Conclusion
I hope you have enjoyed this project as much as I have enjoyed writing it. If you have any queries feel free to comment. Thanks
I have tested this code to verify functionality. The Icon will not change until you import as a .dll into another project. After you have built the full source code a .dll file will be in the applications bin/release folder for you to distribute. If you intend to use this ode on a commercial application please include the following.
'-------------------------------------------------------------'
' Created by Dean McDonnell 18/08/2008 '
'-------------------------------------------------------------'
