AddThis Social Bookmark Button

Print

Introducing Themes and Skins in ASP.NET 2.0
Pages: 1, 2

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