|
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.
C# CSS Stylesheets in Themes
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.
C# Images in Themes
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.
C# Theming Collection Properties
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.
C# TreeView LevelStyles in a Theme
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.
C# Theming Template Properties
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.
C# Data Bindings in Themes
|