在 ASP.NET 2.0 中创建 Web 应用程序主题【微软】

主题是 Microsoft ASP.NET 2.0 的一项新增功能，使用此功能可以一次定义一组控件的外观，并可以将该外观应用于整个 Web 应用程序。例如，通过利用主题功能，您可以在一个中心位置为应用程序中的所有 TextBox 控件定义共同的外观，如背景颜色和前景颜色。使用主题功能可以轻松建立并维护整个网站外观的一致性。

主题与级联样式表并不相同。使用级联样式表可以控制浏览器上的 HTML 标记的外观。而主题则应用在服务器上，并适用于 ASP.NET 控件的属性。例如，您可以使用主题来指定 GridView 控件是否显示页眉或页脚，但不能使用级联样式表来执行此操作。

主题与母版页也并不相同。母版页也是 ASP.NET 2.0 的一项新增功能，使用此功能可以为 Web 应用程序中的多个内容页指定共同的布局。使用主题可以控制页面中各个控件的外观，而母版页则不能。（在设计 Web 应用程序时，您可以并且可能将同时使用母版页和主题。）

在本文中，您要学习如何在 ASP.NET 2.0 应用程序中利用主题功能。您会学习到如何在主题中同时使用级联样式表和图像。此外，我们还将学习如何在运行时动态加载主题。

返回页首

创建和应用简单主题

ASP.NET 2.0 不附带任何默认主题。当 ASP.NET 2.0 发布之后，您可以从网站（例如 www.ASP.net）上下载并使用主题。但是，现在，您必须从头开始创建自己要使用的所有主题。

此外，系统会警告您 Microsoft Visual Web Developer 不提供任何用于创建主题的工具支持。尽管您确实可以使用 Visual Web Developer 来创建主题并将主题应用于网页；但在 Web 浏览器中实际打开页面前，您看不到将主题应用于页面的效果。换句话说，Visual Web Developer 不提供任何用于创建主题的设计器支持。

了解这些警告后，我们继续创建简单主题。创建主题所需的第一步是在应用程序的根目录中创建一个名为 Themes 的新文件夹。（当 ASP.NET 2.0 的 BETA 2 版本发布后，您就需要将此文件夹命名为 Application_Themes 了。）当您尝试应用主题时，ASP.NET Framework 将自动查找此文件夹。

创建了 Themes 文件夹之后，您可以通过向该 Themes 文件夹中添加子文件夹来创建一个或多个主题。我们将创建的第一个主题名为 OrangeTheme。因此，我们需要在 Themes 文件夹中添加一个名为 OrangeTheme 的新文件。

然后，我们需要将 Skin 文件添加到 OrangeTheme 文件夹中。Skin 文件是实际包含主题所应用的格式设置的文件。换句话说，该文件包含主题所应用的一个或多个控件外观。您可以将 Skin 文件命名为任何名称，只要以扩展名 .Skin 结尾即可。

一个主题可以包含一个 Skin 文件，也可以包含数百个 Skin 文件。您可以根据需要将 Skin 文件命名为任何名称。这没有关系，因为在将主题应用于页面时，ASP.NET Framework 将把所有 Skin 文件合并在一起，而将这些文件视为单个 Skin 文件。

我们将在主题 OrangeTheme 中使用列表 1 中的 Skin 文件（名为 FormControls.Skin）：

列表 1：FormControls.Skin

<asp:TextBox

BackColor="Orange"

ForeColor="DarkGreen"

Runat="Server" />

<asp:Button

BackColor="Orange"

ForeColor="DarkGreen"

Font-Bold="True"

Runat="Server" />

您应当注意到了，列表 1 中的 Skin 文件包含 TextBox 和 Button 控件的声明。分别为这两个控件的 BackColor 和 ForeColor 属性提供了值。此外，还声明 Button 控件使用加粗字体。

请注意，您可以通过声明一个控件实例并设置一个或多个控件属性，从而使用 Skin 文件指定控件的外观。您可以在 Skin 文件中设置的控件属性是有限的。通常，仅可以设置外观属性。例如，您可以设置 TextBox 控件的 BackColor、ForeColor 甚至 Text 属性。但是不能在 Skin 文件中设置 TextBox 控件的 AutoPostBack 属性。

