ASP.NET Themes and Skins
ASP.NET Themes and Skins Overview(MSDN)
Theme and StyleSheetTheme
http://blogs.effectivexaml.net/DaveWheeler/2005/10/theme-and-stylesheettheme.html
What is a StyleSheetTheme?
http://weblogs.asp.net/vimodi/articles/WhatIs_StyleSheetTheme.aspx
A Look at Themes
http://www.gridviewguy.com/ArticleDetails.aspx?articleID=151
1.Theme
Theme由位于一个特殊的路径下的skin,css,image等资源构成,App_Themes下的每一个
foleder包含一个Theme.
2.Theme的作用域:
page theme
Create a new folder named App_Themes in your Web site.
global theme
iisdefaultroot\aspnet_client\system_web\version\Themes
If an application theme has the same name as a global application theme, the page theme takes precedence.
3.Theme的使用:
通过web.config使用
<system.web>
<pages theme=”<ThemeName>”/>
<system.web>
或
<system.web>
<pages StyleSheetTheme=”Themename” />
</system.web>
或通过代码实现:
void Page_PreInit()
{
Page.Theme = profile.XXX;
Page.Theme = “Green”;
}
4. Theme and StyleSheetTheme的区别:
Simply put, the Theme is applied AFTER the properties are applied to the server-side control,
which means that the settings in the Theme override those of the control. A StyleSheetTheme
is applied BEFORE the properties from the server-side control, and are therefore overridden
by the properties on the control.
For example if StyleSheetTheme contain following default Label skin.
<asp:Label runat=”server” Text=”StyleSheetLabel” Font-Size=”Small” BackColor=”Red” ></asp:Label>
and Page Which has StyleSheetTheme and Theme defiened contain a Label contol as
<asp:Label runat=”server” Text=”PageLabel” Font-Size=”X-Large” ></asp:Label>
and Theme contain following default label skin.
<asp:Label runat=”server” Text=”ThemedLabel” ></asp:Label>
Then the resultant Label shown will look like.
<asp:Label runat=”server” Text=”ThemedLabel” Font-Size=”X-Large” BackColor=”Red” ></asp:Label>
2.Skin
.skin文件包含了一些control属性的定义,如:
skin分为default skin和named skin
default skin被用于每一类control,
<asp:button runat=”server” BackColor=”lightblue” ForeColor=”black” />
control通过SkinId属性来使用named skin,同类control的不同实例可以使用不同的named skin
<asp:imagebutton runat=”server” Imageurl=”Images/button-login.gif” skinid=”login” />
<asp:imagebutton runat=”server” id=”LoginButton” CommandName=”Login” AlternateText=”login” skinid=”login” CssClass=”button”/>
Skin和CSS的比较:
Skin可以用来设置Control的属性,如Style,CSS无此功能.
二者可以协同工作,如,设置Textbox的外观有两种等效的做法:
1.使用Skin来设置control property
In Default.skin:
<asp:TextBox runat=”server” BackColor=”#F7DE8A” BorderColor=”#933126″ BorderStyle=”Solid” BorderWidth=”1px” />
2.使用Skin + CSS
In Styles.css: .textBox {border:1px solid #933126; background-color:#F7DE8A;}
In Default.skin: <asp:TextBox runat=”server” CssClass=”textBox” />
