Themes and Skins

Clearly, compared with Figure 3-13, this form is different. The backgrounds of the controls are gray, and the borders around the controls are different, as is the appearance of the buttons . How exactly do themes work?

First, the structure of an ASP.NET application folder is important. There are several special folders, generally beginning with App_ . When you create a new skin file, it is placed in a folder named App_Themes. Inside App_Themes is another folder named for the specific theme. Figure 3-23 shows the App_Themes folder and the SkinFile folder. The appearance of these folders in Solution Explorer exactly mirrors the folder structure where the application exists.

Figure 3-23: Solution Explorer, showing the contents of the App_Themes folder

A skin file consists of ASP.NET control markup tags, with the ID removed. As a matter of fact, because there is no IntelliSense technology in a skin file, it often makes sense to create sample controls in an .aspx file, copy them into the skin file, and remove the ID attribute and value. The skin file used to modify the page in Figure 3-22 is shown in Listing 3-4.

Listing 3-4: SkinFile.skin

<asp:TextBox

runat

="server"


BackColor="#efefef" BorderStyle="Solid"


Font-

Size

="0.9em" Font-Names="Verdana"


ForeColor="#585880" BorderColor="#585880"


BorderWidth="1pt" />


<asp:DropDownList runat="server"


BackColor="#efefef" BorderStyle="Solid"


Font-Size="0.9em" Font-Names="Verdana"


ForeColor="#585880" BorderColor="#585880"


BorderWidth="1pt" />


<asp:ListBox runat="server"


BackColor="#efefef" BorderStyle="Solid"


Font-Size="0.9em" Font-Names="Verdana"


ForeColor="#585880" BorderColor="#585880"


BorderWidth="1pt" />


<asp:Button runat="server"


BorderColor="#585880" Font-Bold="true"


BorderWidth="1pt" ForeColor="#585880"


BackColor="#f8f7f4" />

Any control for which you want to create a changeable appearance, or "skin," should be defined in the skin file. A theme can be set declaratively in the @ Page directive, as in the SimpleWebFormWithThemes.aspx.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SimpleWebFormWithThemes.aspx.cs" Inherits="SimpleWebFormWithThemes" Theme="SkinFile" %>

The name specified in the Theme attribute is the name of the folder, in the App_Themes folder for the application, or a global theme, found in the %WINDIR%\Microsoft.NET\Framework\ < version >\Themes folder (where %WINDIR% is the Microsoft Windows folder and < version > is the exact version number of the Microsoft .NET Framework you are using. Note that themes are not available for .NET 1. x applications.)

Themes can also be applied programmatically, by setting the Theme property of the Page class. You might expect that setting a theme is something naturally done in the Page_Load event. However, this is not possible. You must use a newly created event, Page_PreInit , as follows .

protected void Page_PreInit() { Page.Theme = Server.HtmlEncode(Request.QueryString["Theme"]); }