此外，您不能将外观用于每个 ASP.NET 控件。例如，您不能将外观用于 Repeater 控件、Literal 控件或 LoginView 控件，也不能将外观用于 User 控件（但是，可以将外观应用于 User 控件中所包含的控件）。

将 FormControls 外观应用于页面之后，页面中的每个 TextBox 和 Button 控件都将使用在 Skin 文件中指定的属性值来显示。即便已经为该页面中的 TextBox 控件的 BackColor 属性指定了值，也是如此。Skin 文件将替代页面中的控件属性。

列表 2 中的页面应用了主题 OrangeTheme：

列表 2：OrangePage.aspx

<%@ Page Theme="OrangeTheme" %>

<html>

<title>Orange Page</title>

</head>

<body>

Enter your name:

<br />

<asp:TextBox

ID="txtName"

Runat="Server" />

<asp:Button

ID="btnSubmit"

Text="Submit Name"

Runat="Server" />

</form>

</body>

</html>

列表 2 中的页面包含用于询问用户名的窗体。除了在页面顶部添加了主题指令之外，此页面没有任何特殊的地方。该主题指令用于将 OrangeTheme 主题应用于页面。

当您在 Web 浏览器中打开列表 2 中的页面时，TextBox 和 Button 控件将使用在 Skin 文件中声明的格式设置来显示（请参见图 1）。

图 1：将简单主题应用于 ASP.NET 页面

Skin 文件可以包含比列表 1 中所包含的格式设置更复杂的格式设置。例如，列表 3 中的 GridView.Skin 文件包含了用作 GridView 控件的格式设置的脚本和模板。（在 ASP.NET 2.0 Framework 中，GridView 控件替换了 DataGrid 控件。）

