Themes in ASP.NET

<<Previous  Next>>

Themes
Characteristics of ASP.NET 2.0 Themes
Creating a Simple Theme

Themes

One of the neat features of ASP.NET 2.0 is themes, which enable you to define the appearance of a set of controls once and apply the appearance to your entire web application. For example, you can utilize themes to define a common appearance for all of the CheckBox controls in your application, such as the background and foreground color, in one central location. By leveraging themes, you can easily create and maintain a consistent look throughout your web site. Themes are extremely flexible in that they can be applied to an entire web application, to a page, or to an individual control. Theme files are stored with the extension .skin, and all the themes for a web application are stored in the special folder named App_Themes.

The implementation of themes in ASP.NET 2.0 is built around two areas: skins and themes. A skin is a set of properties and templates that can be applied to controls. A theme is a set of skins and any other associated files (such as images or stylesheets). Skins are control-specific, so for a given theme there could be a separate skin for each control within that theme. Any controls without a skin inherit the default look. There are two types of themes:

• Customization themes: These types of themes are applied after the properties of the control are applied, meaning that the properties of the themes override the properties of the control itself.
• Stylesheet themes: You can apply this type of theme to a page in exactly the same manner as a customization theme. However, stylesheet themes don’t override control properties, thus allowing the control to use the theme properties or override them.

Characteristics of ASP.NET 2.0 Themes

Some of the important characteristics of ASP.NET 2.0 themes are:

• Themes make it simple to customize the appearance of a site or page using the same design tools and methods used when developing the page itself, thus obviating the need to learn any special tools or techniques to add and apply themes to a site.
• As mentioned previously, you can apply themes to controls, pages, and even entire sites. You can leverage this feature to customize parts of a web site while retaining the identity of the other parts of the site.
• Themes allow all visual properties to be customized, thus ensuring that when themed, pages and controls can achieve a consistent style.
• Customization themes override control definitions, thus changing the look and feel of controls. Customization themes are applied with the Theme attribute of the Page directive.
• Stylesheet themes don’t override control definitions, thus allowing the control to use the theme properties or override them. Stylesheet themes are applied with the StylesheetTheme attribute of the Page directive.

Now that you have an understanding of the concepts behind themes, the next section provides you with a quick example of creating a theme and utilizing it from an ASP.NET page.

Creating a Simple Theme

To create a theme and apply it to a specific page, go through the following steps:

1. Create a folder called ControlThemes under the App_Themes folder.
2. Create a file with the extension .skin and add all the controls (that you want to use in a page) and their style properties. Or you can also create individual skin files for each and every control. When you are defining skin files, remember to remove the ID attribute from all of the controls’ declarations. For example, you can use the following code to define the theme for a Button control:
   <asp:Button runat=”server” BackColor=”Black” ForeColor=”White”
   Font-Name=”Arial” Font-Size=”10px” />
3. Name the skin file Button.skin and place it under the ControlThemes folder. Once you have created the .skin file, you can then apply that theme to all the pages in your application by using appropriate settings in the Web.config file. To apply the theme to a specific page, all you need to do is to add the Theme attribute to the Page directive as shown below:
   <%@Page Theme=”ControlThemes”%>

That’s all there is to creating a theme and utilizing it in an ASP.NET page. It is also possible for you to programmatically access the theme associated with a specific page using the Page.Theme property. Similarly, you can also set the SkinID property of any of the controls to specify the skin. If the theme does not contain a SkinID value for the control type, then no error is thrown and the control simply defaults to its own properties. For dynamic controls, it is possible to set the SkinID property after they are created.

<<Previous  Next>>

More Related links