043. asp.net主题之一初识主题和皮肤

主题由外观, 级联样式表(CSS), 图像和其它资源组成, 主题中至少包含外观. 他是在网站或Web服务器上的特殊目录中定义的:

外观:

外观文件是主题的核心内容, 用于定义页面中服务器控件的外观, 它包含各个控件(如Button, TextBox 或 Calendar控件)的属性设置. 控件外观设置类似于控件标记本身, 但只包含要作为主题的一部分来设置的属性. 例如, 下面的TextBox控件的外观代码:

<asp:TextBox runat="server" BackColor="PowderBlue" ForeColor="RoyalBlue" />

控件外观的设置与控件声明代码类似. 在控件外观设置中只能包含作为主题的属性定义. 上述代码中设置了TextBox控件的前景色和背景色属性. 如果将以上控件外观应用到单个web页面上, 那么页面内所有TextBox控件都将显示所设置的控件外观.

级联样式表:

主题还可以包含级联样式表(.css文件). 将.css文件放在主题目录中时, 样式表自动作为主题的一部分应用. 使用文件扩展名.css在主题文件夹中定义样式表. 主题中可以包含一个或多个级联样式表.

图像和其它资源:

主题还可以包含图像和其它资源, 如脚本文件或视频文件, 通常, 主题的资源文件与该主题的外观文件位于同一个文件夹中. 但也可以在Web应用程序中的其它地方. 例如主题目录下的某个子文件夹中的文件

============================================================================================

文件存储和组织方式

在Web应用程序中, 主题文件必须存储在根目录的App_Themes文件夹下(除全局主题之外), 开发人员可以手动或者使用VS工具创建该文件夹, 创建完成后, 如下图:

外观文件是主题的核心部分, 每个主题文件夹下都可以包含一个或多个外观文件, 如果主题较多, 页面内容复杂时, 外观文件的组织就会出现问题, 此时就需要开发人员在开发过程中, 根据实际情况对外观文件进行有效的管理. 通常根据SkinID. 控件类型  及文件 这三种方式组织:

三种常见的外观文件爱你的组织方式
根据SkinID	在对控件外观设置时, 将具有相同的SkinID放在同一个外观文件中, 这种方式适合网站页面较多, 设置内容复杂的情况
根据控件类型	组织外观文件时, 以控件类型进行分类, 这种方式适用于页面包含控件较少的情况
根据文件	组织外观文件时, 以网站中的页面进行分类, 这种方式适用于网站的网页较少的情况

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

创建一个简单的默认外观和命名外观实例:

1. 新建任意一个项目, 添加主题文件夹, 修改默认名称:

2. TextBoxSkin.skin文件代码如下:

TextBox的默认外观—-这行是不能有的, 否则会报错
<asp:TextBox runat="server" Text="文本框外观1" BackColor="#FFE0C0" BorderColor="#FFC080" Font-Size="12pt" ForeColor="#C04000" Width="149px"/>
带有SkinID属性的是命名外观—-这行是不能有的, 否则会报错
<asp:TextBox SkinId="textboxSkin" runat="server" Text="文本框外观2" BackColor="#FFFFC0" BorderColor="Olive" BorderStyle="Dashed" Font-Size="15pt" Width="224px"/>

任何控件的ID属性都不可用在外观文件中出现, 如果向外观文件中添加了不能设置主题的属性, 将会发生错误.

3. Default.aspx调用代码如下:

        <table>
            <tr>
                <td style="width: 100px">
                    默认外观：</td>
                <td style="width: 247px">
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td style="width: 100px">
                    命名外观：</td>
                <td style="width: 247px">
                    <asp:TextBox ID="TextBox2" runat="server" SkinID ="textboxSkin"> </asp:TextBox></td>
            </tr>
        </table>

4. 最终效果图: