7.3主题

7.3　主题

主题是另一种统一页面风格的方式，母版页设置页面所共有的控件和布局；而主题设置页面的外观样式，包括背景颜色、字体颜色和边框等。主题和母版页共同控制着页面的风格，本节介绍主题的概念及其应用。

7.3.1　主题与外观文件

主题常用来定义一个系统的统一样式或风格，它与母版页都可以作用在多个页面上。主题有着以下几个特点。

（1）主题可以由多个文件组成，包括样式表、外观、图片或文件等。

（2）页面的主题可以在运行中替换掉。

（3）主题可以应用于多个页面，也可以用于多个应用程序。

无论主题是页主题还是全局主题，主题中的内容都是相同的。主题中包含三个重要的概念：主题、外观和样式表。其具体说明如下。

（1）主题（Theme）：它是一组属性，包括外观文件、级联样式表（CSS）文件、图像等元素，它可以将这些元素应用于服务器控件并规定其样式。

（2）外观（Skin）：外观文件的后缀名是.skin，它包含各个服务器控件的属性设置。外观文件也叫作皮肤文件。

（3）样式表（CSS）：样式表文件定义控件和块的样式，包括颜色、位置、对齐方式等。

主题并不是一个独立的文件，而是由多个定义样式和外观的文件构成的文件夹。主题的添加需要在项目名称上右击，如图7-8所示。

图7-8　添加主题

分别选择【添加】|【添加ASP.NET文件夹】|【主题】选项添加主题。主题将默认被添加在App_Themes文件夹下。接着在该主题文件夹下添加外观文件和样式文件等，完成主题创建。

外观文件的作用与样式表类似，但外观文件只定义页面中控件的样式。控件获取样式表中的样式，使用class等属性；而获取主题的样式，使用SkinID属性。

外观文件即为主题中的皮肤，其文件中的样式定义有两种形式，如下所示。

（1）不含SkinID属性，则其定义的样式将应用于所有控件。

（2）含SkinID属性，只有指定了该SkinID的控件才遵循指定的样式。

不含SkinID属性的控件样式又称为默认样式。主题中定义了SkinID属性的控件，可在页面中通过SkinID属性为页面控件指定样式。

如定义一个TextBox控件样式不含SkinID属性，则引用了该样式的页面中，所有的TextBox控件均为该样式。

主题文件的编写与控件的代码类似，不同的是，主题文件中的控件不能有ID属性；而且若没有特殊要求，最好没有Text属性。否则该控件不能起作用或只能显示同样的Text值。

如分别定义一个默认的TextBox控件样式，用来使TextBox字体颜色为黑色；以及一个指定了SkinID属性的控件样式，使其字体颜色为白色，其代码如下所示。

    <%--默认样式--%>
    <asp:TextBox runat="server" Font-Size="Large" ForeColor="Black"></asp:TextBox>
    <%--指定样式--%>
    <asp:TextBox SkinId="White" runat="server" Font-Size="Large" ForeColor="White">
    </asp:TextBox>

7.3.2　主题的创建

一个网站系统可以有多个主题，主题可以在页面创建后创建，也可在页面创建前创建，因此主题创建后并不是默认被页面加载的。

在ASP.NET中可以通过多种方式加载主题，如在页面中设置Theme或StylesheetTheme属性、通过配置文件以及通过改变页面的Theme属性值、SkinID属性值或CssClass属性值动态加载等。下面详细介绍如何使用这些方式加载主题。

1．通过修改配置文件为多个页面批量加载主题

一个网站系统只有一个Web.config配置文件，因此使用配置文件进行主题加载，该主题将被用于所有页面。

在Web.config中添加Theme属性或者StylesheetTheme属性，需要放在＜system.web＞节点下，即在文件中使用如下代码。

    <configuration>
      <system.web>
        <pages styleSheetTheme="主题名称或目录"/>
      </system.web>
    </configuration>

2．通过改变页面的Theme属性值动态加载主题

使用配置文件加载主题，能够使主题在页面加载之前被加载。而若要在页面中动态加载或改变主题，则需要使用页面的PreInit事件。这时主题中的皮肤文件和样式表文件会同时被加载。

Page对象中的事件由系统自动加载，其中，PreInit事件在Load事件之前发生，而页面及其控件的主题必须在PreInit事件或PreInit事件之前发生。Page对象中部分事件的发生顺序如下所示。

（1）PreInit事件，在页初始化开始时发生。

（2）Init事件，当服务器控件初始化时发生；初始化是控件生存期的第一步。

（3）InitComplete事件，在页初始化完成时发生。

（4）PreLoad事件，在页Load事件之前发生。

（5）Load事件，当服务器控件加载到Page对象中时发生。

（6）LoadComplete事件，在页生命周期的加载阶段结束时发生。

（7）PreRender事件，在加载Control对象之后、呈现之前发生。

（8）PreRenderComplete事件，在呈现页内容之前发生。

在PreInit事件中对主题进行加载时，除了可以加载页面的主题，还可加载单个控件的主题。

如对TextBox控件加载主题文件中主题SkinID="White"的样式，使用语句如下所示。

    protected void Page_PreInit(object sender, EventArgse)
    {
        TextBox.SkinID ="White";
    }

3．通过改变控件的CssClass属性值动态加载主题中的样式表

除了动态加载主题和动态加载主题中的皮肤外，还可以在后台页面中直接通过控件的CssClass属性值动态加载主题中的样式表。

在页面的Page指令中添加Theme或StylesheetTheme属性都可以用来加载指定的主题。但是当主题中不包含皮肤文件时两者的效果都一样，当主题中包含皮肤文件时两者因为优先级不一样会产生不一样的效果。它们的优先级依次为：StylesheetTheme＞Page＞Theme。

当加载主题到页面后，因为某些原因需要禁用某个页面或某个控件的主题，这时候可以通过设置Theme或StylesheetTheme的值为空来完成。另外，还可以将控件的EnableTheming的属性值设置为false指定禁用主题中的皮肤。