Asp.net2.0中的主题(Theme)与皮肤(Skin)
【IT168技术文档】在ASP.net 2.0之后便引入了主题（Theme）的概念，将CSS文件并入到主题的统一概念中，也不需要通过<link>标记来引入CSS文件了，下面先来看一看主题的使用实例：
第一步：在解决方案资源管理器中，网站上点击右键选择“添加ASP.net文件夹à主题”，系统会新建一个名为“App_Themes”的目录，在该目录下还会自动建立一个“主题1”的目录。
“主题1”目录就是所定义的主题名称，为了更有实际意见，将“主题1”修改为“WinXP_Blue”。
第二步：在WinXP_Blue目录上点击右键，选择“添加新项…”，选择“样式表”类型，命名为blue.css。完善blue.css中CSS的定义。
第三步：在网站根目录下新建名为“TestTheme.aspx”的页面，注意：不要选择从母版中生成。在@ Page指令中加入StylesheetTheme="WinXP_Blue"属性，如：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestTheme.aspx.cs" Inherits="TestTheme" StylesheetTheme="WinXP_Blue" %>
第四步：在页面中拖入一个Button按钮，在属性面板中找到CssClass属性，该属性是一个下拉列表，列表中显示了blue.css中所有用户自定义类别的名称。
如果将@ Page指令中的StylesheetTheme="WinXP_Blue"更改成Theme="WinXP_Blue"，重新打开TestTheme.aspx页面进行编辑，则控件的CssClass属性下拉列表中什么也不会出现。这是因为Theme属性的强制页面中的控件都只能通过“主题”进行界面设置，不允许控件在页面中进行自定义CSS风格；而StylesheetTheme属性则表示，既可以使用“主题”中的界面设置，也可以页面中进行自定义。
由此可以看出，CSS文件已经被“主题”的概念封装了。在实际使用“主题”技术时，还有一个称之为“皮肤Skin”的技术。Skin技术也可以将CSS做了一次封装，下面是Skin的实例：
第一步：在blue.css文件中加入下面两种CSS类的定义：
.btn
{
font-family: Arial;
background-color: #FFFF00;
border-style: dotted;
border-color: #008000;
}
.btnSubmit
{
background-color: #008080;
color: #FFFFFF;
border-style: outset;
}
第二步：在“WinXP_Blue”上点击右键添加新项，添加“外观文件”，取名为Blue.skin。这个文件便是Skin的定义文件。在blue.skin文件中加入如下代码：
<asp:Button runat="server" CssClass="btn" />
<asp:Button runat="server" CssClass="btnSubmit" SkinId="SubmitSkin" />
这样就定义了Button服务器控件的默认CSS效果与SkinId="SubmitSkin"的CSS效果。
第三步：在TestTheme.aspx页面删除之前所建的按钮，将@ Page指令中的StylesheetTheme="WinXP_Blue"更改成Theme="WinXP_Blue"，另外新加入两个Button按钮，将其中一个按钮的SkinId属性定义为SubmitSkin（可以在按钮的属性面板中SkinId属性中通过下拉列表进行选择）。
<asp:Button runat="server" Text="Button" />
<asp:Button runat="server" Text="Button" SkinID="SubmitSkin" />
在浏览器中查看TestTheme.aspx页面，可以发现Button1按钮应用的是btn类的风格，在Skin定义文件中，没有指定SkinID的定义条目，即该控件的默认风格。Button2按钮应用的是btnSubmit风格。由此可见SkinID又是对CSS类的一次封装。
但皮肤Skin技术并不止限于对CSS类的封装，而是对服务器控件所有属性的一次封装，CssClass只是其中的一个属性。由此也可以看出，Skin技术只能应用于服务器控件。如将blue.skin文件中：
<asp:Button runat="server" CssClass="btnSubmit" SkinId="SubmitSkin" />
更改为：
<asp:Button runat="server" CssClass="btnSubmit" Text="提交" SkinId="SubmitSkin" />
加入了一个Text属性，再在浏览器中查看TestTheme.aspx页面可以发现Button2按钮的Text文字变成了“提交”。
尤其可以得出一个结论：SkinID是服务器控件属性定义的一个集合。应用SkinID的控件，就应用了这个集合中所有定义的属性。
当SkinID中定义的属性值与aspx页面中定义的属性值发冲突时，系统会如何处理呢？如在aspx页面中，Button2按钮也定义了Text属性为“Button”，SkinID中定义的Text属性是“提交”，优先使用哪一个定义要看@ Page指令中引入Theme的属性是用的哪一个。
如果使用Theme="WinXP_Blue"，则会优先使用SkinID中定义的属性；如果使用StylesheetTheme="WinXP_Blue"，则会优先使用aspx中定义的属性。
母版中不能定义主题，即不能在@ Master指令中使用Theme或StylesheetTheme属性。如果需要集中定义所有页面的主题，可以通过web.config文件配置<system.web>à<pages>节的Theme或StylesheetTheme属性来实现。
程序动态加载主题的方法与动态加载母版的方法相似，都必须在Page类的OnPreInit方法（或其触发事件）中实现，如在TestTheme.aspx.cs中动态加载主题：
protected void Page_PreInit(Object sender, EventArgs e)
{
if (Request["theme"] == "Red")
{
this.Theme = " WinXP_Red";
}
else
{
this.Theme = " WinXP_Blue";
}
}
或是：
protected override void OnPreInit(EventArgs e)
{
if (Request["theme"] == "Red")
{
this.Theme = " WinXP_Red";
}
else
{
this.Theme = " WinXP_Blue";
}
base.OnPreInit(e);
}
Tag标签: 主题 Theme 皮肤 Skin StylesheetTheme
【文章出处】
