Skinning Controls





Skinning Controls

Skin files are simple text files where you declare controls just as you would in a page, only without an ID attribute. The idea is to specify all of the various properties of a control to get it to look a certain way. That "template" of sorts is then applied to all of the controls of the same type on the page. If we add a file called MyControlStyles.skin and put it in the /App_Themes/bluetheme folder we've been working with, all of the style properties in each control declaration will be applied to the controls of the same type in the page. For example, we could declare a drop-down list to have a black background and white text in the skin file, and all of the drop-down controls on the page would have the same properties applied in the page when we assign the "bluetheme" theme. Listing 12.9 illustrates this.

Skin controls, controls in the page, and their rendered output

MyControlStyles.skin

<asp:DropDownList runat="server" BackColor="Black" ForeColor="White" />


MyPage.aspx

<%@ Page Language="C#" Theme="bluetheme" %>
<html>
<head runat="server">
  <title>Themed Page</title>
</head>
<body>
  <form id="form1" runat="server">
    <asp:DropDownList ID="Ddl1" Runat="Server">
      <asp:ListItem>test</asp:ListItem>
    </asp:DropDownList>
  </form>
</body>
</html> 

Rendered HTML

<html>
<head id="Head1">
  <title>Themed Page</title>
  <link rel="stylesheet" href="Themes/BlueTheme/BlueStyle.css" type="text/css" />
</head>
<body>
  <form method="post" action="Default.aspx" id="form1">
    <select name="Ddl1" id="Ddl1" style="color:White;background-color:Black;">
      <option value="test">test</option>
    </select>
  </form>
</body>
</html>

The two most important things to notice in the rendered HTML are the inclusion of the style sheet link that we talked about earlier and the style information included in the select element's style attribute. We declared the theme for the page in the @Page directive.

The style information is applied just as if we had set the ForeColor and BackColor properties in the page itself. You can see how this would be useful if you wanted to change the look of controls throughout the site, especially if they're complex, like the Calendar control. Instead of having to change the information on every page, you would only need to do it once.

You can specify alternate skins for the same control by adding a SkinID attribute to both the declaration in the skin file and the control itself. Listing 12.10 shows the declarations to set a drop-down list that has black text on a white background, and one that is the reverse.

Multiple skins for the same control type

MyControlStyles.skin

<asp:DropDownList runat="server" BackColor="White" ForeColor="Black" />
<asp:DropDownList runat="server" BackColor="Black" ForeColor="White" SkinID="Reverse" />


MyPage.aspx

<asp:DropDownList ID="Ddl1" Runat="Server">
  <asp:ListItem>test</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="Ddl2" Runat="Server" SkinID="Reverse">
  <asp:ListItem>test</asp:ListItem>
</asp:DropDownList>

All Web controls in ASP.NET v2.0 have a SkinID property that can be used to programmatically set the control's skin.

Skin files, like the style sheets, can be named whatever you want, and you can have more than one. The skin files are treated together as one in the theme's folder, so you can organize the control declarations by SkinID (or any way you see fit).

As cool as the use of skins may be, it does have some drawbacks. First of all, if you work in a team with graphic designers, chances are they understand CSS but not the proprietary syntax of ASP.NET controls. Therefore, it's much easier for programmers to set the CssClass property of a control and know that the designers have a CSS class that will apply styles to that control. This way you can still use themes, but you can also have the style information stored in a format that is easily understood by programmers and designers. As a side effect, the style sheet will likely be cached in the user's browser instead of having all of that inline style information transmitted with every page.

Another downside, as we already discussed, is that this style information applies only to server controls and not to static HTML. If you wanted to apply the same styles to both a static HTML table and a DataGrid, you would need to create the DataGrid skin declaration and the style sheet. It's a lot less work to do it once and apply it to both.


     Python   SQL   Java   php   Perl 
     game development   web development   internet   *nix   graphics   hardware 
     telecommunications   C++ 
     Flash   Active Directory   Windows