10.1.6 为数据绑定控件使用主题

10.1.6  为数据绑定控件使用主题

专业的Web站点中包括很多单个Web页面。开发人员需要利用工具将Web页面集成到完整统一的Web站点中。这些重要的工具之一是ASP.NET 2.0引入的称为主题的新功能。主题可以为各种控件定义格式化细节，同时在多个页面中无缝地重用这些格式。主题使得标准化Web站点外观的工作得以简化。一旦使用主题功能，就可以通过修改主题定义为整个Web站点提供合适的外观。

1．为什么需要主题

应用标准化格式的最常见方法之一是使用样式表（CSS）。CSS为格式化Web页面提供了跨平台的解决方案。这种Web页面与HTML 4结合，几乎现在流行的所有浏览器都对其提供支持。

CSS样式具有这么多的优点，读者可能感到疑惑，为什么开发人员还需要做其他工作？问题在于CSS规则受限于固定的样式属性集合。这些属性能够重用设置格式化细节（字体、边框、背景色和前景色等），但是它们显然无法控制ASP.NET控件的外观。例如，CheckBoxList控件包括一些属性，用于设置如何将项组织到行和列中。虽然这些属性影响控件的外观，但是它们不属于CSS范围，所以需要手工设置属性。另外，开发人员在设置格式时，还可能要定义控件行为。例如，可能需要标准化Calendar控件的选择模式，或者TextBox控件的换行。使用CSS显然不可能实现。

利用主题来定义样式属性集合能够解决这个问题，其中的样式属性可应用于多个页面。然而，与CSS不同，主题不是通过浏览器实现的。相反，主题是ASP.NET的内置解决方案，在服务器中实现。虽然主题并不代替样式，但是主题具有一些CSS不能提供的特性。以下是二者的主要不同点：

主题是基于控件的，而不是基于HTML。因此，主题能够定义和重用几乎所有控件属性。例如，主题可以设置常见节点的图片，接着将其应用到多个TreeView控件，或者为多个GridView定义模板的外观。CSS受限于样式属性，只能直接应用到HTML。

主题应用在服务器上。当主题应用在页面中时，发送给用户的是最终经过样式化的页面。当使用样式表时，浏览器收到的是页面和样式信息，然后在客户端将它们结合起来。

通过配置文件能够应用主题。这样，可以将主题应用到整个文件夹或者整个Web站点，而无需修改单个Web页面。

主题不使用与CSS相同的方式实现级联。就本质而言，如果在主题和单个控件中都设置了属性，那么主题的值会重写控件中的属性。然而，可以选择修改这种方式，在页面中预定义属性，这样使得主题更加类似样式表。
夸张地说，主题代替了CSS。然而，主题表示更高级的模型。为了实现格式化属性，ASP.NET将经常呈现内联样式规则。另外，将现有CSS样式与主题相结合是可行的。

2．主题文件夹和皮肤

所有主题都专用于应用程序。为了在Web站点中使用主题，开发人员需要创建定义主题的文件夹。这个文件夹放置在名为App_Themes的特定文件夹中，而该文件夹要放置在Web站点根目录下。换言之，名为ShoppingAssistant的Web站点具有一个MasterTheme主题，位于ShoppingAssistant\App_Themes\MasterTheme文件夹中。

只要每个主题都存储在独立的文件夹中，Web站点就能够包括多个主题定义。然而，在同一时间页面只能使用一个主题。

为了让主题能够真正发挥作用，需要至少在主题文件夹中创建一个皮肤文件。皮肤文件是扩展名为.skin的文本文件。ASP.NET不会直接使用皮肤——而是在后台使用皮肤来定义主题。

皮肤文件中包括一个控件标记列表—标记成对使用。皮肤文件中的控件标签不需要完整定义控件，而是仅设置需要标准化的属性。例如，如果尝试应用统一的颜色方案，可能仅设置一些属性，例如ForeColor和BackColor。当为ListBox控件添加控件标记时，可能设置为如下：

<%@ Page Language="C#" %>
<asp:ListBox runat="server" ForeColor="White" BackColor="Orange"/>

runat="server"是必需的，而其他部分是可选的。主题中不允许设置id属性，因为该属性用于唯一识别控件。

是否创建多个皮肤文件，还是将所有控件标记存储在单独的皮肤文件中，由开发人员来决定。两种方法是等效的，因为ASP.NET将一个主题文件夹中的所有皮肤文件作为同一个主题定义的一部分。在很多情况下，在独立的皮肤文件中为复杂控件（例如数据控件）创建独立的控件标记是很合理的。
ASP.NET还支持全局主题。该主题存储在[WinDir]\Microsoft.Net\Framework \[Version]\Themes文件夹中。然而，即使需要创建具有相同主题的多个Web站点，还是建议使用本地主题。使用本地主题能够使得部署Web站点更加容易，同时为将来在具体站点中进行修改提供灵活性。如果本地主题与全局主题同名，应优先应用本地主题，而忽略全局主题。两个主题不进行合并。

3．应用简单主题

为了将主题添加到项目中，可使用主题名称（本例中是CommonTheme）在App_Themes文件夹中创建一个子文件夹。接着将名为GridViewControl.skin的文件添加到这个子文件夹中，并且如示例10-8那样修改文件。

示例10-8：GridViewControl.skin文件

<asp:GridView runat="server" BackColor="White" BorderColor="#CC9966"
BorderStyle="None" BorderWidth="1px" CellPadding="4">
<FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
<RowStyle BackColor="White" ForeColor="#330099" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" 
ForeColor="#663399" />
<PagerStyle BackColor="#FFFFCC" ForeColor="#330099" 
HorizontalAlign="Center" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
</asp:GridView>

为在Web页面中应用以上主题，需要将Page指令的Theme属性设置为主题名称。（ASP.NET将自动扫描主题中的所有皮肤文件。）

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

当将主题应用到页面中时，ASP.NET会检测Web页面中的每个控件，同时检测皮肤文件，以便查看是否皮肤中是否定义了控件属性。如果ASP.NET在皮肤文件中发现了匹配的标记，皮肤文件中的信息将重写控件的当前属性。

图10-7显示了将包括GridView控件的页面应用CommonTheme主题后的结果。

图10-7

4．利用配置文件应用主题

使用Page指令能够将主题绑定到单个页面。然而，有时候需要在整个Web站点中应用主题。最简单应用主题的方法是在应用程序的Web.config文件中配置<pages>节来应用主题，如下所示：

<configuration>
<system.web>
<pages theme="CommonTheme" />
-----
</system.web>
</configuration>

当在Web.config文件中设置主题时，所设置主题将应用到Web站点的所有页面，这些页面不用进行自身的主题设置。如果页面设置了Theme属性，则页面的设置优先于Web.config的设置。

使用这种方法，对于将主题应用到部分Web站点也是很容易的。例如，可以为每个子文件夹创建一个独立的Web.config文件，接着使用<pages>设置来配置不同的主题。