列表 3：GridView.Skin (C#)

string DisplayInStock(object inStock)

{

if ( (Int16)inStock > 0 )

return "In Stock";

else

return "Out of Stock";

}

</script>

<asp:GridView

AutoGenerateColumns="false"

ShowHeader="false"

CellPadding="5"

Font-Name="Arial"

Runat="Server">

<asp:TemplateField>

<%# Eval("ProductName") %>

</ItemTemplate>

</asp:TemplateField>

<asp:BoundField

DataField="UnitPrice"

DataFormatString="{0:c}" />

<asp:TemplateField>

<%# DisplayInStock(Eval("UnitsInStock")) %>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

列表 3：GridView.Skin (Visual Basic .NET)

Function DisplayInStock(inStock As Object) As String

If CType(inStock, Int16) > 0 Then

Return "In Stock"

Else

Return "Out of Stock"

End If

End Function

</script>

<asp:GridView

AutoGenerateColumns="false"

ShowHeader="false"

CellPadding="5"

Font-Name="Arial"

Runat="Server">

<asp:TemplateField>

<%# Eval("ProductName") %>

</ItemTemplate>

</asp:TemplateField>

<asp:BoundField

DataField="UnitPrice"

DataFormatString="{0:c}" />

<asp:TemplateField>

<%# DisplayInStock(Eval("UnitsInStock")) %>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

列表 3 中的 Skin 文件包含一个 GridView 控件，该控件具有三列（请参见图 2）。第一列是一个 TemplateField 列，用于显示 ProductName 字段的值。第二列是一个 BoundField 列，用于显示 UnitPrice 字段（请注意，此列使用 DataFormatString 属性将价格形式设置为货币）。最后，第三列是另一个 TemplateField 列。此列将从 Skin 文件所包含的脚本中调用 DisplayUnitsInStock 方法，以显示文本“In Stock”或“Out of Stock”。

图 2：复杂的 GridView 外观

您可以将 GridView.Skin 外观用于列表 4 中的页面（假如您已将该外观添加到了 OrangeTheme 文件夹中）。

列表 4：SkinnedGridView.aspx

<%@ Page Theme="OrangeTheme" %>

<html>

<title>Skinned GridView</title>

</head>

<body>

<asp:GridView

ID="GridView1"

DataSourceID="ProductSource"

Runat="Server" />

<asp:SqlDataSource

ID="ProductSource"

ConnectionString="Server=localhost;Trusted_Connection=true;Database=Northwind"

SelectCommand="Select ProductName,UnitPrice,UnitsInStock FROM Products"

Runat="Server" />

</form>

</body>

</html>

列表 4 中的页面显示了 Products 数据库表中的内容。该页面包含一个绑定到 SqlDataSource 控件的 GridView 控件。SqlDataSource 控件用于连接到 Northwind 数据库表，以检索该数据库中的数据。

返回页首

默认外观与命名外观

在上一部分中，您学习了如何创建应用于某一类控件的所有实例的外观。例如，您学习了如何创建应用于所有 TextBox 控件或 GridView 控件的外观。但是，您很快就会发现，您需要为同一控件创建多个外观。例如，您会希望能够将不同外观应用于不同页面（甚至同一页面）中的 GridView 控件。

如果您创建的是“命名外观”，那么就可以创建应用于同一类控件的多个外观。命名外观就是包含 SkinID 的外观。例如，列表 5 中的 Skin 文件包含了三个可以应用于 TextBox 控件的外观。

列表 5：TextBox.Skin

<asp:TextBox

BackColor="Green"

Runat="Server" />

<asp:TextBox

SkinID="BlueTextBox"

BackColor="Blue"

Runat="Server" />

<asp:TextBox

SkinID="RedTextBox"

BackColor="Red"

Runat="Server" />

在列表 5 中，第一个 TextBox 外观称为默认外观。由于该外观不包含 SkinID，因此，默认情况下，该外观应用于所有 TextBox 控件。而第二个和第三个 TextBox 外观包含各自的 SkinID 属性值。只有在通过其 SkinID 值明确引用这两个外观时，它们才应用于 TextBox 控件。

例如，列表 6 中的页面使用了 TextBox.Skin Skin 文件中的全部三个外观。

列表 6：SkinnedTextBoxes.aspx

<%@ Page Theme="OrangeTheme" %>

<html>

<title>Skinned TextBoxes</title>

</head>

<body>

<asp:TextBox

id="TextBox1"

Runat="Server" />

<br />

<asp:TextBox

id="TextBox2"

SkinID="BlueTextBox"

Runat="Server" />

<br />

<asp:TextBox

id="TextBox3"

SkinID="RedTextBox"

Runat="Server" />

</form>

</body>

</html>

由于列表 6 中的第一个 TextBox 控件不包含 SkinID 属性，因此其外观为默认外观。第二个 TextBox 控件的外观为 BlueTextBox 外观，最后一个 TextBox 控件的外观为 RedTextBox 外观（请参见图 3）。

图 3：应用默认外观和命名外观

返回页首

将主题应用于整个应用程序

到目前为止，我们已经通过使用“页面”指令的主题属性将多个主题应用于了各个页面。如果需要，您可以在 Web 配置文件中将某个主题应用于整个应用程序。

例如，列表 7 中的 Web 配置文件将 OrangeTheme 主题应用于了应用程序中的每个页面。

列表 7：Web.Config

<system.web>

</system.web>

</configuration>

列表 7 中的 Web.Config 文件将把 OrangeTheme 主题应用于尚未在“页面”指令中指定主题的所有页面。换句话说，“页面”指令能够替代 Web.Config 文件中所指定的任何主题。

同一应用程序可以包含用于指定主题的多个 Web.Config 文件。您可以将不同的 Web 配置文件添加到不同的子文件夹中，每个 Web 配置文件都可以指定不同的主题。

返回页首

主题与 StyleSheetTheme

将主题应用于页面时，主题中所设置的任何控件属性都优先于页面中所设置的任何属性。例如，如果主题指定所有 TextBox 控件的背景都应当显示为橙色，那么即使个别 TextBox 控件的 BackColor 属性具有不同的值，页面中所有 TextBox 控件的背景也仍然都将显示为橙色。

但是，在某些情况下，您会希望替代页面中的特定外观设置。例如，当页面中存在多个 TextBox 控件时，您可能会希望将某个 TextBox 控件的 BackColor 更改为红色，以便突出显示该控件。在这种情况下，您就需要利用 StyleSheetTheme。StyleSheetTheme 的工作方式与普通主题非常相似，只不过它可以被个别控件的属性所替代。

与普通主题相比，StyleSheetTheme 的工作方式与级联样式表更为相似。您可以将级联样式表规则替代为指定给个别 HTML 标记的样式规则，使用相同的方式也可以将 StyleSheetTheme 属性设置替代为个别控件的属性设置。

例如，列表 8 中的 Skin 文件包含一个 TextBox 外观，该外观将每个 TextBox 控件的 BackColor 设置为了橙色，将 ForeColor 设置为了绿色。

列表 8：TextBox.Skin

<asp:TextBox

BackColor="Orange"

ForeColor="Green"

Runat="Server" />

假设将列表 8 中的外观添加到了 OrangeTheme 主题中。列表 9 中的页面将使用 StyleSheetTheme 属性而不是 theme 属性来应用该外观。

列表 9：StyleSheetThemedTextBox.aspx

<%@ Page StyleSheetTheme="OrangeTheme" %>

<html>

<title>Style Sheet Themed TextBox</title>

</head>

<body>

<b>First Name:</b>

<asp:TextBox

ID="txtFirstName"

Runat="Server" />

<asp:TextBox

ID="txtLastName"

BackColor="Yellow"

Runat="Server" />

<asp:Button

Text="Submit"

Runat="Server" />

</form>

</body>

</html>

当您打开列表 9 中的页面时，第一个 TextBox 控件的 BackColor 将显示为橙色，而第二个 TextBox 控件的 BackColor 将显示为黄色（请参见图 4）。第一个 TextBox 控件的 BackColor 是由显示在“页面”指令中的 StyleSheetTheme 属性设置的。第二个 TextBox 控件的 BackColor 属性值是由页面本身设置的。

图 4：使用 StyleSheetTheme

返回页首

图像和主题

您可以在主题中包含图像。处理某些控件（例如 Menu、TreeView 或 BulletedList 控件）时，在主题中添加图像会很有用。

例如，列表 10 包含用于 BulletedList 控件的外观。该外观包含对 OrangeTheme 文件夹的 BulletImages 子文件夹中名为 OrangeBullet 的图像的引用。

列表 10：BulletedList.Skin

<asp:BulletedList

BulletStyle="CustomImage"

BulletImageUrl="BulletImages/OrangeBullet.gif"

Runat="Server" />

列表 11 中的页面使用 BulletedList 外观来显示 Titles 数据库表中的书目的项目符号列表。

列表 11：ShowBulletedList.aspx

<%@ Page Theme="OrangeTheme" %>

<html>

<title>Show BulletedList</title>

</head>

<body>

<asp:BulletedList

ID="BulletedTitles"

DataSourceID="TitleSource"

DataTextField="Title"

Runat="Server" />

<asp:SqlDataSource

ID="TitleSource"

ConnectionString="Server=localhost;Trusted_Connection=true;Database=Pubs"

SelectCommand="SELECT Title FROM Titles"

Runat="Server" />

</form>

</body>

</html>

打开列表 11 中的页面时，BulletedList 控件将从 Titles 数据库表中检索标题列表，并显示该列表。请注意，BulletList 外观将 OrangeBullet 图像应用到了 BulletedList 控件中（请参见图 5）。

图 5:应用包含图像的主题

返回页首

级联样式表和主题

您还可以在主题中使用级联样式表。如果您将级联样式表添加到主题文件夹中，那么当您将该主题应用于某个页面时，级联样式表将自动应用于该页面。如果 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>

<body>

<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 事件发生过程中或发生之前设置。

例如，假设您在 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 (Visual Basic .NET)

<%@ Page Language="VB" %>

Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs)

Page.Theme = Request("dropTheme")

End Sub

</script>

<html>

<title>Dynamic Theme</title>

</head>

<body>

<asp:DropDownList

id="dropTheme"

AutoPostBack="true"

Runat="Server">

<asp:ListItem Text="YellowTheme" />

<asp:ListItem Text="RedTheme" />

</asp:DropDownList>

</form>

</body>

</html>

列表 16：DynamicTheme.aspx (C#)

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

void Page_PreInit(object sender, EventArgs e)

{

Page.Theme = Request["dropTheme"];

}

</script>

<html>

<title>Dynamic Theme</title>

</head>

<body>

<asp:DropDownList

id="dropTheme"

AutoPostBack="true"

Runat="Server">

<asp:ListItem Text="YellowTheme" />

<asp:ListItem Text="RedTheme" />

</asp:DropDownList>

</form>

</body>

</html>

返回页首

结论

在本文中，我们学习了 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://www.superexpert.com/) 为美国的公司（包括 NASA 和 Microsoft）提供 ASP.NET 培训。

转到原英文页面