asp.net基础复习(一)——Theme和skin

在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 ID="Button1" runat="server" Text="Button" />

<asp:Button ID="Button2" 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中

动态加载主题：

 

Code
    protected void Page_PreInit(Object sender, EventArgs e) 
    { 
        
        if (Request["theme"] == "Red") 
        { 
            this.Theme = " WinXP_Red";
        } 
        else 
        { 
            this.Theme = " WinXP_Blue"; 
        } 
    } 

 

 

或是：

 

Code
   protected override void OnPreInit(EventArgs e)
   { 
       if (Request["theme"] == "Red") 
       { 
           this.Theme = " WinXP_Red"; 
       } 
       else 
       { 
           this.Theme = " WinXP_Blue"; 
       } 
       base.OnPreInit(e); 
   }