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

Contents of a Theme and Skin

As demonstrated in preceding sections, a Skin file contains control definitions with property values to apply to controls of the same type in the application. This section discusses additional details about what is valid content to add to a skin file or Theme.

Themable Properties

The control definitions in a skin file can only contain values for properties that are marked as Themeable. Each control defines the set of properties that may be themed using the ThemeableAttribute on the property. Adding a property that is not Themeable to a skin file results in an error. A control itself may also be excluded from a Theme, for example data source controls are not themeable. By default, the ID property is not themeable for any controls. All properties are themeable by default unless a control specifies otherwise. To check whether a given property is themeable for a control, refer to the .NET Framework reference documentation.

Using CSS in Themes

A Cascading Style Sheet (CSS) may be added to a Theme by placing it under the named Theme subdirectory. The CSS stylesheet will be applied to all pages with that theme applied, provided the page has a <head runat="server"/> control defined. You can name the CSS file anything you want as long at it has the .css extension. A Theme may contain multiple CSS files as well. When the page contains references to CSS files (using a <link rel="stylesheet" href="..."/> tag in the <head/> element), any CSS files in the Theme are applied after the page's stylesheets.


Using Images in Themes

A Theme can also contain images that are referenced by control definition in skin file. References to images in skins should used relative paths to the images folder under the Theme directory, so that the skin file and images can be easy moved together to other applications. At runtime, the paths to images are re-based so that the references are relative to the control in the target page instead of the skin file. The following example demonstrates a Theme with an images subdirectory.


Theming Control Collections

Most of the properties you will set in a skin will be simple-valued properties such as Font-Name, Width, and BackColor. However, you can also skin collection properties. Skinning a collection property does not apply the properties to items in the collection of the target control. Rather, it replaces the collection in its entirety when using Themes and merges the collection when using StyleSheetThemes. The following example demonstrates the Items collection of a DropDownList control defined in a skin file.


This is also useful for certain collection properties that contain collections of styles, such as the LevelStyles property of the TreeView control or LevelMenuItemStyles, LevelSubMenuItemStyles or LevelSelectedStyles properties of the Menu control.


Theming Control Templates

You can also apply template properties in a skin file. Like collections, defining a template property in a skin file does not theme individual items in the target control's template, but instead replaces the entire template contents. This is useful for dramatically altering the layout of a templated control through the application of a Theme or StyleSheetTheme.


DataBindings and Expressions

Note that data bindings using <%# Eval %> or <%# Bind %> are also valid in a theme template, however arbitrary code data bindings or expressions are not allowed.