ASP. NET Theme

Theme is a series of attribute settings that can be used to define the appearance of pages and spaces. It can control some web pages, the entire Web application, or even all web applications on a server.

Theme and control skin
Theme consists of a series of elements: Skin, css, images, and other resources. It contains at least skin. Theme is defined in a special directory of web server or web site.

Skin
A skin file has a. skin file extension, which contains attribute settings for spaces such as button, label, textbox, and calender. The space skin settings are like the space's own makeup, but only contain the values of the attributes you want to set. The skin settings of a button are as follows:
<Asp: button runat = "server" BackColor = "lightblue" ForeColor = "black"/>
You should create it in the theme directory. skin file,. the skin file can contain one or more skins set for one or more controls. You can define a separate file for each control, you can also define the setting that only one file contains the skin of all spaces.

There are two controls for skin default skin and named skin:
When theme is applied to a page, the default skin automatically applies to all controls of the same type on the page. What kind of skin is the default skin? The criterion is whether the SkinID attribute exists. If not, the default skin is used. For example, if you create a default skin for the calendar control, this skin applies to all calendar controls on the page using theme. (By default, the skin matches the control type. In this way, the button skin applies to all buttons, but does not apply to the control objects that inherit the button, such as LinkButton ).

A named skin has a SkinID attribute. The naming skin does not apply to the control automatically through the type. You must explicitly apply a named skin by setting the SkinID attribute of the control. Using Named skin allows you to set different skins for different instances of the same control.

Stacked Style Sheets
The themesample can contain a stacked Sample Table (.css) file. When you put a. CSS file under the theme directory, the style sheet will automatically become part of theme. You can create a. CSS file in the same directory as the skin file to define the style sheet.

Images and other resources
Theme can contain images and other resources, such as script files or sound files. For example, if your theme contains the skin of a TreeView control, you can include some images to indicate the buttons for its extension or collapse.

Generally, resource files and skin files are in the same directory, but they can be anywhere in the Web application, such as a sub-directory in the theme directory. If you reference a resource file under the sub-directory of theme, use a path similar to the following Image control:
<Asp: Image runat = "server" ImageUrl = "ThemeSubfolder/filename. ext"/>
You can also store your resource files in a directory other than theme. If you use (~) To reference resource files. web applications will automatically find these images. For example, if you place resource files in a sub-directory of your application, you can use the following path :~ /SubFolder/filename. ext to reference the resource file, as shown below:
<Asp: Image runat = "server" ImageUrl = "~ /AppSubfolder/filename. ext "/>

Theme range

You can define theme for a single Web application, or define a global theme for all applications on the Web Server. After theme is defined, you can set the Theme or StyleSheetTheme attribute of the Page through @ Page, you can also set the Pages element in the settings file of the application to apply theme to all Pages. If the <pages> element is defined on the Machine. Config file. This theme will be applied to all the pages of all applications on this server.

Page Theme
Page Theme is a sub-directory of \ App_Themes, including the control skin, style sheets, image files, and other resources. Each Theme is a different subdirectory of \ App_Themes. The following sample code is a typical Page Theme, which defines two Theme names: BlueTheme and PinkTheme.
MyWebSite
App_Themes
BlueTheme
Controls. skin
BlueTheme.css
PinkTheme
Controls. skin
PinkTheme.css

Global Theme
Global theme is a theme that can be applied to all Web sites on the server. When you maintain multiple websites on one server, global theme allows you to define the overall style of these websites.
Global theme is similar to Page theme and includes attribute settings, style sheet settings, and images. However, global theme is stored in the global directory of the Web Server and named \ Themes. The global theme can be referenced by any website or any page on this server.

Sequence of Theme settings
You can specify the sequence of theme settings and set theme settings to take over local control settings.

If you set the Theme attribute of a page, the control settings in theme and the page settings on the page will be merged into the final settings of the control. If a control property is set on the page and theme, the control settings in theme overwrite the control settings on the page. This policy allows the pages to maintain a consistent style. For example, it allows you to apply theme to a page created in ASP. NET of a previous version.

In addition, you can apply theme to the page as a style sheet and set the StyleSheetTheme attribute of the page. In this case, the settings on the local page take precedence over those in theme. This is a model that uses a stacked style sheet. If you want to set a single control attribute and apply theme to control the overall performance, you can apply theme as a style sheet.

Attributes that can be set using Theme
As a general rule, you can use theme to define attributes related to the appearance or static content of a page or control. You can only set control classes whose ThemeableAttribute is set to true.
The property that explicitly defines space behavior does not accept the value set by theme. For example, you cannot set the CommandName attribute of a Button through Theme. Similarly, you cannot use theme to set the AllowPaging attribute or DataSource attribute of the GridView control.

Theme and stacked Style Sheets
Theme is similar to Cascading Style Sheets. They all define a general property set that can be applied to any page. However, theme and style sheet have the following differences:

• Theme can define many attributes of a control or page, not just the style attribute. For example, with theme, you can set images for the TreeView control, set template design for the GridView control, and so on.
• Theme can contain images
• Theme and style sheet have different overwriting methods. For example, if this parameter is saved, the attribute value overwrites the local attribute value unless you apply theme as a style sheet.
• Each page can only apply one Theme. You cannot apply multiple theme to one page. Unlike a style sheet, you can apply multiple Theme to one page.