ASP.NET Custom Control

• Download projects - 41.85 KB

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:

1. Add as a reference in your project the CustomControls.dll and add this line in code behind:
   C#

   using CustomControls

2. 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:

   C#

   [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;  //default Width
private Unit _Height = 20;  //default Height
private Color _ForeColor = Color.Black;  //default ForeColor
private HorizontalAlign _TextHorizontalAlign = 
	HorizontalAlign.Left;  //default TextHorizontalAlign
private VerticalAlign _TextVerticalAlign = 
	VerticalAlign.Middle;  //default TextVerticalAlign
private string _ID = "";
private string _NavigateUrl = "";
private TargetType _Target = TargetType._self;  //default Target
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

• 13^th June, 2010: Initial post