Using Global Themes

A couple of global, standard Themes are shipped with ASP.NET. You can integrate them directly into your web site. These Themes are stored in the following directory:

 <windir>\Microsoft.NET\Framework\<version>\ASP.NETClientFiles\Themes\ 

Each of the available Themes has a separate subfile with the name of the Theme. The current Alpha version comes with two standard Themes: BasicBlue and SmokeAndGlass. It's expected that more Themes will come along with the Beta version.

Applying Themes to a Whole Web Site

You must choose a Theme in the web.config configuration file if you want to use it for the whole web site. The following entry in the <pages> tag will do the job:

 <?xml version="1.0" encoding="UTF-8" ?> <configuration>     <system.web>         <pages theme="BasicBlue" />     </system.web> </configuration> 

Afterwards, all pages use the BlueBasic Theme unless something else has been defined. The effects are shown in Figure 9-1. The example consists of a TreeView, SiteMapPath, and GridView control to display the Northwind customers. If you take the same page and use the alternatively offered SmokeAndGlass Theme, the page will be shown with the brilliance and glamor you see in Figure 9-2.

Figure 9-1: This Theme is called BlueBasic.

Figure 9-2: This one is known as SmokeAndGlass.

Although the appearance of both figures is quite different, no modifications were made to the page itself. Only the configuration in the web.config file was modified to show a different Theme.

Applying Themes to a Web Site Area

Quite often you'll want to use different Themes for individual areas of a web site. In this case, you have two possibilities that the configuration system of .NET offers to you in the familiar way:

• You can store the subsections in separate directories and provide each of them with its own web.config configuration file that inherits the configuration of the root directory and overwrites the chosen Theme.

• Alternatively, you can use the <location> tag to define different Themes for a given path (either directory or page) within the root web.config file.

The following snippet shows the application of the <location> tag, which is used to assign an alternative Theme to the subdirectory named "subfolder".

 <?xml version="1.0" encoding="UTF-8" ?> <configuration>     <system.web>         <compilation debug="true" />         <pages theme="BasicBlue" />     </system.web>     <location path="subfolder">         <system.web>             <pages theme="SmokeAndGlass" />         </system.web>     </location> </configuration> 

Applying Themes to a Single Page

As an alternative to the global assignment of a Theme, you can go for a differentiated design for each single page. To do so, you must assign the name of the desired Theme to the theme attribute of the @Page directive. When using Master Pages, this can naturally be done as well with the corresponding @Master directive.

 <%@ page language="C#" theme="SmokeAndGlass" %> 

Caution

If you select a Theme through the configuration file as well as at page level, the @Page directive will overrule the global setting.

Apart from the static assignment, the dynamic selection of a Theme is possible, too. Just pass the desired name to the Theme property of the Page class. Please be aware that the property must be set in the Page_PreInit event at the latest. Any changes at a later time in the page's life cycle, for example in the Page_Load event, will cause a run time exception.

 void Page_PreInit(object sender, System.EventArgs e) {     this.Theme = "SmokeAndGlass"; } 

In combination with personalization, the dynamic assignment of Themes is really getting interesting. As in the forums of www.asp.net, users may choose their desired view. Though this requirement indeed works, nevertheless the solution is quite tricky. You'll find an example later in this chapter in the "Using Themes with Personalization" section.

Themes Under the Hood

Despite what I discussed earlier regarding Themes and CSS, Themes frequently work with CSS behind the scenes! If you look at the source code of a generated ASP.NET page, you'll see the corresponding style definitions in the header. As long as your Theme uses some external CSS files, they'll automatically be referenced through the aspnet_client virtual directory.

 <html> <head >     <title>Untitled Page</title>     <style>         .aspnet_s0 { padding:1,5,1,5;color:#000066;...; }         .aspnet_s1 { color:#000066;text-decoration:none; }         ...         .aspnet_s13 { color:Blue;text-decoration:none; }     </style>     <link rel="stylesheet"         href="/aspnet_client/system_web/1_2_30703/Themes/BasicBlue/whatever.css"         type="text/css" /> </head> <body> 

Caution

If the example shown previously doesn't work properly with your own individually created pages, it may be that the server-side <head> tag is missing. This tag is absolutely necessary, because otherwise the styles can't be displayed.

 <html> <head  runat="server">     <title>Untitled Page</title> </head> <body> 

Themes are administrated internally by two classes: PageTheme and ControlSkin. The latter offers a method, ApplySkin(), that applies a Skin to the control. In practice, however, you'll only rarely get in touch with these two classes.