ASP.NET Custom Server Controls: Combining ImageHoverButton and RoundCorneredButton
(Page 1 of 8 )
Two of my previous articles introduced you to creating two new controls, “ImageHoverButton” and “RoundCorneredButton.” This article extends those two by combining both of them into a new control with extra flavors!
A downloadable file for this article is availabe
here.
The sample downloadable solution (zip) is entirely developed using Visual Studio.NET 2003 Enterprise Architect on Windows Server 2003 Standard Edition. But, I am confident that it would work with other versions of Windows (which support .NET 1.1) as well.
Introduction
Let us first discuss what I covered in the articles describing “ImageHoverButton” and “RoundCorneredButton” controls. Within the ASP.NET framework, we will not be able to find any “hover” controls. Instead, we need to emit our own JavaScript for each of the controls, if we really need to have a “hover” control. I thought to design a control, which would support “hover” for a customized button and thus resulted in the “ImageHoverButton.”
The “ImageHoverButton” is not simply a button; it even accepts background as an image and changes that image at the “hover” stage (automatically with the help of injected JavaScript within the control). The image within that control can contain embedded text or we can set it up using the properties window at design time (which gets displayed on top of the image). Now the control would be something like an image of “any” shape (depending on the image we assign to it).
Even though I found the “ImageHoverButton” very useful for my web development, I realized that I need to create separate images for every button, if the size of text would be different, which is problematic. If all of the buttons were of the same size, then the “ImageHoverButton” would be the easiest implementation (which may not be possible in practical scenarios). So, I decided to design and create a “dynamically expandable RoundCorneredButton.”
This is also an interesting button of mine, in which I could place any amount of text (as the caption of that button). The result is that the button would expand automatically based on the content or text; you can even resize at design time. I took this logic from another control within the same series called “RoundedCornerBox.” That control simply displays an automatically expandable box with all graphic corners and sides. I expanded the same to cover the “RoundCorneredButton,” so that it would support “Postback” when the user clicks on it.
Everything worked as well as I had imagined it would. The only issue is that I didn’t implement hovering styles into the “RoundCorneredButton” control. Not only that, but, apart from the dynamically expandable background, I would also like to place an icon type of image just before the text (which looks more polished). And thus I redesigned and recreated by combining all the flavors to give me what I needed.
The new control (what I am about to explain now) now supports all sides and corners with graphic images, a background image at the center, a hovering facility (with a new set of graphic images), the text you could include, an icon which could be placed just before the text, and more. In this scenario, I even exposed several properties, to fix border (rounded) images for our control. Before talking too much about the control, let us go through the implementation first. I hope you will enjoy the new control.
Next: Exposing properties for every side (including corners) of the button >>
More ASP.NET Articles
More By Jagadish Chaterjee
