基本概念:
Theme 和 Skin用以定义页面中各个控件的显示样式,如字体大小,前/后景色等等。
一个Theme可以包括多个Skin,一个Skin可以定义多个控件的样式。目的:
使得页面样式的制作可以与页面制作分工进行。
使用:
目录结构:
如果一个Web应用有用到Theme(应用级别的Theme,下面会讲到全局级的Theme),则在该Web应用的根目录下有个名为” App_Themes”的子目录,而每个Theme都是”App_Themes”的一个子目录。
每个Skin都是Theme目录中的一个后缀名为.skin的文件。
Theme的使用级别:
全局Theme:
在ASP.Net的安装目录(通常是%WINDIR% \Microsoft.NET \Framework \<version>\)下,建立名为”Theme”的子目录,并在其下建立各个全局Theme目录。
全局Theme对于整个机器上的所有Web应用都可见。
应用级的Theme:
如”目录结构”中说到的,建立在Web应用根目录下的”App_Themes”目录下。
应用级的Theme只对当前Web应用可见。
Theme的引用:
页面引用:
在Web页面中用<%@ Page Theme="..." %>设定使用哪个Theme。选中的Theme在该页面有效。
配置引用:
在Web应用的配置文件中,用<pages theme="..."/> 设定使用哪个Theme。设定的Theme对于整个Web应用有效。
动态引用:
页面样式应用的优先级:
一共有4种方式设定页面的样式:CSS,StyleSheetTheme(Tutorial上说这是Server-Side Style, 我不是很明白它的含义),各个控件自己设定的样式属性,Theme。如果设定有冲突,系统会按照Theme -> 控件各自属性 -> StyleSheetTheme -> CSS来设定页面样式。
只有一个例外: 控件可以通过设定EnableTheming="False" 使Theme的设定无效。当设定无效后,系统会按照 控件各自属性 -> StyleSheetTheme -> CSS来设定页面样式。
Skin的引用:
在Skin文件中可以指定SkinID,也可以不指定;如果没有指定,则认为似当前Theme中该类型控件的默认Skin,如:
<asp:label runat="server" font-bold="true" forecolor="orange" />
<asp:label runat="server" SkinID="Blue" font-bold="true" forecolor="blue" />
如果页面中不指定SkinID,就是使用选中的Theme中的该类型控件的对应的默认Skin;也可以在页面中指定使用哪个Skin,如:
<asp:Label ID="Label1" runat="server" Text="Hello 1" />
<asp:Label ID="Label2" runat="server" Text="Hello 2" SkinID="Blue" />
注意:
1) 在同一个Theme中,对于同一种类型的控件,只能有一个默认Skin定义;相似的,同一个Theme中,对于同一种类型的控件,一个SkinID也只能有一个Skin定义。
用Theme封装模板:
Theme可以用来封装模板,便于一次性替代整个模块。例如使用以下的Skin文件,就可以在页面中只使用一行代码来定义一个完整的登录界面:
<asp:Login ID="Login1" runat="server"/>
Skin文件内容:































但是我认为Theme和Skin的主要目的在于将页面的样式/布局与页面分开,便于分工,修改;而不是作为Web Control在多个页面中复用的模块,所以应注意使用Theme的封装模板功能。