Introduction
This article will show you how to create a custom controls which is a button with mouseover and mouseout image effect. The code was written in Visual Studio 2008. The final result should look like this in browsers:
Background
In Visual Studio, there are a lot of useful controls but if you want to bring some life into your web applications you might starting to think about creating your own controls or the basic controls just not good enough for you.
Using the Code
In the downloadable zip file you can find the source code for the custom control and a sample application which using the control. The custom control can be used in two different ways:
- Add as a reference in your project the CustomControls.dll and add this line in code behind:
using CustomControls
- Drag and drop the CustomControls.dll into VS's toolbar and use it like the basic controls.
First of all there are some basic settings in AssemblyInfo.cs file that can be customized the way you like. The assembly file is generated automatically but I have added a line which looks like this:
[assembly: System.Web.UI.TagPrefix("CustomControls", "CC")]
This will tell the designer how it will look like in design mode (the prefix tag).
ExtendedButton.cs
There is one more line in ExtendedButton.cs which can also be customized. It is right after the namespace and before the class declaration. This will define the bitmap that will appear in toolbox which is a 18x16 bmp:
[ToolboxBitmap(@"D:\Dokumentumok\Visual Studio 2008\
Projects\CustomControls\CustomControls\ExtendedButton.bmp")]
When you create a custom control, the most important thing is to decide which basic control is similar to that control you wish to create. Basically when you start a new "ASP.NET Server Control", the class will be derived from WebControl
class. That is very helpful because almost everything can be done from that class. In this sample, we create a Button
that will have mouseover
and mouseout
image "effects" and will also have some text on top of the image. So the best choice is System.Web.UI.WebControls.LinkButton
control! This smart thing can have image backgrounds with a small trick and it's working like a button so it has a PostbackUrl
too. Local variables region:
#region Local variables
private Unit _Width = 100;
private Unit _Height = 20;
private Color _ForeColor = Color.Black;
private HorizontalAlign _TextHorizontalAlign =
HorizontalAlign.Left;
private VerticalAlign _TextVerticalAlign =
VerticalAlign.Middle;
private string _ID = "";
private string _NavigateUrl = "";
private TargetType _Target = TargetType._self;
private string _MouseOverImage;
private string _MouseOutImage;
private LinkButton _linkButton;
#endregion
_linkButton
variable will be responsible for the newly created custom control. The rest of the variables will store and encapsulate the control's properties. To make these properties available for everyone, we create public
properties region:
[Category("Button Images")]
[Browsable(true)]
[Description("Set path to mouseover image file.")]
[Editor("System.Web.UI.Design.UrlEditor, System.Design",
typeof(System.Drawing.Design.UITypeEditor))]
public string MouseOverImage
{
get { return _MouseOverImage; }
set { _MouseOverImage = value; }
}
[Category("Button Images")]
[Browsable(true)]
[Description("Set path to mouseout image file.")]
[Editor("System.Web.UI.Design.UrlEditor, System.Design",
typeof(System.Drawing.Design.UITypeEditor))]
public string MouseOutImage
{
get { return _MouseOutImage; }
set { _MouseOutImage = value; }
}
The Browsable
and Editor
settings just above the property declaration will tell the developer environment that these two properties can be browsed and picked from local machine:
The main code that does the job in Method
region is:
protected override void OnInit(EventArgs e)
{
string style = "background-image:url('" + MouseOutImage + "'); " +
"text-align:" + TextHorizontalAlign + "; ";
if (TextVerticalAlign == VerticalAlign.Middle)
style += ("line-height:" + Height.ToString() + "; ");
string script = "";
if (NavigateUrl != string.Empty)
script = "window.open('" + NavigateUrl + "', '" + Target.ToString() + "')";
_linkButton = new LinkButton();
_linkButton.ID = ID;
_linkButton.Attributes.Add("style", style);
_linkButton.Attributes.Add("onmouseover", "document.getElementById
('" + _linkButton.ID + "').style.backgroundImage =
'url(" + MouseOverImage + ")';");
_linkButton.Attributes.Add("onmouseout", "document.getElementById
('" + _linkButton.ID + "').style.backgroundImage =
'url(" + MouseOutImage + ")';");
_linkButton.Attributes.Add("onclick", script);
if (Target == TargetType._self)
_linkButton.PostBackUrl = NavigateUrl;
_linkButton.Width = Width;
_linkButton.Height = Height;
_linkButton.Font.Underline = false;
_linkButton.ForeColor = ForeColor;
_linkButton.Text = Text;
base.OnInit(e);
}
protected override void CreateChildControls()
{
this.Controls.Add(_linkButton);
ClearChildViewState();
base.CreateChildControls();
}
OnInit()
and CreateChildControls()
methods need to be overridden to create the custom control. In OnInit()
we add some JavaScript code to fulfill the mouseout
and mouseover
job. This is the hardest part of understanding the code except when you are familiar with JavaScript. The other lines are just some extra features that the ExtendedButton
is capable.
Points of Interest
To test the control, use TestApp
from the sample.
History
- 13th June, 2010: Initial post