在 ASP.NET 2.0 中创建 Web 应用程序主题引言创建和应用简单主题默认外观与命名外观将主题应用于整个应用程序主题与 StyleSheetTheme图像和主题级联样式表和主题动态加载主题结论参考资料

80酷酷网    80kuku.com

　　asp.net|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 文件。

通过使用 Theme 或 指令的 StyleSheetTheme 属性，或者通过在应用程序配置文件中设置 元素，都可以应用主题。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" />    <br /><br />    <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#)

<script language="C#" runat="Server">  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">    <AlternatingRowStyle BackColor="LightBlue" />    <Columns>          <asp:TemplateField>            <ItemTemplate>            <%# Eval("ProductName") %>            </ItemTemplate>          </asp:TemplateField>          <asp:BoundField             DataField="UnitPrice"             DataFormatString="{0:c}" />          <asp:TemplateField>            <ItemTemplate>            <%# DisplayInStock(Eval("UnitsInStock")) %>            </ItemTemplate>          </asp:TemplateField>    </Columns></asp:GridView>

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

<script language="VB" runat="Server">  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">    <AlternatingRowStyle BackColor="LightBlue" />    <Columns>          <asp:TemplateField>            <ItemTemplate>            <%# Eval("ProductName") %>            </ItemTemplate>          </asp:TemplateField>          <asp:BoundField             DataField="UnitPrice"             DataFormatString="{0:c}" />          <asp:TemplateField>            <ItemTemplate>            <%# 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><head runat="server">    <title>Skinned GridView</title></head><body>    <form id="form1" runat="server">    <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><head runat="server">    <title>Skinned TextBoxes</title></head><body>    <form id="form1" runat="server">    <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

<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    Bullet    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）。


图 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 runat="server">    <title>Menu</title></head><body>    <form id="form1" runat="server">    <a 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 id="form1" runat="server">        <asp:DropDownList        id="dropTheme"        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 应用程序。因此，使用主题功能可以轻松创建具有一致的并可维护的外观设计的网站。

参考资料

•

•

•

•

作者简介

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


分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间

上一篇准备使用MySQL与ASP.NET开发Web应用

下一篇ASP.NET2.0新特性概述

相关文章

点击：