在 ASP.NET 2.0 中创建 Web 应用程序主题(二)-控件新闻-慧都网

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

翻译|其它|编辑：郝浩|2006-05-10 16:38:00.000|阅读 1631 次

概述：

默认外观与命名外观

在上一部分中，您学习了如何创建应用于某一类控件的所有实例的外观。例如，您学习了如何创建应用于所有 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
    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）。

图 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 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 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 应用程序。因此，使用主题功能可以轻松创建具有一致的并可维护的外观设计的网站。

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

上一篇：VB的多媒体控件VBPLAY.VBX简介下一篇：在 ASP.NET 2.0 中创建 Web 应用程序主题(一)

在线采购

中文文档库

试用/Demo下载

开发社群