ASP.net 2.0 easy to achieve site change skin

asp.net

　　First, Introduction:

With themes we can easily change the style of controls and pages without having to modify our code and page files. Themes files are separately placed under 1 App_Themes folders and are completely separate from your program.

　　Ii. How to use themes and skins:

Let's look at a very simple example:

App_themes\default\1.skin File Code:

Default.aspx: File code:

<%@ Page language= "C #" theme= "Default"%>
! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Page with Example Theme applied

You can see that we didn't write a control style code in default.aspx, but running to find the word on the label became Bold Red, which is one of the most basic theme examples.

　　App_Themes folder:

The App_Themes folder is located under the root directory of the program, App_Themes must be a subfolder of the theme name, and a subfolder can contain multiple. Skin and. css files. The following figure establishes 2 theme, named Default and DEFAULT2:

　　Using themes

1. Apply theme in 1 pages:

If you want to apply Theme to a 1 page, modify the <%@ page theme= "..." directly in the ASPX file%>, such as you want this page to apply Default2 Theme, set <%@ page theme= "Default2"%> on OK

2. Apply with 1 theme on all pages:

If you want to use the same theme on all pages, add a sentence node in web.config.

3, let the control not apply theme:

In the 1th example, we see that the style of the 2 labels has changed, that is, the style of the. skin file all the labels on the page work. But sometimes we want a 1 label to not apply to the style in skin, when you just set the label's EnableTheming property to False.

Maybe you want different labels to show different styles, you can just set the label's SkinID attribute, see the following example:

App_themes\default\1.skin

Deafult.aspx

<%@ Page language= "C #" theme= "Default"%>
! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Page with Example Theme applied

After running, you will find that 2 labels show different styles.

4. Other methods:

It has been said that using the <%@ Page theme= "..."%> in the ASPX file header uses Theme, and using this method to apply the style in Theme will overwrite the control property style you write in aspx. Like what:

App_themes\default\1.skin

Default.aspx

<%@ Page language= "C #" theme= "Default"%>
! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Run the result, all the label's ForeColor are red.

Using the <%@ Page stylesheettheme= "..."%> application theme will not overwrite the attribute style you wrote in the ASPX file:

Control applies the Style property in the following order:

A, StyleSheetTheme style of reference

B, code-set control properties (overlay StyleSheetTheme)

C, theme reference style (covering the front 2)

The theme contains CSS:

The. css file can also be used in theme, and when you put a. css file in a 1 theme directory, you will automatically apply your. css in a page that uses this theme.

　　Third, the background code easy for the site to change the house skin

All of the above are in the ASPX file or Web.config application of theme, and in a blog such as each user has a different skin site in the above method to implement the skin is obviously inconvenient.

The following describes how in the background code in the dynamic reference theme to solve the above situation, theme must be in the first page requested by the application, so we have to write in the Page_PreInit event code, the code is very simple, on the 1 sentence:

Page.theme = "...";

Here we can easily realize that each user has a different skin by reading the different theme names of each user setting from the database.