Sunday, September 30, 2007

Disabled-look ImageButton in ASP.NET

Coding Environment.
ASP.NET 2.0, C#, Visual Studio 2005

Stumbling Block.
Disabled look for ImageButton in ASP.NET, just like there is a different look for ASP.NET's Button control's Enabled = false property.

Solution / Work around.
Fire-up VS 2005 and create a new 'Web Control Library' [File->New->Project->Windows]. Name it. ['DualImageButton']
b. Delete the class that's auto-created [e.g. WebCustomControl1.cs]
c. Add new class [DualImageButton.cs]
d. This would inherit from 'ImageButton'
public class DualImageButton : ImageButton

e. Primarily, we would add a new (string) Property (to specify 'Disabled' image [some grayed out image of the Enabled image] url) and override the ImageUrl property that'd return the (original) ImageUrl if the DualImageButton is enabled (Enabled = true) and ImageUrlDisabled if the DualImageButton is disabled (Enabled = false)
private string _disableImageUrl;

public string ImageUrlDisabled
get { return _disableImageUrl; }
set { _disableImageUrl = value; }

public override string ImageUrl
return base.Enabled ? base.ImageUrl : this.ImageUrlDisabled;
base.ImageUrl = value;

f. Build and include the dll (DualImageButton) in your ASP.NET projects. Set ImageUrl and ImageUrlDisabled properties to separate images to get the desired effect.

Additional Tip.
One could also override other properties like CSSClass to get more control over the disabled look and other aspects of any ASP.NET server control, in general, without building a new control from scratch.


Post to