Themes


By combining ASP.NET pages with master pages and CSS style sheets, you can go a long way in separating form and function, where the look and feel of your pages is defined separately from their operation. With themes you can take this a step further and dynamically apply this look and feel from one of several themes that you supply yourself.

A theme consists of the following:

  • A name for the theme

  • An optional CSS style sheet

  • Skin (.skin) files allowing individual control types to be styled

These can be applied to pages in two different ways: as a Theme or as a StyleSheetTheme:

  • Theme — All skin properties are applied to controls, overriding any properties the controls on the page may already have.

  • StyleSheetTheme — Existing control properties take precedence over properties defined in skin files.

CSS style sheets work in the same way whichever method is used, because they are applied in the standard CSS way.

Applying Themes to Pages

You can apply a theme to a page in several ways, declaratively or programmatically. The simplest declarative way to apply a theme is via the <%@ Page %> directive, using the Theme or StyleSheetTheme attribute:

 <%@ Page Theme="myTheme" ... %> 

Or:

 <%@ Page StyleSheetTheme="myTheme" ... %> 

Here myTheme is the name defined for the theme.

Alternatively, you can specify a theme to use for all pages in a site using an entry in the Web.config file for your Web site:

<configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0">   <system.web> <pages Theme="myTheme" />   </system.web> </configuration> 

Again, you can use Theme or StyleSheetTheme here. You can also be more specific by using <location> elements to override this setting for individual pages or directories, in the same way as this element was used in the previous section for security information.

Programmatically, you can apply themes in the code-behind file for a page. There is only one place where you are allowed to do this — in the Page_PreInit() event handler, which is triggered very early on in the life cycle of the page. In this event you simply have to set the Page.Theme or Page.StyleSheetTheme property to the name of the theme you want to apply, for example:

 protected override void OnPreInit(EventArgs e) { Page.Theme = "myTheme"; } 

Because you are using code to do this, you can dynamically apply a theme file from a selection of themes. This technique is used in PCSDemoSite, as you see shortly.

Defining Themes

Themes are defined in yet another of the "special" directories in ASP.NET — in this case App_Themes. The App_Themes directory can contain any number of subdirectories, one per theme, where the name of the subdirectory defines the name of the theme.

Defining a theme involves putting the required files for the theme in the theme subdirectory. For CSS style sheets you don't have to worry about the file name; the theme system simply looks for a file with a .css extension. Similarly, .skin files can have any file name, although it is recommended that you use multiple .skin files, one for each control type you want to skin, and each named after the control it skins.

Skin files contain server control definitions in exactly the same format as you'd use in standard ASP.NET pages. The difference is that the controls in skin files are never added to your page, they are simply used to extract properties. A definition for a button skin, typically placed in a file called Button.skin, might be as follows:

 <asp:Button Runat="server" BackColor="#444499" BorderColor="#000000"  ForeColor="#ccccff" /> 

This skin is actually taken from the DefaultTheme theme in PCSDemoSite, and is responsible for the look of the button on the Meeting Room Booker page you saw earlier in this chapter.

Themes in PCSDemoSite

The PCSDemoSite Web site includes three themes that you can select on the /Configuration/Themes/ Default.aspx page — as long as you are logged in as a member of the RegisteredUser or SiteAdministrator roles. This page is shown in Figure 27-15.

image from book
Figure 27-15

The theme in use here is DefaultTheme, but you can select from the other options on this page. Figure 27-16 shows the BareTheme theme.

image from book
Figure 27-16

This sort of theme is useful in, for example, printable versions of Web pages. The BareTheme directory actually consists of no files at all — the only file in use here is the root StyleSheet.css style sheet.

Figure 27-17 shows the LuridTheme theme.

image from book
Figure 27-17

This brightly colored and difficult to read theme is just a bit of fun really but does show how the look of a site can be dramatically changed using themes. On a more serious note, themes similar to this can be used to provide high contrast or large text versions of Web sites for accessibility purposes.

In PCSDemoSite the currently selected theme is stored in session state, so the theme is maintained when you navigate around the site. The code-behind file for /Configuration/Themes/Default.aspx is as follows:

public partial class _Default : MyPageBase { private void ApplyTheme(string themeName) { if (Session["SessionTheme"] != null) { Session.Remove("SessionTheme"); } Session.Add("SessionTheme", themeName); Response.Redirect("~/Configuration/Themes", true); } void applyDefaultTheme_Click(object sender, EventArgs e) { ApplyTheme("DefaultTheme"); } void applyBareTheme_Click(object sender, EventArgs e) { ApplyTheme("BareTheme"); } void applyLuridTheme_Click(object sender, EventArgs e) { ApplyTheme("LuridTheme"); } }

The key functionality here is in ApplyTheme(), which puts the name of the selected theme into session state, using the key SessionTheme. It also checks to see if there is already an entry here and if so removes it.

As mentioned earlier, themes must be applied in the Page_PreInit() event handler. This isn't accessible from the master page that all pages use, so if you want to apply a selected theme to all pages you are left with two options:

  • Override the Page_PreInit() event handler in all pages where you want themes to be applied.

  • Provide a common base class for all pages where you want themes to be applied, and override the Page_PreInit() event handler in this base class.

PCSDemoSite uses the second option, with a common page base class provided in Code/MyPageBase.cs:

 public class MyPageBase : Page { protected override void OnPreInit(EventArgs e) { // theming if (Session["SessionTheme"] != null) { Page.Theme = Session["SessionTheme"] as string; } else { Page.Theme = "DefaultTheme"; } // base call base.OnPreInit(e); } } 

This event handler checks the session state for an entry in SessionTheme and applies the selected theme if there is one, otherwise DefaultTheme is used.

Note also that this class inherits from the usual page base class Page. This is necessary or else the page wouldn't function as an ASP.NET Web page.

The other thing necessary for this to work is to specify this base class for all Web pages. There are several ways of doing this, the most obvious being either in the <@ Page %> directive for a page or in the code behind a page. The former strategy is fine for simple pages but precludes the use of custom code behind for a page, since the page will no longer use the code in its own code behind file. The other alternative is to change the class that the page inherits from in the code behind file. By default, new pages inherit from Page, but you can change this. In the code behind file for the theme selection page shown earlier, you may have noticed the following code:

 public partial class _Default : MyPageBase {    ... }

Here MyPageBase is specified as the base of the _Default class, and thus the method override in MyPageBase.cs is used.




Professional C# 2005
Pro Visual C++ 2005 for C# Developers
ISBN: 1590596080
EAN: 2147483647
Year: 2005
Pages: 351
Authors: Dean C. Wills

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net