<%@ Page Language="C#" MasterPageFile="~/aspnet/section.master" %> <%@ Register TagPrefix="Acme" TagName="SourceRef" Src="~/util/SrcRef.ascx"%> <%@ Register TagPrefix=Acme Namespace=Acme %>

Server-side Styles using Themes

A Theme is meant to be applied to an application after the application has been created, possibly even after the site is already hosted on a production server. The person applying the theme to an application may not even be the same person who developed the application. For example, it is common to have application developers and web site designers working on different aspects of the site. When a Theme is applied to an application, the style properties in the Theme definition override property values on the target controls in the application's pages.

On the other hand, it is also common for developers to factor out stylistic information separately from application behavior. One example of this is the use of Cascading Style Sheets (CSS) to define control and markup styles in a separate file. You can use Themes for this purpose as well, by applying the Theme as a sort of server-side stylesheet. When applied in this way, the style properties in the Theme definition set the default value for controls in the application, but these properties may also be set on the control in the page to override the Theme definition.

Declarative Server-side Styles

When a Theme is applied by setting the Theme attribute of the @Page directive or <pages/> section of configuration, the properties of skins in the theme override same-named properties on the target controls in page. The example below shows a Label in a page with its ForeColor property set to blue. In the applied Theme, the Label skin defined the ForeColor property to orange. When you run the page, notice that the Theme definition wins over the local control property, and all Labels render as orange.

A Theme definition can be applied as a server-side style by setting the StyleSheetTheme attribute the @Page directive or <pages/> section of configuration to the name of the Theme. When applied as a StyleSheetTheme, Theme properties may be overridden by controls in the Page. The example below shows the Theme from the previous example applied as a StyleSheetTheme. Notice that the ForeColor property defined on the page wins over the Theme definition, so that the Label now renders as blue.

Theme and StyleSheetTheme Precedence

A StyleSheetTheme is meant to be applied during application development, as a means to factor our style information from pages in order to keep the behavior of the application separately maintainable from the look-and-feel of the application. You may still want to apply Themes to an application with a StyleSheetTheme applied. If both a Theme and StyleSheetTheme are applied to an application, the properties of controls are applied in the the following order:

StyleSheetTheme properties are applied first
Control properties in the page are applied (overrides StyleSheetTheme)
Theme properties are applied last (overriding both control properties and the StyleSheetTheme)

The following example demonstrates the order of precedence described above.

Visual Web Developer Support

Visual Web Developer includes design-time support for StyleSheetThemes. When a StyleSheetTheme is applied to a page, the Design View in Visual Studio reflects the application of the StyleSheetTheme in the rendering preview for controls. You can also choose from the list of available SkinID values for a control by choosing the Auto Format... option in the control's smart task panel (only supported for certain controls). The Auto Format dialog shows the list of available SkinID values from the StyleSheetTheme along with a preview of the control with the chosen skin applied. When you choose to apply one of these values, the designer persists the SkinID property for the control.