在 ASP.NET 2.0 中创建 Web 应用程序主题

来源：MSDN 作者：出处：巧巧读书 2006-05-11 进入讨论组

讨论组：http://group.qqread.com

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

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

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

列表 7：Web.Config


＜configuration>
＜system.web>
＜pages theme="OrangeTheme" />
＜/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>
＜head runat="server">
＜title>
Style Sheet Themed TextBox＜/title>
＜/head>
＜body>
＜form id="form1" runat="server">
＜b>
First Name:＜/b>
＜asp:TextBox ID="txtFirstName" Runat="Server" />
＜br />
＜br />
＜b>
Last Name:＜/b>
＜asp:TextBox ID="txtLastName" BackColor="Yellow" Runat="Server" />
＜br />
＜br />
＜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>
＜head runat="server">
＜title>
Show BulletedList＜/title>
＜/head>
＜body>
＜form id="form1" runat="server">
＜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）。