With the ToggleButtonExtender from the Atlas Control Toolkit, you can easily create nice looking checkboxes. The
ToggleButtonExtender styles ASP.NET Checkbox controls with images. In this post, I'll show you how easy it is to
create the following styled checkboxes.
You can see it in action here:
You can try it here:
http://atlas.vertigosoftware.com/AtlasToggleButton/ToggleButton.aspx
ASPX Code
The aspx code contains four ASP.NET Checkboxes and the ToggleButtonExtender. The ToggleButtonExtender contains three
properties to configure the image replacement for the three corresponding checkboxes.
<atlas:ScriptManager ID="ScriptManager1" runat="server" />
<div class="togglebutton">
<asp:CheckBox ID="CheckBox1" runat="server" Text="Default ASP.NET Checkbox" /><br /><br />
<asp:CheckBox ID="CheckBox2" runat="server" Text="Improved Checkbox with the ToggleButtonExtender" /><br />
<asp:CheckBox ID="CheckBox3" runat="server" Checked="true" Text="Can extend multiple checkboxes" /><br />
<asp:CheckBox ID="CheckBox4" runat="server" Text="Any icon can be used" />
</div>
<atlastoolkit:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server">
<atlastoolkit:ToggleButtonProperties TargetControlID="CheckBox2" CheckedImageUrl="images/checked.png"
UncheckedImageUrl="images/unchecked.png" ImageHeight="16" ImageWidth="16" />
<atlastoolkit:ToggleButtonProperties TargetControlID="CheckBox3" CheckedImageUrl="images/checked.png"
UncheckedImageUrl="images/unchecked.png" ImageHeight="16" ImageWidth="16" />
<atlastoolkit:ToggleButtonProperties TargetControlID="CheckBox4" CheckedImageUrl="images/ToggleButton_Checked.gif"
UncheckedImageUrl="images/ToggleButton_Unchecked.gif" ImageHeight="19" ImageWidth="19" />
</atlastoolkit:ToggleButtonExtender>
Design Time Support
One of the neat things about the extender model is that Visual Studio will recognize that there is a checkbox
extender on the page and will expose the ToggleButtonextender's properties to any of the ASP.NET Checkboxes.
ASPX Code-Behind
There is no code-behind as no logic is necessary on the server.
Styles
Here is the corresponding styles for my toggle butons, mostly to control spacing.
<style type="text/css">
body {
font:normal 10pt/13pt Arial, Verdana, Helvetica, sans-serif;
color:#666;
margin:20px;
}
.togglebutton {
padding-top:13px;
}
.togglebutton label {
padding-left:8px;
}
</style>
Source Code
You can download the source to this demo at:
Source: http://blogs.vertigosoftware.com/files/alan/atlastogglebutton.zip