Themes are a way to ensure a consistent look and feel across all controls that populate the pages of a web site. By changing the theme, you can alter the appearance of all controls in a single shot. Themes can be applied at various levels—to an individual page, to all pages within a site, or to an entire web server. A theme is a superset of a cascading style sheet (CSS) file as it addresses all visual properties of an ASP.NET control including those properties that can’t be set through a CSS style. For example, you could set the GridLines property of a DataGrid control through the equivalent CSS style of the <table> HTML element. This is possible because the DataGrid renders out as a table. However, in the first place, you have to know some of the DataGrid’s rendering details; secondly, you automatically extend the setting to all tables in the page or site. Furthermore, with CSS styles, it is simply impossible to control the style of the DataGrid’s pager and choose between numeric or next-prev mode. An ASP.NET theme is not limited to attributes but can include images and static text. For example, you can define a DataGrid theme that sets the images or the text to display for the Next and Previous paging buttons. ASP.NET themes will make their debut with ASP.NET 2.0.
A theme is represented with a bunch of files all stored in a common directory. Themes can be global to the server site or specific to an application. In the former case, you’ll find them under the installation path of the .NET Framework 2.0. Local themes, instead, can be found under the Themes folder below the application’s root folder. Each subdirectory of the Themes main directory represents a distinct theme for the pages. The name of the directory is the name of the theme.
To assign pages a theme, you can either set the Theme attribute in the @Page directive, or write the theme name to the Page class Theme property. In the former case, you’ll have a static, design-time linking; in the latter scenario, the link would be established dynamically. There’s no significant difference between the two approaches except that, in the second case, you need to bind the theme in the PreInit event. PreInit is a new event in the page lifecycle added by ASP.NET 2.0. This new event fires before the page content is built and before the Init event is fired in turn.
ASP.NET 2.0 will come with a good deal of predefined theme files; however, you can also create your own themes. To start off, create a CSS file with as many settings you need to HTML elements. Next, create a second text file named the skin file. This new file will take a .SKIN extension. A skin file just contains blocks of markup code, one per each ASP.NET control you want to skin. Here’s an example:
<asp:Button runat="server"
Font-Bold="true"
BorderColor="#585880"
BorderWidth="1pt"
ForeColor="#585880"
BackColor="#F8F7F4" />
All buttons in the pages under the effect of the theme will automatically inherit the specified settings.
Themes can be disabled on a per-control basis by setting the control’s EnableTheming property to False. This is particularly useful when you need to ensure that a control property in a given context has a fixed value. Settings defined through themes can be programmatically overridden by writing some code in the Init or Load event of the control or page.
Themes unify the appearance of controls through all the pages of a web application, and more importantly, do that by separating graphical settings from business code.
Dino Esposito is Wintellect's ADO.NET and XML expert, and a trainer and consultant
based in Rome, Italy. Dino is a contributing editor to Windows Developer
Network and MSDN Magazine, and the author of several books for Microsoft
Press including Building Web Solutions with ASP.NET and ADO.NET
and Applied XML Programming for .NET. Contact Dino at [email protected].
