日期:2011-09-02  浏览次数:20718 次

引言

主题是 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 文件。

通过使用 Theme@ Page 指令的 StyleSheetTheme 属性,或者通过在应用程序配置文件中设置 pages 元素(ASP.NET 设置架构)元素,都可以应用主题。Visual Web Developer 只以可视方式显示使用 StyleSheetTheme 属性应用的主题。

创建页主题

  1. 在解决方案资源管理器中,右击要为其创建页主题的网站名称,然后单击“添加 ASP.NET 文件夹”。

  2. 单击“主题”。

    如果 App_Themes 文件夹不存在,Visual Web Developer 则会创建该文件夹。Visual Web Developer 即为主题创建一个新文件夹,作为 App_Themes 文件夹的子文件夹。

  3. 键入新文件夹的名称。

    此文件夹的名称也是页主题的名称。例如,如果您创建一个名为 \App_Themes\FirstTheme 的文件夹,则主题的名称为 FirstTheme。

  4. 将构成主题的控件外观、样式表和图像的文件添加到新文件夹中。

我们将在主题 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><head runat="server">    <title>Orange Page</title></head><body>    <form id="form1" runat="server">    Enter your name:    <br />    <asp:TextBox        ID="txtName"         Runat="Server" />