Themed CheckBox check mark

Themes for ASP.NET applications came probably in 2005 with .NET 2.0, so it’s been around for a while.

I am creating different themes to adapt my web appliction to different clients.

So the problem I came across with the ASP CheckBox control is that setting the size of the control does not change the size of the check mark. Neither does it have any properties for setting the size.

Also, I want to be able to theme my control, so the control needs to have some kind of property that could be set in the skin file, and there is no such property on the standard asp CheckBox. It does have a method for setting properties on the inner input control, however, but as I said, I need a property.

The CheckBox control is rendered inside a span tag, like this:

<span class="checkbox">   <input id="ContentPlaceHolder1_chkPersistLogin"          type="checkbox"          name="ctl00$ContentPlaceHolder1$chkPersistLogin" />   <label for="ContentPlaceHolder1_chkPersistLogin">Remember me</label> </span>

Now, as you can see, if you set the CssClass property of the control to something, then it will be applied to the span, not to the inner controls directly.

So, as I mentioned, the CheckBox control does have a way of accessing the inner input control. It is by using the InputAttributes propertys methods. For example, the following code will add a “class” attribute to the <input type=”checkbox” /> tag:

MyCheckBox.InputAttributes.Add("class", “MyCheckBoxCssClass”);

If I want to set the class on my inner input control, then I could create my own custom control that inherits from the asp CheckBox control. Here’s my CheckBoxPlus class:

using System; using System.Web; using System.Web.UI.WebControls; namespace MyWebApp.WebUI.Common.CustomControls {     public class CheckBoxPlus : CheckBox     {         private string _inputCssClass;         public string InputCssClass         {             get { return _inputCssClass; }             set             {                 _inputCssClass = value;                 this.InputAttributes.Add("class", _inputCssClass);             }         }     } }

To be able to use my custom control in a page, I need to add a directive to the web forms where I want to use it:

<%@ Register TagPrefix="custom" Assembly="MyWebApp.WebUI" Namespace="MyWebApp.WebUI.Common.CustomControls" %>

Now I can use the control im my page, and set the new property:

<custom:CheckBoxPlus ID="chkPersistLogin" runat="server" Text="Remember me" CssClass="checkbox" />

The last part is to enable theming/skins for the control. The only thing you need to do is to add the same Register directive at the top of the skin file, and then you can create a template for you control in the usual way. Here’s an example skin file:

<%@ Register TagPrefix="cd" Assembly="MyWebApp.WebUI" Namespace="MyWebApp.WebUI.Common.CustomControls" %> <asp:Button runat="server" /> <asp:TextBox runat="server" /> <asp:Label runat="server" /> <asp:Panel runat="server" HorizontalAlign="Center" /> <cd:CheckBoxPlus InputCssClass="checkboxplus" runat="server" />

When I load my page now, the rendered HTML looks like this:

<span class="checkbox">   <input id="ContentPlaceHolder1_chkPersistLogin"          type="checkbox"          name="ctl00$ContentPlaceHolder1$chkPersistLogin"          class="checkboxplus" />   <label for="ContentPlaceHolder1_chkPersistLogin">Remember me</label> </span>

As you can see, the theme sets the InputCssClass, and thus I am able to control the size of the check mark of the CheckBox control.