So, I've been struggling for a while with how to style a checkbox to work with a skin file. Basically, what I did was create some gif files that look like checked and unchecked check boxes. I defined them in my SkinFile.skin file as follows:
<asp:ImageButton SkinID="iconCheckedDisabled" ImageUrl="Images/iconCheckedDisabled.gif" runat="server" ToolTip="Checked Disabled" />
<asp:ImageButton SkinID="iconCheckedEnabled" ImageUrl="Images/iconCheckedEnabled.gif" runat="server" ToolTip="Checked Enabled" />
<asp:ImageButton SkinID="iconUnCheckedDisabled" ImageUrl="Images/iconUnCheckedDisabled.gif" runat="server" ToolTip="Unchecked Disabled" />
<asp:ImageButton SkinID="iconUnCheckedEnabled" ImageUrl="Images/iconUnCheckedEnabled.gif" runat="server" ToolTip="Unchecked Enabled" />
The image files look like the following:
The problem basically is that you can't dynamically swap skin files easily because they must be set at the preinit phase of event processing. Not at databound events which is where I'd want to do it.
So, my revelation was that I could just list all the states in a gridview template, then use the visibility attribute to make them show the correct one. That way, the skins are all loaded all the time, just now showing all the time. The GridView Code looks like the following:
<asp:GridView ID="GridViewAssigned" runat="server" AllowPaging="True"
AllowSorting="True" Caption="Assigned" AutoGenerateColumns="false"
DataSourceID="ObjectDataSourceGroupsAssigned"
>
<Columns>
<asp:TemplateField ShowHeader="False" >
<ItemTemplate>
<asp:ImageButton ID="LinkButtonUnassign" SkinID="ImageButtonRemove" runat="server" BackColor="white" CausesValidation="False"
CommandArgument='<%# Eval("id") %>' CommandName="Select" ForeColor="black" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="True" HeaderText="Assign To New Content By Default" >
<ItemTemplate>
<asp:ImageButton ID="LinkButtonToggleDefaultChecked" SkinID='iconCheckedEnabled' runat="server" BackColor="white" CausesValidation="False"
visible='<%# (bool) Eval("Defaultnewcontent") %>'
CommandArgument='<%# Eval("id") + ";" + Eval("Approved") %>' CommandName="ToggleDefault" ForeColor="black" />
<asp:ImageButton ID="LinkButtonToggleDefaultUnChecked" SkinID="iconUnCheckedEnabled" runat="server" BackColor="white" CausesValidation="False"
visible='<%# !(bool) Eval("Approved") %>'
CommandArgument='<%# Eval("id") + ";" + Eval("Approved") %>' CommandName="ToggleDefault" ForeColor="black" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
</Columns>
</asp:GridView>
Then, when you finally run it, the gridview looks something like this.
Notice no codebehind was necessary for this trick! Good luck and hope this save you some time.