Theme and Skin in ASP. NET

Theme is a set of many attributes that allow you to define the appearance of pages and controls. You can apply these attributes on a web application page or the entire web application, or a server that spans multiple web applications to provide consistent appearances.

 

Theme and Control Skins

==============================

Theme is composed of a series of elements, including skin, cascading style sheets (CSS), images, and other resources. A Theme must have at least skin. theme is defined in a specific folder of your site or your web server.

 

Skin

---------------------

The suffix of the skin file is. skin. This file contains the property configuration of controls such as Button, Label, TextBox, or Calendar. the skin configuration of the control is similar to that of control markup, but it only contains the attributes you want to use as part of the attributes. for example, the following is the skin of a button control:

<asp:button runat="server" BackColor="lightblue" ForeColor="black" />

 

You can create. the skin file is in the Theme folder. one. the skin file can contain the skin of one or more controls. you can define skin to a separate file, or define all skin of a theme to a separate file.

 

There are two types of controls: default skins and named skins:

• When a theme is applied to a page, the Default skin is automatically applied to all controls of the same type. if a control skin does not have the SkinID attribute, It is a default skin.
• Named skin is a control skin with the SkinID attribute set. named skin is not automatically applied to the control by type. instead, you need to apply a named skin to a control by setting the SkinID attribute of the control. creating a named skin allows you to set different skin for different instances of the same control in an application.

Cascading Style Sheets

---------------------

The topic also includes a css file. When you place a css file in the theme folder, the style sheet is automatically applied as part of the theme.

 

Theme Graphics and Other Resources

----------------------

Themes can also include graphics and other resources, such as script files or sound files. for example, your page theme may include a skin for the TreeView control. As a part of this theme, You can include images used to represent the expand and collapse buttons.

 

Typically, theme resource files are in the same folder as the skin file, but they can also exist in other places of the web application, such as the sub-folder of the theme folder. to reference a sub-Folder resource, you can use a path like the following example:

<asp:Image runat="server" ImageUrl="ThemeSubfolder/filename.ext" />

 

You can also reference resource files outside the theme folder (~) If the syntax references the resource file, the Web application will automatically find the image. for example, if you put a theme resource in a sub-folder of your appliction, You can reference your resource file using a path in this form:

<asp:Image runat="server" ImageUrl="~/AppSubfolder/filename.ext" />

 

Difference between Theme and Cascading Style Sheets

==================================

Both Theme and Cascading Style Sheets can define a series of common attributes that can be applied to any page. However, they are different in the following aspects:

• Theme can define many attributes for a control or page, not just a style attribute. For example, you can define images for the TreeView control, as well as the template layout of the GridView control.
• Theme can include image files.
• Theme is not stacked like a style sheet. by default, any attribute value defined by the Theme attribute on the page will overwrite the attribute value declared by the control, unless you explicitly use the StyleSheetTheme attribute to apply theme.
• Only one theme can be applied on each page. You cannot apply multiple theme on another page, instead of using multiple style sheet as a style sheet.

 

Translated from:

ASP. NET Themes and Skins

Http://msdn.microsoft.com/en-us/library/ykzx33wh.aspx