LANGUAGES: C# | VB.NET
ASP.NET VERSIONS: 2.0
Author Once, Theme Always
Build ASP.NET Pages that Support Variable Graphics
By Dino Esposito
There are controls in the ASP.NET framework that supply sophisticated user interface features. But finding the right combination of style settings and values for appearance properties can be difficult, even with the help of Visual Studio.NET designers. Only searching in the ASP.NET 1.x toolbox, you can find at least a couple of these UI-rich controls: DataGrid and Calendar. Aware of the issue, these controls attempt to alleviate your troubles by providing smart options in the Visual Studio.NET 2003 designer. These options manifest through the AutoFormat feature (a list of predefined skins for controls). This is nothing radically new AutoFormat was first introduced with Microsoft Word tables yet this is a useful and time-saving capability. To be really helpful, however, the auto-format feature would need at least a couple of additions, such as definition of custom skins and programmatic binding of skins.
In ASP.NET 2.0, both goals are achieved thanks to themes. Like AutoFormat, themes is not a new concept for Microsoft software products. Logically speaking, in fact, ASP.NET themes are in no way different from Windows XP themes. Themes are a feature for customizing the visual appearance of a Web page and, in turn, of the whole Web site. As a developer, you can define one or more themes to ship with your application; as a power user, you can customize the look-and-feel of a site by choosing one of the available themes.
There s some architectural work in the ASP.NET runtime to make support for themes possible. For this reason, themes are supported in ASP.NET 2.0, but not in ASP.NET 1.x. Themes are pluggable elements in any ASP.NET application so that third-party vendors can even create and sell themes for certain particularly rich controls.
In short, themes are an easy way for page authors to ensure a consistent look-and-feel for the constituent controls of a page. At the same time, themes let you easily change the appearance of a control in a single shot. Settings contained in a theme can be deployed to individual applications or all applications in a server with the same ease.
What Is a Theme, Anyway?
At its core, a theme makes it easy to customize the visual appearance of a Web site while requiring little or no modifications to the original page. Pages can seamlessly work with or without a theme and use different themes at different times based on user preferences. Technically speaking, a theme is a collection of files and can be overall seen as a sort of super CSS file.
A theme may include a CSS stylesheet file, as well as a set of skins and associated files such as images and other resources. Like a CSS, once enabled the theme determines the appearance of all controls that fall under its jurisdiction. To get the gist of themes, consider this simple tag:
Without themes, the calendar will look quite spartan. With a theme added, however, the same markup renders a more colorful and appealing calendar. Take a look at Figure 1. Which do you think is the unthemed calendar? To get a more appealing result, no code had to be added; a new attribute in the @Page directive does the trick. As you can see, themes supply a neat separation between the page code, controls, and formatting rules.
Figure 1: A Calendar control, with and without themes.
Central to themes is the concept of a skin. A skin is a named set of visual properties and templates that can be applied to one or more controls on a page. The skin determines the appearance of a control in much the same way clothes determine the appearance of people. A skin is always associated with a specific control type. In Beta 2, ASP.NET 2.0 doesn t ship any sample themes but writing one is a snap, as you ll see in a moment.
Stylesheet and Customization Themes
In ASP.NET 2.0 there are two types of themes, stylesheet themes and customization themes. What s the difference? They re the same kind of object; the difference lies in how they re managed by the ASP.NET runtime. A stylesheet theme is applied to the controls in the page before the attributes in the .aspx source file are processed. This means that settings in the .aspx file will override the settings defined by the theme. On the other hand, a customization theme is applied later and overrides any settings hard-coded in the .aspx source file. It is essential to note that whatever theme you apply, whether it be customization or stylesheet-control properties, it can always be modified through code in page events like Init and Load.
You set stylesheet themes and customization themes using different attributes in the @Page directive. The same theme can be used as a stylesheet or customization theme at different times.
Imagine you create a new Web site and you want it to be visually appealing from the start. Instead of having to learn all the available style properties of each employed control, you simply get a third-party ASP.NET theme (or have other members of your team create one). With this change, pages automatically inherit a new, and hopefully attractive, appearance. For example, if you add a Calendar control to a page, it automatically renders with the default appearance defined in the theme with no need for setting other properties declaratively or programmatically.
Selecting a theme for one or more pages doesn t necessarily bind you to the settings of that theme, however. Through the Visual Studio.NET designer you can review the pages and manually adjust some of the styles in a control, if you wish.
Create a Theme
To create a new theme in a Visual Studio.NET 2005 ASP.NET solution, you start by creating a new folder under App_Themes. Right-click on the App_Themes node and choose to create a theme folder. Next, you add theme files to the folder. In this way, you create a theme specific to the application. By moving the directory to the root path of global themes on the Web server you can make that theme available to all Web applications installed on the server machine. Figure 2 shows the contents of a sample theme as it appears through Windows Explorer. A theme is an aggregation of files. Typical auxiliary files are CSS stylesheet files, skin files, images, XML or text files, or extensible stylesheet files (XSLT). In Visual Studio.NET 2005 you can create any of these by adding a new item to the folder. Empty files of the specified type are created in the theme folder and edited through more or less specialized text editors. Of all the possible auxiliary files, skin files are the least known and, therefore, the only ones to deserve further attention in this article.
Figure 2: The constituent files of an ASP.NET theme.
Saved with a .skin extension, a skin file contains the theme-specific markup for a given set of controls. A skin file is made by a sequence of server control definitions that include predefined values for most visual properties, images for URL-based properties, and markup for supported templates. Each skin is control-specific and has a unique name. You can define multiple skins for a given control and distinguish them by name. Once themed, a control has the original markup written in the .aspx source file modified at run time by the content of the skin. The way the modification occurs depends on whether a customization or a stylesheet theme is used. Skin files are located in the root of the theme folder. Figure 3 shows a sample skin file.