Asp.net2.0中的主题(Theme)与皮肤(Skin)

2013 年 8 月 17 日4870

【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
【文章出处】

0 0