12.6. Themes and Skins | Programming Visual Basic 2005

Many users like to personalize their favorite web sites by setting the look and feel to meet their own aesthetic preferences. ASP.NET 2.0 supports that requirement with "themes ."

A theme is a collection of skins . A skin describes how a control should look. A skin can define style sheet attributes, images, colors, and so forth.

Having multiple themes allows your users to choose how they want your site to look by switching from one set of skins to another at the touch of a button. Combined with personalization, your site can remember the look and feel each user prefers.

There are two types of themes. The first, called stylesheet themes , define styles that may be overridden by the page or control. These are, essentially, equivalent to CSS style sheets. The second type, called customization themes, cannot be overridden. You set a stylesheet theme by adding the StyleSheetTheme attribute to the page directive, and, similarly, you set a customization theme by setting the Theme attribute in the page directive.

In any given page, the properties for the controls are set in this order:

Properties are applied first from a stylesheet theme.
Properties are then overridden based on properties set in the control.
Properties are then overridden based on a customization theme.

Thus, the customization theme is guaranteed to have the final word in determining the look and feel of the control.

Skins themselves come in two flavors: default skins and explicitly named skins. Thus, you might create a Labels skin file with this declaration:

     <asp:Label runat="server"     ForeColor="Blue" Font-Size="Large"     Font-Bold="True" Font-Italic="True" />

This is a default skin for all Label controls. It looks like the definition of an ASP:Label control, but it is housed in a skin file and, thus, is used to define the look and feel of all Label objects within that skin file's theme.

In addition, however, you might decide that some labels must be red. To accomplish this, create a second skin, but assign this skin a SkinID property:

     <asp:Label runat="server" Skin     ForeColor="Red" Font-Size="Large"     Font-Bold="True" Font-Italic="True" />

Any label that does not have a SkinID attribute will get the default skin; any label that sets SkinID ="Red" will get your named skin.

The steps to providing a personalized web site are:

Create the test site.
Organize your themes and skins.
Enable themes and skins for your site.
Specify themes declaratively if you wish.

12.6.1. Create the Test Site

To demonstrate the use of themes and skins, you'll create a new web site (Themes) but you will use Copy Web Site to bring over all the personalization code from the previous example and set the start page to Welcome.aspx. Test the application to make sure it still works as expected.

To begin modifying your application, you'll need some controls whose look and feel you can set.

Open Welcome.aspx, and drag on some new controls, as shown in Figure 12-44.

Figure 12-44. Welcome.aspx new controls

There are four labels (each with names beginning with lbl): ListBox, RadioButtonList, Calendar, and TextBox. Use the default properties (other than the names) for all, except remove all text from TextBox1's Text property.

You'll also need to click on the smart tag for both lbItems (the ListBox) and RadioButtonList1 (the RadioButtonList). For each of these, choose Edit the List items, as shown in Figure 12-45.

Figure 12-45. Choose Edit the List items

In the ListItem Collection Editor add four items to the list box, and six items to the RadioButtonList, as shown back in Figure 12-44.

You will use themes to change the look and feel of the new controls.

12.6.2. Organize Site Themes and Skins

Themes are stored in your project in a folder named App_Themes. To create this folder, go to Solution explorer, right-click on the project folder, and choose Add Folder Theme Folder. Name the new folder Dark Blue the folder Dark Blue immediately under it. Right-click on App_Themes and create a second theme folder, named Psychedelic.

Right-click on the Dark Blue theme folder and choose Add New Item. From the template lists, choose Skin File and name it Button.skin (to hold all the button skins for your Dark Blue theme), as shown in figure Figure 12-46.

Figure 12-46. Creating the skin file

Each skin file is just a text file that contains a definition for the control type, but with no ID. Thus, your Label.skin file for the Dark Blue theme might look like this:

     <asp:Label Runat="server"     ForeColor="Blue" Font-Size="Large"     Font-Bold="True" Font-Italic="True" />

Create skin files for each of the following types in both themes:

Button.skin
Calendar.skin
Label.skin
ListBox.skin
RadioButton.skin
Text.skin

At this point, your solution should look more or less like Figure 12-47.

Figure 12-47. Themes and skins in your project

You can experiment with adding attributes to these new skin files and see the effects they produce on your user interface. Start by copying the text from Label.skin, then modifying it so it affects the appropriate control type (asp:Button in Button.skin, asp:Calendar in Calendar.skin, asp:ListBox in ListBox.skin, etc.).

12.6.3. Enable Themes and Skins

