网站换肤

最新推荐文章于 2010-03-21 21:35:00 发布

kable999

最新推荐文章于 2010-03-21 21:35:00 发布

阅读量430

点赞数

分类专栏： .NET ASP.NET-MVC 文章标签： server xhtml themes asp session html

本文链接：https://blog.csdn.net/kable999/article/details/5373857

版权

.NET 同时被 2 个专栏收录

97 篇文章 0 订阅

订阅专栏

ASP.NET-MVC

50 篇文章 0 订阅

订阅专栏

利用Themes我们可以很容易的更改控件、页面的风格，而不需要修改我们的代码和页面文件。那么我们就先来看一下这Theme/Skin文件是怎么样创建的吧。Themes文件单独的放在1个App_Themes文件夹下面，与你的程序是完全分开的，使之更容易管理。
具体方法如下：项目点右键，选择“添加ASP.NET 文件夹”下的“主题”，再右键点添加新项，选择“外观文件（skin）”
接下来我们来看一下它具体是怎么用的，好的不着急，且听我慢慢道来。。。
一、我们先来看一下简单的应用
1、编写.Skin文件
skin1.skin

<asp:Label Font-Bold="true" ForeColor="Red" runat="server" />
2、将写好的skin文件应用到aspx页面中
.aspx页面

<%@ Page Language="vb" Theme="default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml ">
<head id="Head1" runat="server">
<title>Page with Example Theme Applied</title>
</head>
<body>
<form id="form1" runat="server">
<asp:Label ID="Label1" runat="server" Text="Hello 1" /><br />
<asp:Label ID="Label2" runat="server" Text="Hello 2" /><br />
</form>
</body>
</html>
可以看到我们在.aspx并没有写Label的样式，但运行后发现label上的字都变成了粗体红色了，这就是最简单的一个使用Theme的例子。

上面的这个方法是在项目的一个页面上应用Theme，如果要想在项目的所有页面上都应用该样式，那就这样做：
在web.config中的<system.web>节下加上句<pages theme="..."/>就可以，试试吧！
二、我们再来看一下其稍微复杂一点的应用
1、有时候就关是上面这种简单的应用满足不了我们的要求，我们想让页面上的同一控件应用不同的样式，那怎么来做呢，我们先来看个例子：
skin2.skin

<asp:label runat="server" font-bold="true" forecolor="Red" />
<asp:label runat="server" SkinID="Blue" font-bold="true" forecolor="blue" />
.aspx页面

<%@ Page Language="vb" Theme="default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml ">
<head id="Head1" runat="server">
<title>Page with Example Theme Applied</title>
</head>
<body>
<form id="form1" runat="server">
<asp:Label ID="Label2" runat="server" Text="Hello 2" SkinID="Blue" /><br />
<asp:Label ID="Label3" runat="server" Text="Hello 3" /><br />
</form>
</body>
</html>
在家注意了，我呢在skin文件中其中一个label的样式里加了SkinID="...",在.aspx页面的其中一个Label控件里面也加上SkinID="..."，这样的话，相应的样式就应用到指定的控件上了。运行后就会发现2个label显示的风格不一样了。
2、下面再来看个例子：
skin1.skin

<asp:Label Font-Bold="true" ForeColor="Red" runat="server" />
.aspx页面

<%@ Page Language="vb" Theme="default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<html xmlns="http://www.w3.org/1999/xhtml ">
<head id="Head1" runat="server">
</head>
<body>
<form id="form1" runat="server">
<asp:Label ID="Label1" runat="server" Text="Hello 1" /><br />
<asp:Label ID="Label2" runat="server" Text="Hello 2" ForeColor="blue" />
</form>
</body>
</html>
运行结果:所有的label的forecolor都为red。
那么我们如果想要上面的那个页面里面的Label2的ForeColor为blue的话，这时候我们就要再Page标签里用这么个东东：StyleSheetTheme="..."
使用<%@ Page StyleSheetTheme="..." %>应用theme是不会覆盖你在aspx文件中写的属性style
说到这里，我们就要来看一下这个Theme使用的优先级了：
a、StyleSheetTheme引用的风格
b、代码设定的控件属性(覆盖StyleSheetTheme)
c、Theme引用的风格(覆盖前面2个)
三、我们再来看一下怎么样实现动态换肤，从而实现页面的个性化
下面就介绍怎么在后台代码中动态的引用theme来解决上面的情况，theme必须在page被请求的最早期就应用上，所以我们必须在Page_PreInit事件中写代码，代码很简单，就一句：Page.Theme = "..."

页面执行的时候，取得所保存的主题：

protected Sub Page_PreInit()sub Page_PreInit(object sender, EventArgs e)

if (Session["Theme"] is nothing) then

' No theme has been chosen. Choose a default
' (or set a blank string to make sure no theme is used).
Page.Theme = ""

else

Page.Theme = ctype(Session["Theme"],string)

end sub
主题改变的时候，应用它并保存：

protected Sub cmdApply_Click()sub cmdApply_Click(object sender, EventArgs e)

' Set the chosen theme.
Session["Theme"] = lstThemes.SelectedValue

' Refresh the page.
Server.Transfer(Request.FilePath)

end sub
去除主题的应用：

protected Sub cmdClear_Click()sub cmdClear_Click(object sender, EventArgs e)

' Set the chosen theme.
Session["Theme"] = ""

' Refresh the page.
Server.Transfer(Request.FilePath)
end sub
上面呢我们是将主题保存在Session中，也可以保存在数据库中，那么应该也可以保存在Profile中了！

四、上面说了这么多，总结一下主要的也就是这么几句话：
a、页面里相同的控件使用不同的样式：在该控件后面加skinID

b、把定义好的theme应用到整个页面：在该页的Page页签里加上属性theme=“theme名称”

c、把定义好的theme应用到整个站点：在web.config文件system.web的配置节中加上<pages theme="theme名称">

d、动态的更换站点的样式（主题、皮肤）：在Page_PreInit事件中写代码,Page.Theme = "...";

e、控件中应用样式的优先级：a、StyleSheetTheme引用的风格[优先级最低]

b、代码设定的控件属性(覆盖StyleSheetTheme)

c、Theme引用的风格(覆盖前面2个) [优先级最高]

f、让某个控件不应用theme里面定义的风格：更改属性EnableTheming=false即可

好了，这个话题就先说到这，谢谢光临，再见！^_^