Study Notes ASP.Net 之Theme & Skin

基本概念：

Theme 和 Skin用以定义页面中各个控件的显示样式，如字体大小，前/后景色等等。

一个Theme可以包括多个Skin，一个Skin可以定义多个控件的样式。

目的：

使得页面样式的制作可以与页面制作分工进行。

使得页面的布局、样式集中管理，方便修改。

使用：

目录结构：

如果一个Web应用有用到Theme（应用级别的Theme，下面会讲到全局级的Theme），则在该Web应用的根目录下有个名为” App_Themes”的子目录，而每个Theme都是”App_Themes”的一个子目录。

每个Skin都是Theme目录中的一个后缀名为.skin的文件。

Theme的使用级别：

全局Theme:

在ASP.Net的安装目录(通常是%WINDIR% \Microsoft.NET \Framework \<version>\)下，建立名为”Theme”的子目录，并在其下建立各个全局Theme目录。

全局Theme对于整个机器上的所有Web应用都可见。

应用级的Theme：

如”目录结构”中说到的，建立在Web应用根目录下的”App_Themes”目录下。

应用级的Theme只对当前Web应用可见。

Theme的引用：

页面引用：

在Web页面中用<%@ Page Theme="..." %>设定使用哪个Theme。选中的Theme在该页面有效。

配置引用：

在Web应用的配置文件中，用<pages theme="..."/> 设定使用哪个Theme。设定的Theme对于整个Web应用有效。

动态引用：

在页面的Page_PreInit()中，为Page.Theme 设定一个可见的Theme名称。

页面样式应用的优先级：

一共有4种方式设定页面的样式：CSS，StyleSheetTheme(Tutorial上说这是Server-Side Style, 我不是很明白它的含义)，各个控件自己设定的样式属性，Theme。如果设定有冲突，系统会按照Theme -> 控件各自属性 -> StyleSheetTheme -> CSS来设定页面样式。

只有一个例外： 控件可以通过设定EnableTheming="False" 使Theme的设定无效。当设定无效后，系统会按照 控件各自属性 -> StyleSheetTheme -> CSS来设定页面样式。

注：根据Tutorial，一个Theme中可以有多个CSS文件，只要在<head /> 中用<link rel="stylesheet" href="…"/> 来指定使用哪个CSS文件。但是我在使用中发现，如果页面使用了Theme,则指定CSS无效，系统会按照字典顺序使用文件名靠后的那个CSS文件。

Skin的引用：

在Skin文件中可以指定SkinID，也可以不指定；如果没有指定，则认为似当前Theme中该类型控件的默认Skin，如：

<asp:label runat="server" font-bold="true" forecolor="orange" />

<asp:label runat="server" SkinID="Blue" font-bold="true" forecolor="blue" />

如果页面中不指定SkinID，就是使用选中的Theme中的该类型控件的对应的默认Skin；也可以在页面中指定使用哪个Skin，如：

<asp:Label ID="Label1" runat="server" Text="Hello 1" />

<asp:Label ID="Label2" runat="server" Text="Hello 2" SkinID="Blue" />

注意：

1) 在同一个Theme中，对于同一种类型的控件，只能有一个默认Skin定义；相似的，同一个Theme中，对于同一种类型的控件，一个SkinID也只能有一个Skin定义。

2) Skin的文件名对于系统选择Skin没有任何用处，系统只是根据Skin所属的Theme，Skin文件中定义的控件类型，SkinID来选择Skin。所以Skin的划分可以根据控件类型(如：Label, Button等等)，也可以根据样式类型(如：Classic, Modern等等)，完全似取决于开发者的个人喜好。

用Theme封装模板：

Theme可以用来封装模板，便于一次性替代整个模块。例如使用以下的Skin文件，就可以在页面中只使用一行代码来定义一个完整的登录界面：

<asp:Login ID="Login1" runat="server"/>

Skin文件内容:

<asp:Login runat="server">
  <LayoutTemplate>
    <i>Please log in to this site:</i><br /><br />
    <table border="0" cellpadding="10" bgcolor="beige">
      <tr>
        <td>
          <asp:Label Font-Bold="true"  AssociatedControlID="UserName" ID="UserNameLabel" runat="server">User Name:</asp:Label>
          <br />
          <asp:TextBox ID="UserName" runat="server"></asp:TextBox>
          <asp:RequiredFieldValidator ControlToValidate="UserName" ErrorMessage="User Name is required."
            ID="UserNameRequired" runat="server" ToolTip="User Name is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator>
      </tr>
      <tr>
        <td>
          <asp:Label Font-Bold="true" AssociatedControlID="Password" ID="PasswordLabel" runat="server">Password:</asp:Label>
          <br />
          <asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox>
          <asp:RequiredFieldValidator ControlToValidate="Password" ErrorMessage="Password is required."
            ID="PasswordRequired" runat="server" ToolTip="Password is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator>
        </td>
      </tr>
      <tr>
        <td>
          <asp:Button CommandName="Login" ID="LoginButton" runat="server" Text="Log In" ValidationGroup="Login1" />
        </td>
      </tr>
    </table>
    <br />
    <asp:Literal EnableViewState="False" ID="FailureText" runat="server"></asp:Literal>
  </LayoutTemplate>
</asp:Login>

但是我认为Theme和Skin的主要目的在于将页面的样式/布局与页面分开，便于分工，修改；而不是作为Web Control在多个页面中复用的模块，所以应注意使用Theme的封装模板功能。

posted on 2005-08-26 18:28 奶酪阅读(1312) 评论(2) 编辑收藏举报