ASP.NET 2.0 Cookbook, 2nd Edition

10.5. Using Themes

Problem

You want to be able to change the look of your application without having to change all the pages in your application.

Solution

Use the Theme features in ASP.NET 2.0 to define the look of your application. That is, create a theme to define the look of each control and set the Theme attribute of the @ Page directive to tell ASP.NET to use the theme for controls on the page.

Create a theme as follows:

1. Create an App_Themes folder in the root of your application.

2. Create a folder with the name you want to use for the theme in the App_Themes folder.

3. Create a .skin file in the folder created above containing a definition for each server control you use in your application with the attributes that define its appearance set the way you want the control to look.

4. (Optionally) Create a .css file in the folder created above to use with your .skin file.

5. (Optionally) Add any images to the folder created above or to a subfolder as desired.

In the .aspx file for pages in your application set the Theme attribute of the @ Page directive to the name of the theme you want to use for the page.

The .skin files we created to demonstrate this solution are shown in Example 10-14 (blue theme) and Example 10-15 (grey theme). The .aspx file for the page that demonstrates how to use the theme is shown in Example 10-16. The code-behind file for the page is shown in Examples 10-17 (VB) and 10-18 (C#). The output for the page is shown in Figure 10-3.

Figure 10-3. Output of demonstration page using ...