ONDotNet.com    
 Published on ONDotNet.com (http://www.ondotnet.com/)
 See this if you're having trouble printing code examples


Introducing Themes and Skins in ASP.NET 2.0

by Wei-Meng Lee
08/30/2004

Most web designers use Cascading Style Sheets (CSS) to maintain a consistent look and feel on their web sites. ASP.NET 2.0 introduces a new way to achieve this consistency without having to manage your own CSS files. With this new feature, you can apply themes to an entire site so that you can maintain consistency across all the controls. In this article, I will show you how to create themes and skins for your web controls and then apply them to your web application.

Creating Themes and Skins

For this article, create a new ASP.NET web application using Visual Studio 2005 Beta 1. Figure 1 shows the Default.aspx page populated with two Label controls and one Button control.


Figure 1. Populating the Default.aspx page

To change the look and feel of the controls, you can use the Properties window and modify the attributes of each control, such as its background color, font name, and so on. However, a much more efficient way to maintain a consistent look and feel for your web application is to use themes. When you apply a theme to a page, all controls will have a common look, saving you the trouble of changing each control's properties.

A theme contains one or more skin files. Each skin file defines the look and feel of a particular control. Figure 2 shows my project containing a Themes folder, which in turn contains a Standard Theme folder with two skin files, Button.skin and Label.skin.


Figure 2. The project with themes and skins

To add a skin file to your project, go to Solution Explorer and then add a new text file to your project. Change the file extension to .skin.

Figure 3 shows the Button.skin file's content:


Figure 3. The content of the Button.skin file

Figure 4 shows the Label.skin file's content:


Figure 4. The content of the Label.skin file

While you need not necessarily create multiple skin files for your project, the recommended practice is that you hold the styles for each control in a separate skin file. A good practice is to name each skin file after the control that it defines.

Skin files are nothing more than just a source view of controls (with the exclusion of attributes such as id), so it's very easy to create them. One good way to do that is to use a normal web form and format the controls the way you want them to be. Then switch to source view, copy the control element, and paste it into the skin file. Finally, remove the id attribute and add the skinid attribute.

Let's examine what the various definitions in the two skin files look like.

First let's look at Label.skin. The first line defines a default skin for the Label control. A default skin does not contain a skinid attribute in its definition:


<asp:Label Runat="server" />

The next one defines a Label control with its text displayed in bold:


<asp:Label skinid="bold" Runat="server"  Font-Bold="True" />

This is what a Label control will look like when you apply this skin:


Figure 5. Applying the bold skin

The following defines a Label control with its text displayed in italic:


<asp:Label skinid="italic" Runat="server" Font-Italic="True" />

This is what a Label control will look like when you apply this skin:


Figure 6. Applying the italic skin

The last one defines a Label control with its text displayed using Garamond font with a light yellow background:


<asp:Label skinid="garamond" Runat="server" Font-Names="Garamond" 
     Font-Overline="False" BackColor="LightGoldenrodYellow" />

This is what a Label control will look like when you apply this skin:


Figure 7. Applying the Garamond skin

Next is the Button.skin file. For the Button control, the first definition is the default skin:


<asp:Button Runat="server" />

The next one displays the text of the Button control in bold:


<asp:Button skinid="bold" Runat="server" Font-Bold="True" />

This is what a Button control will look like when you apply this skin:


Figure 8. Applying the bold skin

The next one defines a Button control with a green background and displays the text in bold:


<asp:Button skinid="greenbackground" Runat="server" 
     Font-Bold="True" BackColor="#C0C000" />

This is what a Button control will look like when you apply this skin:


Figure 9 Applying the greenbackground skin

The last definition defines a Button control with text displayed using the Script MT Bold font, in bold, and defines the dimension of the control so that the text can fit in:


<asp:Button skinid="script" Runat="server" Height="32px" Width="134px" 
     Font-Bold="True" Font-Names="Script MT Bold" Font-Size="Medium" />

This is what a Button control will look like when you apply this skin:


Figure 10. Applying the script skin

Applying Themes and Skins

The last section shows the definitions for the various skins in a theme. To apply a theme to your page, add the Theme attribute in the Page directive:


<%@ Page Language="VB" 
    Theme="Standard Theme"
    AutoEventWireup="false" 
    CompileWith="Default.aspx.vb" 
    ClassName="Default_aspx" %>

To apply skins to individual controls, add the SkinID attribute for each control. The values specified in the SkinID attribute is the value that is set in the skinid attribute of the skin files:


    <asp:Label ID="Label2" SkinID="bold" ...

    <asp:Label ID="Label1" SkinID="garamond" ...

    <asp:Button ID="Button1" SkinID="greenbackground" ...

If a control does not specify the SkinID attribute, then the default skin defined in the skin file would apply.

Figure 11 shows the Default.aspx page after applying the Standard Theme theme and the various skins to the controls on the page.


Figure 11. Applying a theme to the page

You can define multiple themes in your project. Figure 12 shows that there are two themes defined in the project, Enhanced Theme and Standard Theme.


Figure 12. Adding multiple themes to the project

To change the look and feel of the site, simply change the theme in the Page directive and apply the desired skins to the controls.

Note: If you want to prevent a particular control from being themed, set the EnableTheming property of the control to False. By default, it is set to True.

Applying Themes During Runtime

Apart from setting the theme of a page during design time, it is also possible to set the theme of a page during runtime. This is particularly useful for allowing users to customize the page according to their preference.

To illustrate how to set a theme during runtime, add a DropDownList control and a Button control (see Figure 13). Populate the DropDownList control with two items, Standard Theme and Enhanced Theme.


Figure 13. Adding the DropDownList and Button controls

I will use the Profile object (see Personalization in ASP.NET for details on how to use it) to save the theme that the user selects. To do so, add the profile elements to the web.config file:


<system.web>
   <profile>
      <properties>
         <add name="Theme" type="System.String" />
      </properties>
   </profile>
   ...

When the user clicks on the Save Theme button, save the theme in the Profile property:


Sub btnSaveTheme_Click(ByVal sender As Object, _
                       ByVal e As System.EventArgs)
    If ddlTheme.SelectedIndex = 0 Then
        Profile.Theme = "Standard Theme"
    ElseIf ddlTheme.SelectedIndex = 1 Then
        Profile.Theme = "Enhanced Theme"
    End If
End Sub

In the Page_PreInit event, set the new theme to use when the page is loaded:


Private Sub Page_PreInit(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Me.PreInit
    If Profile.Theme <> "" Then
        Page.Theme = Profile.Theme
    End If
End Sub

The limitation here is that the PreInit event is executed before the postback is processed, and thus when the Save Theme button is clicked and a postback is the result, the theme that was just selected would not be available in the PreInit event. To see the new theme, you need to refresh the page one more time.

Summary

Themes and skins constitute a neat feature in ASP.NET 2.0 that will appeal to developers who need to maintain large numbers of pages in an application. Though I have illustrated skins only using control definitions, skin files are not limited to that; you can also use CSS definitions.

Wei-Meng Lee (Microsoft MVP) http://weimenglee.blogspot.com is a technologist and founder of Developer Learning Solutions http://www.developerlearningsolutions.com, a technology company specializing in hands-on training on the latest Microsoft technologies.


Return to ONDotnet.com

Copyright © 2009 O'Reilly Media, Inc.