Click here to Skip to main content
15,867,704 members
Articles / Web Development / ASP.NET

ImageButton - Extended to be Greyed Out When Disabled

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
8 May 2009CPOL2 min read 38.6K   684   22   1
Provides an implementation of an ImageButton that will grey out when disabled

Introduction

Users in general expect that input controls that are disabled appear so, i.e. are greyed out.

Unfortunately the ImageButton that ships with .NET does not expose this behavior, so I decided to get a hold of an ImageButton implementation that did.

However browsing various solutions on the net, I only came up with implementations that in essence extended the ImageButton to have an extra DisabledImageUrl property.

While these work fine, they do require that every image have a disabled version, which many image libraries do not.
So what I wanted was a control that simply used the existing image and greyed it out when disabled.

I began looking into GDI+ and after browsing the web some more, I came across this article that provided me with the proper matrix to use for greying out an image.

From there, all that remained was creating the extended ImageButton.

Using the Code

The main functionality of the ImageButtonExtended is the below method.

It assigns the image URL to use based on the enabled state of the button.

If the disabled version of the image does not yet exist, it creates it by applying the aforementioned matrix to the original image and saving that with a postfix.

C#
private void AssignImageUrl()
  {
   //If enabled, we simply assign the enabled image URL
   if (base.Enabled)
   {
    this.ImageUrl = FileUtil.RemovePostfix(this.ImageUrl, DISABLED_POSTFIX);
    return;
   }

   //Get the URL of the disabled version of the image
   string disabledImageUrl = 
	FileUtil.InjectPostfix(this.ImageUrl, DISABLED_POSTFIX, true);

   //If the current image URL is already set to the proper value 
   //(which it will be if the button was initialised as disabled)
   //there is no need to go through the rest
   if (this.ImageUrl != disabledImageUrl)
   {
    //See if the disabled version of the image exists and if not, create it
    string disabledImageFile = this.Context.Server.MapPath(disabledImageUrl);

    if (!File.Exists(disabledImageFile))
    {
     string activeImageFile = this.Context.Server.MapPath(this.ImageUrl);
     var img = ImageUtil.MakeMonochrome(activeImageFile);
     img.Save(disabledImageFile);
    }
    this.ImageUrl = disabledImageUrl;
   }
  }        

The implementation makes use of two utility classes, namely:

  • ImageUtil which encapsulates the GDI+ code to create the monochrome version of an image
  • FileUtil which contains a few methods for filename modification

Since many developers have similar utilities of their own, I only included the methods needed for the implementation of the image button.

Using the ImageButtonExtended is no different from using the normal ImageButton, and there are no extra properties to set so all existing image buttons can simply be replaced by the extended version.

Points of Interest

The ImageButtonExtended does have a few limitations:

  1. It will not work if the ImageUrl is set to an embedded resource.
  2. It will not work if the ImageUrl is set to an external URL, since it will try to save the disabled image version to the directory of the original image.

Overcoming these limitations is left as an exercise to the reader. :)

History

  • Version 1.0

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
Denmark Denmark
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralGray shaded Image Pin
MFCPlus2-Feb-11 2:13
MFCPlus2-Feb-11 2:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.