asp.net themes and skins are new in ASP.net 2.0, and using the theme and appearance feature of ASP.net 2.0, you can break styles and layout information into separate filegroups, collectively, "Themes." The theme can then be applied to any site, affecting the appearance of pages and controls in the site. This way, you can easily maintain style changes to your site by changing the theme without having to edit the pages of the site. You can also share topics with other developers. Application of asp.net 2.0 "theme and Appearance" features easy to achieve the site beautiful control.
ASP.net provides features that you can customize the appearance or style of pages and controls in your application. Control supports the Style object model, which is used to set style properties such as font, border, background color, foreground color, width, height, and so on. Control also fully supports cascading style sheets (CSS) that can separate style settings from control properties. You can define the style information as a control property or a CSS, or you can define this information in a separate filegroup named Theme to apply to all or part of the application's pages. Each control style is specified as Skin in the theme.
Theme, which provides an easy way to define style settings for controls and pages in your site, independent of the application's pages. The advantage of multiple topics is that you can design your site regardless of the style, and you do not need to update the page or application code later when you apply the style. In addition, you can obtain custom themes from external sources to apply style settings to your application. The advantage of a theme is that the style settings are stored in a single location and can be maintained independently of the application that applies the theme.
The following example shows a page that has the same theme, which is used to specify control style settings. Note that the page itself does not need to contain any style information. At run time, the theme automatically applies style attributes to controls on the page.
Create a new Web project, click "Add New Item", select "Theme Appearance" and name "Button.skin", and click "Add" button, as shown in Figure 1
Figure 1
When you click the Add button, the following dialog box pops up. 2 Ask if you want to add a theme file to the "App_Themes" folder, in which the subject file must be stored under the App_Themes folder in the root directory, and the theme is made up of named subdirectories under this folder. The subdirectory contains one or more collections of skin files with the. skin extension. A theme can also contain a subdirectory of a static file such as a CSS file and/or an image. We click Yes to add a theme named "button" to the Web. As shown in Figure 3
Figure 2
Figure 3
We can see that there is a theme button created under the App_Themes folder, there is a Button.skin file under the button folder, this is the theme file that we added, double click Button.skin file, add skin setting code for it.
The code is as follows:
<asp:button runat= "Server" bordercolor= "yellow" backcolor= "yellow" borderstyle= "dotted"/>
<asp:button runat= "Server" bordercolor= "Blue" backcolor= "white" skinid= "blue"
<asp:button runat= "Server" bordercolor= "Red" backcolor= "Red" width= "" borderwidth= "2px" skinid= "Red"
From the code we can see that we set three skin themes for the button control, , this is the default skin, the default setting when we use the button control in a Web page, ,
As you can see from the previous example, the content of the skin file is nothing more than a control definition if the definitions appear on the page. A skin file can contain multiple control definitions, for example, a definition for each type of control. Control properties defined in a topic automatically override local property values for controls of the same type applied to the theme's target page.
Themes can be at the application level or at the machine level (all applications are globally applicable). As mentioned above, application-level topics are placed in the App_Themes directory under the application's root directory. The global theme is placed in the ASP.net installation directory under ASP. The "Themes" directory under the Netclientfiles folder, for example,%windir%\microsoft.net\framework\ \asp. Netclientfiles\themes. For IIS Web sites, the location of the global theme is Inetpub\wwwroot\aspnet_client\system_web\ \themes.
After we've set up the application theme, how do I assign a theme to the page? We add 4 button buttons to the page, set as shown in Figure 4
Figure 4
The code is as follows:
<%@ Page language= "C #" autoeventwireup= "true" theme= "button" codefile= "Default.aspx.cs" inherits= "_default"%>
! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Untitled Page </title>
<body>
<form id= "Form1" runat= "Server"
<div>
<asp:button id= "Button1" runat= "Server" text= "button"/>
Button control for default skin <BR/>
<BR/>
<BR/>
<asp:button id= "Button2" runat= "Server" text= "button" skinid= "Blue"/>
Name the button control of the skin skinid= "Blue" <BR/>
<BR/>
<BR/>
<asp:button id= "Button3" runat= "Server" text= "button" skinid= "Red"/>
Name the skin skinid= "Red" button control <BR/>
<BR/>
<BR/>
<asp:button id= "Button4" runat= "Server" backcolor= "Darkorange" bordercolor= "#C000C0"
Forecolor= "Yellow" text= "button" width= "174px" enabletheming= "False"/>
Disable button control <BR/> for theme
</div>
</form>
</body>
As shown above, you can specify a topic for a single page by setting the <%@ page theme= button%> directive to the name of the global theme or application-level theme (the name of the folder in the Themes or App_Themes directory). A page can only apply one theme, but there can be multiple skin files in the theme that apply the style settings to the controls on the page. This allows the properties set in Button.skin to be applied to the page. You can also define applied topics for all pages in your application by specifying the <pages theme= "..."/> section in Web.config. To deselect this topic for a specific page, you can set the Theme property of the page directive to an empty string (""). Note that the master page does not apply a theme.
There are 4 button buttons on the page, The first three applied the theme set in the Button.skin file, and the Button1 control applied the default skin set in Button.skin; the Button2 control applied the named Skin Button.skin in SkinID as blue; Button3 Control applied BUTTON.S Named Skin SkinID Blue in kin, it is also easy to specify a skin theme for the control, as long as you specify the corresponding SkinID property, in Figure 5
Figure 5
By default, the controls in the skin file define all controls of the same type applied to the pages of the application affected by the theme. However, you may want controls of the same type to not use skins in your application. For example, you might want the Button4 control to not use a theme set in the Button.skin file. Then we can also disable the subject in the example Button4 by setting the EnableTheming property to False, you can exclude specific controls from the theme, <asp:button id= "Button4" runat= "Server" Backcolor= "Darkorange" bordercolor= "#C000C0" forecolor= "Yellow" text= "button" width= "174px" enabletheming= "False"/>.
Run this program, as shown in Figure 6
Figure 6
