级联样式表和主题

您还可以在主题中使用级联样式表。如果您将级联样式表添加到主题文件夹中，那么当您将该主题应用于某个页面时，级联样式表将自动应用于该页面。如果 Themes 文件夹的内容被编译为某一类，则 Themes 文件夹中存在的任何级联样式表都将被添加到该类中。

例如，假设您要为页面中的所有超链接创建悬停效果。您可以使用列表 12 中的级联样式表，以便当鼠标悬停在超链接上时使超链接的颜色更改为橙色。

列表 12：Hover.css

A:hover { color: orange; }

如果将列表 12 中的级联样式表添加到 OrangeTheme 文件夹中，那么当 OrangeTheme 应用于某个页面时，样式表将自动应用于该页面。使样式表自动应用于页面的一个要求是该页面必须包含服务器端 ＜head runat="Server" />

标记。此标记用于使链接呈现样式表中的样式。

由于列表 13 中的页面包含 ＜head runat="Server" />

标记，并且应用了 OrangeTheme，因此该页面将自动链接到 Hover.css 样式表。

列表 13：Menu.aspx

＜%@ Page Theme="OrangeTheme" %>

＜html>

＜head runat="server">

＜title>

Menu＜/title>

＜/head>

＜body>

＜form runat="server">

＜a href="Home.aspx">

Home＜/a>

＜br />

＜a href="Products.aspx">

Products＜/a>

＜br />

＜a href="Services.aspx">

Services＜/a>

＜/form>

＜/body>

＜/html>

如果打开列表 13 中的页面并将鼠标悬停在某个超链接上，该超链接将变为橙色（请参见图 6）。

图 6：在主题中使用级联样式表

可以在一个主题中包含多个级联样式表。如果您添加了多个级联样式表，则服务器端 ＜head runat="Server"/>

标记将自动生成每个样式表的链接。

动态加载主题

假设您要动态更改网站的外观。您可能会希望用户在与您的 Web 应用程序进行交互时，可以自定义 Web 应用程序的颜色和总体外观。通过利用动态加载主题操作，您可以将此功能提供给 ASP.NET 2.0 应用程序的用户。

通过修改 Page 对象的 theme 属性值，您可以在运行时修改页面使用的主题。您可以将任一有效主题的名称指派给此属性。您必须了解使用 theme 属性时的一个限制。即 theme 属性只能在 Page PreInit 事件发生过程中或发生之前设置。

在页面的 PreInit 方法的处理程序中，设置页面的 Theme 属性。

下面的代码示例演示如何根据查询字符串中传递的值按条件设置页面主题。

Protected void Page_PreInit(object sender, EventArgs e)

{

switch (Request.QueryString["theme"])

{

case "Blue":

Page.Theme = "BlueTheme";

break;

case "Pink":

Page.Theme = "PinkTheme";

break;

}

}

例如，假设您在 Themes 文件夹中创建了两个新的主题文件夹，名为 RedTheme 和 YellowTheme。您可以将列表 14 中的外观添加到 RedTheme 文件夹中，将列表 15 中的外观添加到 YellowTheme 文件夹中（这些外观将把 DropDownList 控件的 BackColor 更改为红色或黄色）。

列表 14：RedTheme/DropDownList.Skin

＜asp:DropDownList BackColor="Red" Runat="Server" />

列表 15：YellowTheme/DropDownList.Skin

＜asp:DropDownList BackColor="Yellow" Runat="Server" />

列表 16 中的页面将根据用户在 DropDownList 控件中的选择动态加载 RedTheme 或 YellowTheme 主题（请参见图 7）。请注意，“请求”集合用于在 PreInit 事件处理程序中检索用户的选择。由于 PreInit 事件在页面执行周期中引发过早，以至于无法使用 dropTheme DropDownList 控件的任何属性，因此您必须使用“请求”集合。

图 7：动态加载主题

列表 16：DynamicTheme.aspx (C#)

＜%@ Page Language="C#" %>

＜script runat="server">

void Page_PreInit(object sender, EventArgs e) { Page.Theme = Request["dropTheme"]; } ＜/script>

＜html>

＜head runat="server">

＜title>

Dynamic Theme＜/title>

＜/head>

＜body>

＜form runat="server">

＜asp:DropDownList AutoPostBack="true" Runat="Server">

＜asp:ListItem Text="YellowTheme" />

＜asp:ListItem Text="RedTheme" />

＜/asp:DropDownList>

＜/form>

＜/body>

＜/html>

以编程方式应用控件外观

在页面的 PreInit 方法的处理程序中，设置控件的 SkinID 属性。

下面的代码示例演示如何设置 Calendar 控件的 SkinID 属性。

void Page_PreInit(object sender, EventArgs e)

{

Calendar1.SkinID = "MySkin";

}

结论

在本文中，我们学习了 ASP.NET 2.0 主题的基础知识和高级应用。主题是一项强大的 ASP.NET Framework 新增功能。通过利用主题功能，可以显著减少您需要添加到各个 ASP.NET 页面的内容量。使用主题功能可以一次定义控件的外观，并可以将该外观应用于整个 Web 应用程序。因此，使用主题功能可以轻松创建具有一致的并可维护的外观设计的网站。

参考资料

•

ASP.NET Unleashed

•

ASP.NET v. 2.0-The Beta Version

•

ASP.NET 2.0 Beta Preview

•

Introducing Microsoft ASP.NET 2.0

作者简介

Stephen Walther 编写了有关 ASP.NET 的畅销书 ASP.NET Unleashed。此外，他还是 ASP.NET Community Starter Kit（Microsoft 开发的 ASP.NET 示例应用程序）的体系结构设计师和主要开发人员。他还通过自己的公司 Superexpert ( http://http://www.zjjv.com/// ) 为美国的公司（包括 NASA 和 Microsoft）提供 ASP.NET 培训。

本文来源：MSDN

责任编辑：王晓易_NE0011