Graphical ASP.NET Controls
Introduction
It is possible to create very nice web pages and you can even change the look of some form controls using CSS (for example,
it is possible to change the look of textbox and button), but there is no way to change the look of checkbox and radio button.
This article describes two custom controls with the same functionality as standard ASP.NET CheckBox and
RadioButton and with properties that allow you to change design of controls using images. Another way of how to
use controls like this is when you want to place icon with checkbox functionality on your web page; for example, I wanted to
mark some data as hidden, so I used checkbox control with lock and stricken lock icons).
These two controls are very simple to use, because all functionality is same as functionality of standard controls, so if you want to replace standard controls with these graphical controls, you can do it with Search/Replace tool. These controls use JavaScript, but it was tested with latest version of IE, Opera and Mozilla (FireFox), so it should display correctly to majority of Internet users.
Another usefull feature of check box control is, that it support three state. This can be very usefull, because the standard
HTML chcekbox doesn't support third state, so there is no way how to create three state chcekbox in Asp.Net.
If you want to allow third state set ThreeState property to true. You will also need one or two (if you want
to have different image for active state) images. To get state of three state chcek box you can use CheckState
property, which returns Chceked, Unchecked or Indeterminate.
Background
Graphical checkbox control generates img tag, that is followed by span and hidden input control.
State of control is saved in hidden input control. When user clicks on image (or on text associated to checkbox), control changes its
state (value of hidden control) and changes src attribute of image element. (You can also set image that is displayed
when user moves mouse over checkbox - this is done using onmouseover and onmouseout events.)
Graphical radio button is very similar to checkbox, but there is one complication: User should be able to check only
one button in every group. Only solution to this problem is to use a bit more JavaScript. One JS function called
radio{GroupName}Sel is generated for each group of controls (this is done using IsStartupScriptRegistered
and RegisterStartupScript methods, so it is very simple to check if any control of same group generated this
function before). Each control in the group calls this function when it is clicked, so this function can uncheck previously
checked radio button.
Controls needs to implement interface IPostBackDataHandler to be able to read data after postback. This interface contains
two methods. LoadPostData is called by ASP.NET after postback, and it processes postback data (read data from POST
collection and compare new value with one stored in ViewState) and optionally calls second method
(RaisePostDataChangedEvent) that raises CheckedChanged event.
Using this control
Designer
Both controls support design-time, so you can simply add them to your page like any other ASP.NET controls. First, you'll need to add controls to toolbox. To do this, right click on toolbox and select "Add/Remove Items". In "Customize Toolbox" dialog, click on Browse button and select EeekSoft.Web.Controls.dll. After clicking OK, you should be able to see two new controls in your toolbox.
You can modify properties in Properties window. Most important are properties that define location of images used by control.
After you enter image URL (CheckedImg or UncheckedImg), control will automatically update its look.
Code
Following code demonstrates how to access control properties from code:
<!-- Demo1.aspx -->
<%@@ Register TagPrefix="cc1" Namespace="EeekSoft.Web.Controls"
Assembly="EeekSoft.Web.Controls" %>
<cc1:graphicalcheckbox id="check1" runat="server"
CheckedOverImg="checked-over.gif" UncheckedOverImg="unchecked-over.gif"
UncheckedImg="unchecked.gif" CheckedImg="checked.gif" Checked="False"
Text="First checkbox"></cc1:graphicalcheckbox>
<cc1:graphicalcheckbox id="check1" runat="server"
CheckedOverImg="checked-over.gif" UncheckedOverImg="unchecked-over.gif"
UncheckedImg="unchecked.gif" CheckedImg="checked.gif" Checked="False"
Text="First checkbox"></cc1:graphicalcheckbox>
<asp:label id="lblInfo" runat="server" ></asp:label>
<asp:button id="btnPostback" runat="server" Text="Do postback!"></asp:button>// Display what checkboxes are checked
private void btnPostback_Click(object sender, System.EventArgs e)
{
if (check1.Checked&&check2.Checked)
lblInfo.Text="Both checkboxes are checked!";
else if (check1.Checked)
lblInfo.Text="First checkbox is checked!";
else if (check2.Checked)
lblInfo.Text="Second checkbox is checked!";
else
lblInfo.Text="No checkbox is checked!";
}ThreeState chcekbox
As I described above, checkbox supports third state, so you can use it when you want to allow user to choose from three (third state usually indicates that value can't be distinctly determinated). Following code shows, how to create three state check box and how to get its state from code:
<!-- Demo2.aspx -->
<%@@ Register TagPrefix="cc1" Namespace="EeekSoft.Web.Controls"
Assembly="EeekSoft.Web.Controls" %>
<cc1:graphicalcheckbox id="threeCheck" runat="server"
ThreeState="True" CheckState="Indeterminate"
IndeterminateOverImg="indet-over.gif" IndeterminateImg="indet.gif"
CheckedOverImg="checked-over.gif" UncheckedOverImg="unchecked-over.gif"
UncheckedImg="unchecked.gif" CheckedImg="checked.gif"
Text="Three state checkbox"></cc1:graphicalcheckbox>
<asp:label id="lblInfo" runat="server" ></asp:label>
<asp:button id="btnPostback" runat="server" Text="Do postback!"></asp:button>// Display value of three state checkbox
private void btnPostback_Click(object sender, System.EventArgs e)
{
switch(threeCheck.CheckState)
{
case CheckState.Checked:
lblInfo.Text="Checkbox is checked!"; break;
case CheckState.Unchecked:
lblInfo.Text="Checkbox is unchecked!"; break;
case CheckState.Indeterminated:
lblInfo.Text="Value is set to indeterminated!"; break;
}
}Setting graphical look globally
Setting location of images for each state of control is a bit exhausting if you have more than one
control on page, so I created an object called GraphicalControlsSettings that allows you
to set location of images only once in the whole application. This object stores all location of images
(both for checkbox and radio button) and is stored in application state (Application property).
After you save settings for controls using this object, all controls with property LoadGlobalSettings
set to true will automatically load these settings, so you don't have to set location of particular images.
Following example shows how to use this object (to learn more, see design.aspx.cs file in demo application):
<!-- Demo3.aspx -->
<%@@ Register TagPrefix="cc1" Namespace="EeekSoft.Web.Controls"
Assembly="EeekSoft.Web.Controls" %>
<cc1:graphicalcheckbox LoadGlobalSettings="true" id="check1"
runat="server" Text="Checkbox 1"></cc1:graphicalcheckbox>
<cc1:graphicalcheckbox LoadGlobalSettings="true" id="check2"
runat="server" Text="Checkbox 2"></cc1:graphicalcheckbox>// Demo3.aspx.cs using EeekSoft.Web.Controls; // Save checkbox settings in Page_Load or in Application_Start event handler GraphicalControlsSettings grs=new GraphicalControlsSettings(); string skin="green/"; // Set images for chcekbox buttons grs.CheckboxCheckedImg=skin+"check-checked.gif"; grs.CheckboxUncheckedImg=skin+"check.gif"; grs.CheckboxCheckedOverImg=skin+"check-checked-over.gif"; grs.CheckboxUncheckedOverImg=skin+"check-over.gif"; // Set images for radio buttons grs.RadioCheckedImg=skin+"radio-checked.gif"; grs.RadioUncheckedImg=skin+"radio.gif"; grs.RadioCheckedOverImg=skin+"radio-checked-over.gif"; grs.RadioUncheckedOverImg=skin+"radio-over.gif"; // Save settings to Application grs.Save();
History
- 10/12/2004 - Graphical check box now supports ThreeState checkbox
Properties
ThreeState,CheckStateand images for third state added. (Thanks to bubák for this suggestion) - 10/2/2004 - First version of article (Published at CodeProject.Com).