Among the numerous innovations of the .NET 2.0 Framework are the so-called Themes. They enable the separation of a control's look from its functionality. As a result, developers will be able to completely change the look of a control in an easy declarative manner. This improves the maintainability of your applications and eliminate the unnecessary duplication of code for shared styles.
Each Theme is a folder with one .skin file and any additional resources (such as .CSS files, images, etc). The skin file contains XML tags that are used to configure the controls on the page.
Assigning a Theme to a Page
An individual page can be assigned a Theme by setting the <%@ Page Theme="..." %> directive to the name of a global or application-level. A page can only have one Theme applied, but there may be multiple skin files in the theme that apply style settings to controls in the page.
 |
You can also define the applied theme for all pages in an application by specifying the <pages theme="..."/> section in Web.config. To unset this theme for a particular page, you can set the Theme attribute of the Page directive to empty string (""). |
Using Themes global to the system
Global Themes reside in a "Themes" folder under an ASP.NETClientFiles folder under the ASP.NET installation directory, for example %WINDIR%\Microsoft.NET\Framework\<version>\ASP.NETClientFiles\Themes. The location of global themes is Inetpub\wwwroot\aspnet_client\system_web\<version>\Themes for IIS web sites.
Using Themes local to the application
Local Themes reside in the App_Themes folder directly under the application root directory. A Theme consists of a named subdirectory which may contain CSS file and/or subdirectories for static files like images. Each theme should have one or more skin files, with the .skin extension. The contents of a skin file are simply definitions of the properties of the controls, used to specify how the controls will appear and behave on the page. A skin file can contain multiple control definitions, for example one definition for each control type.
Skins can be organized in a variety of ways inside a Theme's skin files. Since a Theme can contain multiple skin files, you might divide up named skins into separate files, where each skin file contained multiple control definitions with the same SkinID.
The example below shows two ways how skin files are arranged in the Theme folder.
| Three skin files in a Theme each named according to a particular SkinID value |
Skin files grouped by control type, where each skin contains a set of skin definitions for a particular control |
|
 Copy Code |
|
/MySite1
/App_Themes
/MyThemes
Default.skin
Yellow.skin
Green.skin | |
|
Copy Code |
|
/MySite1
/App_Themes
/MyThemes
radmenu.skin
radpanelbar.skin
rad.tabstrip.skin | |
You can define different styles for controls of the same type in a skin file by creating separate definitions of the control. You can set a separate SkinID property on these control definitions to a name of your choosing, and then set this same SkinID value on controls in pages that should have this specific skin applied. In the absence of a SkinID property, the default skin (one without a SkinID property set) applies.
 |
At present Telerik RadCalendar uses the default themes provided by the .NET 2.0 Framework! |
See Also