Themes in ASP.NET 2.0 — Part 1

A theme is a collection of property settings that allow you to define the look of pages and controls, and then apply the look consistently across pages. We can see themes implemented everywhere not only in Web pages but also in each and every application and even the Operating system Windows XP supports Themes.

Theme settings can be applied to an entire application (Web site), to a page and its controls, or to an individual control. For example Windows XP comes with three distinct themes "blue", "Olive Green" and "silver Grey". Selecting each theme changes the look and feel of each and every control from the desktop to the task bar to the windows of each and every application.

At first themes were developed for desktop applications and they were known as skins. It was possible to download particular skins based on popular genre like movies or era or style and then apply the same to the object such as an application or even the entire operating system. Later on Web sites have become one of the major tool for each and every user and it is not hard to see that they come with colorful styles which is defined by the developer. These styles are predefined and created by the developer of the Website and it remains unchanged through out the life of the Website. The developer might change the style of the pages from time to time but it is a time consuming process and needs careful planning and layout to give that exhilarating look and feel.

Now, portals are replacing Websites. Portals are Websites but they come with dynamic content in small windows known as Web parts or widgets. We had discussed the feature of Web Parts in ASP.NET 2.0 earlier. Please refer to this links to read about Web parts. . Portals can be customized on a user wise basis i.e. each user will be able to define the content and the lay out of the site and the settings will be saved and customized and this is known as preferences.

Let us see how ASP.NET 2.0 provides the facility to implement themes in Websites or for particular Web pages without any additional overhead that was too time consuming in earlier versions or was hard to implement and didn't support flexibility or dynamic rendering on the fly by the user.

Themes available in ASP.NET and the various types of themes.

ASP.NET 2.0 comes with some predefined themes or global themes that can be applied to any ASP.NET Web application. For example, ASP.NET includes a named theme called "BasicBlue" that defines a common style for most ASP.NET server controls.

It is also possible to create user defined themes, also called page themes, and this can be applied to a site or to individual pages. A page theme is defined in a special folder of that Website that is created for the application. The default path is \Themes\. In the page theme, control skins, or settings for individual controls such as a Button, Label, TextBox, or Calendar control, and so on are defined. It is possible to define a control skin for each type of control that is used in the Web application, as well as setting the control's properties so that all the controls have a similar look. The page theme can also include graphics for controls such as the TreeView control, as well as style sheets. Style sheets can be used within a theme to tailor the page's basic appearance.

Page themes can also include graphics. For example, part of a page theme might include a skin for a TreeView control, including the graphics used to represent the expand and collapse buttons. In this case, the graphics files for the theme can be included in the same folder "\Themes\ThemeName" as the page theme.

Control Skins

There are 2 types of Controls skins. They are default skins and named skins. Let us see what they are and how they differ.

Default Skin:-

A default skin is one which is automatically applied to all controls of the same type. For example, if a default skin is created for a Calendar control, the skin applies to all Calendar controls on pages where the theme is called. Default skins are matched exactly by control type, so that a Button skin applies to all Button controls, but not to "LinkButton" controls or to controls that derive from the Button object.

Named Skin:-

A named skin is a control skin with a specific "SkinID" property assigned to it. Named skins do not automatically apply to controls by type. Instead, you explicitly apply a named skin to a control. Creating named skins allows you to set different skins for different instances of the same control in an application.

Note:- Themes can be used to define properties that concern a page or control's appearance. It is possible to set those properties marked as "themable". Most of the properties of each control explicitly specify control behavior rather than appearance and they do not accept theme values. For example, it is not possible to set a Button control's CommandName property by using a theme. Similarly, it is not possible to apply a theme to set a GridView control's AllowPaging property or DataSource property. The exact properties that can be set using themes are defined by the control itself. Such properties are said to be "themable."

Themes and StyleSheetThemes Attributes.

There are 2 types of themes and we will see in detail. When a theme is applied to a page it happens that all the controls in the page will use that theme and in some cases it might be necessary that we would like to disable the themes to particular controls so that we can apply our own theme. Hence there are two ways of applying themes and it is through the theme attribute property.

The first one is StyleSheetTheme and this can be declared as an attribute in the page declaration. This property can be set to the name of a valid theme. The second one is Theme and this is also declared as an attribute in the page declaration and this property can be set to the name of a valid theme. The difference with a StyleSheetTheme is that any attributes local to the page or a control will take precedence over the same attributes listed in the StyleSheetTheme. Setting the theme attribute, on the other hand, will ensure that the attributes of the theme override anything on the page or controls, or in a StyleSheetTheme.

As we all know that Themes are enhancements to the Cascading Style Sheets (CSS) from earlier versions. But there should be some difference between themes and CSS Style Sheets. Let us compare them and see how they differ.

Difference between Themes and CSS Style Sheets

Themes are similar to CSS style sheets in that both themes and style sheets define a set of common attributes that apply to any page where the theme or style sheet is applied. However, themes differ from style sheets in the following ways:

1. Themes can define many properties of a control or page, not just a specific set of style properties. For example, using themes, you can specify the graphics for a TreeView control, the template layout of a GridView control, and so on.


2. Themes can include auxiliary files, such as graphics.


3. Themes do not cascade the way style sheets do. For example, theme property values always override local property values.


4. Themes can include a CSS file within the theme folder. In this case, the style sheet definitions are applied along with other property values defined in the theme.

Having seen a lot about themes in ASP.NET 2.0 let us apply these concepts to a Web site and see the behavior of the different types of theme attributes.

In the next article we will develop a small Web site, apply themes to it and see how they can be modified to suit the user's requirement.

Disclaimer

"Since this article was written when the technology .NET 2.0 is still in development, there is no guarantee that the features explained will be there in the final version and is subject to change. This article should be taken only for getting a general idea of what is going to be available in .NET 2.0 and not the actual features that will be a part of the final release of .NET 2.0"

To be continued...