ASP.NET 2.0 中的主题和皮肤

• 下载源文件 - 92.9 Kb

引言

ASP.NET 2.0 中的主题是该编程模型的下一个版本中新增的众多特性和改进之一。通过使用主题，您可以轻松地使用 .NET Framework 中捆绑的预定义外观来自定义服务器控件，或者根据您网站的外观和感觉来创建自己的主题。设计网站从未如此轻松。

什么是主题

ASP.NET 2.0 引入了主题，以应对开发人员在尝试以最小的努力来定义服务器控件布局并使其与整个应用程序保持一致时所面临的困难。默认或全局主题包含在框架内的特殊文件夹中，可以在源文件和类文件中进行声明。但是，自定义主题也可以保存在 ASP.NET 应用程序内的预定义“App_Themes”文件夹中，从而更轻松地根据您的需求进行管理和应用。主题的核心部分是具有 .skin 扩展名的皮肤文件。除了皮肤文件，主题还可以由样式表 .css 文件以及图像组成，为网站布局提供额外的支持。

全局主题

.NET Framework 2.0 安装路径下的一个特殊位置保存了内置主题

[编辑评论：为了避免滚动，使用了换行符。]

%SystemRoot%\Microsoft.NET\Framework\VX.X.XXXX\
                        ASP.NETClientFiles\Themes\

根据您所考虑的 ASP.NET 2.0 的生成版本，标记为 vX.X.XXXX 的子目录的实际名称会发生变化。在此路径中定义的主题对运行在该计算机上的所有应用程序都可见。但是，ASP.NET 2.0 Beta 2 用户将不会在此指定位置找到此文件夹，因为 ASP.NET 团队已从该产品的 Beta 2 版本中删除了全局主题支持。但是，当 Microsoft 于今年 11 月推出 Visual Studio 2005 时，他们将提供预定义的主题作为附加组件。这些附加主题可以单独购买或下载，并将安装在上述指定文件夹中。

如何应用主题

可以通过多种方法使用主题。以下示例展示了如何通过不同方法在您的应用程序中定义一个名为“SmokeAndGlass”的主题。

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

可以在 Page_PreInit 事件处理程序中以编程方式设置主题。必须在此事件处理程序中定义它们，因为在页面加载之前，所有外观都会应用于特定主题中定义的服务器控件。以下是您可以如何以编程方式设置主题的方法：

protected void Page_PreInit(object sender, EventArgs e)
{
    // Applying theme to a particular page

    Page.Theme = "SmokeAndGlass";
}

主题也可以存储在 web.config 文件中，它将应用于整个应用程序。因此，在此文件中声明的主题不需要在 @Page 标记下的任何其他文件中声明。

<configuration>
    <system.web>
        <pages theme=“SmokeAndGlass” />
    </system.web>
</configuration>

创建主题

您可以创建自己的主题来应用到您的网站或单个页面。页面主题定义在 Web 应用程序根目录下的特殊 App_Themes 文件夹中。在页面主题中，您可以定义控件皮肤 - 用于单个控件的设置，例如 Button、TextBox、超链接和 DataGrid 等。您通常为要在应用程序中使用的每种控件定义一个控件皮肤，并设置控件属性，以便所有控件都具有相似的外观。但是，请注意，主题仅配置控件的视觉属性，而不改变其运行时行为。以下是一个典型的皮肤文件示例：

<asp:Label runat="server" ForeColor="#585880" 
       Font-Size="0.9em" Font-Names="Verdana" />

<asp:Calendar runat="server" BorderStyle="double" 
  BorderColor="#E7E5DB" BorderWidth="2" BackColor="#F8F7F4" 
  Font-Size=".9em" Font-Names="Verdana">
    <TodayDayStyle BackColor="#F8F7F4" BorderWidth="1" 
          BorderColor="#585880" ForeColor="#585880" />
    <OtherMonthDayStyle BackColor="transparent" 
                                ForeColor="#CCCCCC" />
    <SelectedDayStyle ForeColor="#6464FE" 
                       BackColor="transparent" 
                       cssclass="theme_highlighted" />
    <TitleStyle Font-Bold="True" BackColor="#CCCCCC" 
          ForeColor="#585880" BorderColor="#CCCCCC" 
          BorderWidth="1pt" cssclass="theme_header" />
    <NextPrevStyle Font-Bold="True" ForeColor="#585880" 
                            BorderColor="transparent" 
                            BackColor="transparent" />
    <DayStyle ForeColor="#000000" BorderColor="transparent" 
                                 BackColor="transparent" />
    <SelectorStyle Font-Bold="True" ForeColor="#696969" 
                                     BackColor="#F8F7F4" />
    <WeekendDayStyle Font-Bold="False" 
             ForeColor="#000000" BackColor="transparent" />
    <DayHeaderStyle Font-Bold="True" ForeColor="#585880" 
                                 BackColor="Transparent" />
</asp:Calendar>

Beta 1 随附的所有全局主题都可以在 .zip 示例应用程序中找到。这些文件可以帮助您更好地理解皮肤文件。

命名皮肤

没有 SkindID 的皮肤称为默认皮肤，而具有 SkindID 的皮肤称为命名皮肤。命名皮肤为具有唯一 ID 的两个或多个服务器控件定义不同的布局。ID 可以在同一个文件中定义，也可以创建具有不同 ID 的不同文件，这完全取决于您的个人方法和喜好。可以通过 SkinID 来引用命名皮肤。以下是一个示例：

命名皮肤

<asp:Label runat="server" ForeColor="#585880" 
   Font-Size="0.9em" Font-Names="Verdana" SkinID="LabelHeader" />

<asp:Label runat="server" ForeColor="#585980" Font-Size="0.8em" 
                       Font-Names="Arial" SkinID="LabelFooter" />

引用命名皮肤

<asp:Label id="Header" runat="server" SkinID="LabelHeader" />

<asp:Label id="Header" runat="server" SkinID="LabelFooter" />

动态应用主题

通过添加几行代码，可以动态地将主题应用到您的应用程序。这将使用户可以选择符合他们口味的主题。以下示例展示了如何实现此功能：

protected void Page_PreInit(object sender, EventArgs e)
{ 
    string theme = ""; // setting the value to none

    if (Page.Request.Form.Count > 0) 
    {
        // "Themes" is the ID of dropdownlist

        theme = Page.Request["Themes"].ToString(); 
        if (theme == "Default")
        {
            theme = "";
        }
    }
    this.Theme = theme; // applying themes to the overall page

}

Web Forms 中定义的所有控件都继承了从 ID 为 “Themes” 的 DropDownList 中选择的主题中定义的属性。您必须将所有全局主题以及自定义主题添加到应用程序的 “App_Themes” 文件夹下，上述示例将无法访问全局主题文件夹中的主题。

结论

ASP.NET 2.0 主题与 Windows XP 和 Windows Server 2003 的主题在一定程度上是相似的，并为各种控件提供了皮肤。主题是继 CSS 样式表之后在样式领域中的下一个重大进展。与样式表不同，主题可以以编程方式进行操作。总而言之，ASP.NET 2.0 的主题和皮肤文件是为 Web 开发人员在最短的时间内提供最佳样式体验的一大飞跃。