ImageButton's that Automatically Generate their Button Images

Using graphical buttons on a website adds a lot to the design, and to the professionalism of the site. However, these buttons are labor intensive. You have to render each button in a graphics editor, re-render them every time the text or dimensions change, replace them all anytime the design changes, and find the files anytime you need to reuse a button in a new location.

Just to insert a button, you have to set the URL, width, height, alt text, border, and often other parameters.

CustomImageButton eliminates all of this. Instead of creating each button by hand, simply feed CustomImageButton your slices and it will make buttons as needed from the parameters you specify. You can simplify things even further by extending CustomImageButton (for instance, create a control called BlueImageButton) with classes that set default parameters for a specific style.

CustomImageButton generates a button the first time it is viewed, then stores the button in a cache on disk, so that all subsequent requests for the same button don't require any work - the cached image is simply returned for every view but the first.

So: you don't have to generate buttons, you can change them globally by changing the slices you feed to CustomImageButton and/or by changing the parameters in a derived CustomImageButton class, and you can alter any button by just changing the parameters. Additionally, CustomImageButton will generate the button tags for you, so you don't have to look up the height, width, and URL of any button you want to include.

Demo 1: BlueImageButton

My BlueImageButton class extends CustomImageButton, setting up all parameters but the Text and Width of the button. Every time I need a blue button, I just include a tag like this:


Try making one yourself:

Text:
Width:

To use the control, upload your slices to a folder, and give the URL as the ImagesFolder parameter to the control. So, my slices are:

	/images/custombuttons/blueshadow/left.gif
	/images/custombuttons/blueshadow/middle.gif
	/images/custombuttons/blueshadow/right.gif

and so my ImagesFolder parameter is "/images/custombuttons/blueshadow/". The control will use "/images/custombuttons/blueshadow/cache/" as the disk cache.

Then, just set the following parameters, as desired:

Parameter	Default	Description
ImagesFolder		The location of your slices. The cache will be a subfolder of this directory.
Text		The text of the button.
TextColor	"000000"	The color of the button text.
BackgroundColor	"FFFFFF"	The background color (shown behind any transparency in your slices, otherwise hidden).
TextFont	"Arial"	The font for the button text. This font must exist on the server.
TextAlignment	Left	The button text alignment. Valid values are members of the Alignment enum (Left, Right, and Center).
FontStyle	Normal	The text style. Valid values are members of the Style enum (Normal, Bold, Italic, and Underline).
FontSize	12	The point-size of the font used to print the button text.
Width	-1	The width of your button, in pixels. This value must be set. Note that height is determined automatically from the height of your slices.

Note that, because the CustomImageButton control extends ImageButton, all ImageButton properties are also accessible and valid.

Download the following .cs file, and add it to your App_Code directory. Remember to register the control where you want to use it.

CustomImageButton.zip (3K)

This work is licensed under a Creative Commons Attribution 3.0 United States License.
Please link to this article in your source code comments if you use this content.