6.2 创建主题

6.2.1 创建外观文件

在创建外观文件之前，先介绍有关创建外观文件的知识。

外观文件分为默认外观和已命名外观两种类型。如果控件外观没有包含SkinID属性，那么就是默认外观。此时，向页面应用主题，默认外观自动应用于同一类型的所有控件。已命名外观是设置了SkinID属性的控件外观。已命名外观不会自动按类型应用于控件，而应当通过设置控件的SkinID属性将其显式应用于控件。通过创建已命名外观，可以为应用程序中同一控件的不同实例设置不同的外观。

控件外观设置的属性可以是简单属性，也可以是复杂属性。简单属性是控件外观设置中最常见的类型，如控件背景颜色（BackColor）、控件的宽度（Width）等。复杂属性主要包括集合属性、模板属性和数据绑定表达式（仅限于<%#Eval%>或<%#Bind%>）等类型。

下面通过示例来介绍如何创建一个简单的外观文件。

【例6.1】 创建一个简单的外观文件。（示例位置：TM\sl\06\01）

本示例主要通过两个TextBox控件分别介绍如何创建默认外观和命名外观。执行程序，示例运行结果如图6.3所示。

图6.3 创建外观文件示例图

程序实现的主要步骤如下。

（1）新建一个网站，应用程序根目录下创建一个App_Themes文件夹用于存储主题。添加一个主题，在App_Themes文件夹上右击，在弹出的快捷菜单中选择“添加ASP.NET文件夹”/“主题”命令，主题名为TextBoxSkin。在主题下新建一个外观文件，名称为TextBoxSkin.skin，用来设置页面中TextBox控件的外观。TextBoxSkin.skin外观文件的源代码如下：

        <asp:TextBox runat="server" Text="Hello World! " BackColor="#FFE0C0" BorderColor="#FFC080"
        Font-Size="12pt" ForeColor="#C04000" Width="149px"/>
        <asp:TextBox SkinId="textboxSkin" runat="server" Text="Hello World! " BackColor="#FFFFC0"
        BorderColor="Olive" BorderStyle="Dashed" Font-Size="15pt" Width="224px"/>

在代码中创建了两个TextBox控件的外观，其中没有添加SkinID属性的是Button的默认外观，另外一个设置了SkinID属性的是TextBox控件的命名外观，它的SkinID属性为textboxSkin。

（2）在网站的默认页Default.aspx中添加2个TextBox控件，应用TextBoxSkin.skin中的控件外观。首先在<%@ Page%>标签中设置一个Theme属性用来应用主题。如果为控件设置默认外观，则不用设置控件的SkinID属性；如果为控件设置了命名外观，则需要设置控件的SkinID属性。Default.aspx文件的源代码如下：

如果在控件代码中添加了与控件外观相同的属性，则页面最终显示以控件外观的设置效果为主。

6.2.2 为主题添加CSS样式

主题中的样式表主要用于设置页面和普通HTML控件的外观样式。

【例6.2】 为主题添加CSS样式。（示例位置：TM\sl\06\02）

本示例主要对页面背景、页面中的普通文字、超链接文本以及HTML提交按钮创建样式。执行程序，示例运行结果如图6.4所示。

图6.4 创建外观文件示例图

程序实现的主要步骤如下。

（1）新建一个网站，在应用程序根目录下创建一个App_Themes文件夹，用于存储主题。添加一个名为MyTheme的主题。在MyTheme主题下添加一个样式表文件，默认名称为StyleSheet.css。

页面中共有3处被设置的样式：一是页面背景颜色、文本对齐方式及文本颜色；二是超文本的外观、悬停效果；三是HTML按钮的边框颜色。StyleSheet.css文件的源代码如下：

        body
        {
            text-align :center;
            color :Yellow ;
            background-color :Navy;
        }
        A:link
        {
            color:White ;
            text-decoration:underline;
        }
        A:visited
        {
            color:White;
            text-decoration:underline;
        }
        A:hover
        {
            color :Fuchsia;
            text-decoration:underline;
            font-style :italic ;
        }
        input
        {
            border-color :Yellow;
        }

主题中的CSS文件与普通的CSS文件没有任何区别，但主题中包含的CSS文件主要针对页面和普通的HTML控件进行设置，并且主题中的CSS文件必须保存在主题文件夹中。

（2）在网站的默认网页Default.aspx中，应用主题中的CSS文件样式的源代码如下：