To let your users choose the theme they like and have their preference stored in their profile, you need to add a single line to the properties element in the profile element of Web.config:

     <add name="Theme" />

Save and rebuild your application.

12.6.4. Specify Themes for Your Page

You can set the themes on your page either declaratively or programmatically. To set a theme declaratively, add the Theme attribute to the Page directive:

     <%@ Page Language="VB" AutoEventWireup="true"     CodeFile="Default.aspx.vb" Inherits="Default_aspx" Theme="Dark Blue"%>

You can also set the theme programmatically, either by hard coding it or (even better) by setting it from the user's profile.

StyleSheet themes are set by overriding the StyleSheetTheme property for the page. IntelliSense will help you with this. Open Welcome.aspx.vb and scroll to the bottom of the class. Type the word overrides and all the overridable members are shown. Start typing sty and IntelliSense will scroll to the property you want: StyleSheetTheme, as shown in Figure 12-48.

Figure 12-48. Overriding a method

Once IntelliSense finds the property you want, press Tab to accept it. Fill in the accessors, as shown in Example 12-22.

Example 12-22. Setting a StylesheetTheme property

 Public Overrides Property StyleSheetTheme( ) As String     Get         If Profile.IsAnonymous = False And Profile.Theme IsNot Nothing Then             Return Profile.Theme         Else             Return "Dark Blue"         End If     End Get     Set(ByVal value As String)         Profile.Theme = value     End Set End Property

If you are going to set a customization theme programmatically, however, you must do so from the PreInit event handler for the page,^[*] because the theme must be set before the controls are created. A PreInit event handler is shown in Example 12-23.

^[*] The pre-init event is new in Visual Basic 2005.

Example 12-23. Welcome page PreInit event handler

 Protected Sub Page_PreInit( _ ByVal sender As Object, ByVal e As System.EventArgs) _ Handles Me.PreInit     If Profile.IsAnonymous = False Then         Page.Theme = Profile.Theme     End If End Sub

Setting the theme in PreInit creates a bit of a difficulty when you want to allow the user to change the theme at runtime. If you create a control that posts the page back with a new theme, the PreInit code runs before the event handler for the button that changes the theme, and so by the time the theme is changed, the controls have already been drawn.

To overcome this you must, unfortunately, refresh the page again. An alternative is to set the themes in another page. For example, add two buttons to the ProfileInfo.aspx page (at the bottom of the table at the bottom of the page). Set the properties of the first button to:

      Text="Dark Blue" OnClick="Set_Theme"

Set the properties of the second button to:

      Text="Psychedelic" OnClick="Set_Theme"

Notice that the two buttons share a single Click event handler, Set_Theme, shown in Example 12-24. An easy way to have Visual Studio 2005 set up that event handler for you is to switch to Design view and click on one of the buttons. Click on the lightning bolt in the Properties window to go to the events, and double-click on the Set_Theme event. You are now ready to implement the event handler. You'll cast the sender to the button and check its text, setting the theme appropriately.

Example 12-24. Common Click event handler Common Click event handler

 Protected Sub Set_Theme( _ ByVal sender As Object, _ ByVal e As System.EventArgs) Handles ThemePsych.Click     Dim btn As Button = CType(sender, Button)     If btn.Text = "Psychedelic" Then         Profile.Theme = "Psychedelic"     Else         Profile.Theme = "Dark Blue"     End If End Sub

When the user is not logged on, the Welcome page's default theme will be used. Once the user sets a theme in the profile, that theme will be used when you return to the Welcome page. Create skins for your two themes and then run the application to see the effect of applying the themes.

12.6.5. Using Named Skins

You can override the theme for particular controls by using named skins.

Set the lblRadioButtonList label to be red even in the Deep Blue theme, by using a named skin. To accomplish this, create two Label skins in the Label.skin file within the Deep Blue folder.

     <asp:Label Runat="server"     ForeColor="Blue" Font-Size="Large"     Font-Bold="True" Font-Italic="True" />     <asp:Label Runat="server" Skin     ForeColor="Red" Font-Size="Large"     Font-Bold="True" Font-Italic="True" />

The first skin is the default; the second is a named skin, because it has a SkinID property set to Red. Click on the RadioButtonList control in Design view and set the SkinID property to Red. Or, open the source for Welcome.aspx and find the RadioButtonList and add the attribute Skin:

     <asp:Label  Runat="server" Text="Radio Button List"     Skin/>

When you log in and set your theme to Dark Blue, you'll find that the label for the RadioButtonList is Red, as shown in Figure 12-49. (You didn't get stuck with a black & white book, did you?)

Figure 12-49. RadioButtonList label is Red