Programming Microsoft Web Forms (Pro Developer)

ASP.NET 2.0 introduces a new way to style Web Forms. In many respects, themes are an alternative to cascading style sheets, but just as often they are used in conjunction with cascading style sheets to conveniently alter the appearance of a Web page without changing the content. Themes are not useful for changing the overall layout of the page; however, ASP.NET 2.0 offers a new tool to help with that, called Master Pages, covered in the next section.

A theme is used as a sort of server-side style sheet to allow controls to appear differently based on the theme applied. To see what a theme can do, let's look at a page we have seen previously. The page shown in Figure 3-22 is the same page as in Figure 3-13, with a theme applied.

Figure 3-22: SimpleWebFormWithThemes.aspx, the same form as Figure 3-13, with a theme applied

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" Border Font-Size="0.9em" Font-Names="Verdana" ForeColor="#585880" BorderColor="#585880" BorderWidth="1pt" /> <asp:DropDownList runat="server" BackColor="#efefef" Border Font-Size="0.9em" Font-Names="Verdana" ForeColor="#585880" BorderColor="#585880" BorderWidth="1pt" /> <asp:ListBox runat="server" BackColor="#efefef" Border 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"]); }

In this example, the theme is set based on a value passed in on the query string. Of course, in a production application, the theme would be set via a configuration file or in some other way that would ensure that a selected theme is actually available.