One of the many innovations of the ASP.NET 2.0 Framework is the built-in Theming mechanism. 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 eliminates 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 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 | |
In r.a.d.treeview Themes reside in the App_Themes folder right under the root directory of the application. This folder has two sub-folders:"Img" (containing image files), "Styles" (containing the CSS files) and a skin file.
The screenshot below shows an App_Themes folder with two sub-folders named: "Apple" and "Blue3D".
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.
The source code below is an example of definitions for a skin file for Telerik RadTreeView and Telerik RadMenu.
| |
Copy Code |
|
<%@ Register TagPrefix="rad" Namespace="Telerik.WebControls" Assembly="RadTreeview.Net2" %>
<%@ Register TagPrefix="radM" Namespace="Telerik.WebControls" Assembly="RadMenu.Net2" %>
<rad:RadTreeView
runat="server"
Skin="MSDN/Blue"
ImagesBaseDir="~/TreeView/Img/WindowsXP/"
.../>
<radM:RadMenu
runat="server"
CssFile="~/app_themes/CssBlue/styles/menu.css"
ImagesBaseDir="~/app_themes/CssBlue/Img/"
.../>
|
The properties of controls defined in the theme automatically override the local property value for a control of the same type in the target page with the Theme applied.
See Also