ASP.NET程序设计教程：C#版第4版最新章节_崔淼著

3.1 使用主题和外观文件

主题（Theme）是从ASP.NET 2.0开始出现的一种新技术。利用主题可以为一批页面元素和ASP.NET控件定义外貌风格。例如，可以定义一批文本框（TextBox）、命令按钮（Button）的背景色和前景色，定义数据表控件（GridView）的头模板、尾模板的样式等。使用主题可以使页面的样式控制更加灵活、全面。主题将CSS、ASP.NET控件的外观，以及各种网站资源的管理有机地组织在一起，为开发人员控制统一的页面样式提供更加方便的设计手段。

3.1.1 使用主题

主题由一个文件组构成，其中包括外观文件（.skin，也称为“皮肤文件”）、CSS文件、图片和其他资源文件。一个主题至少要包含一个外观文件。

在解决方案资源管理器中，主题表现为一个ASP.NET特殊文件夹App_Themes下的一个子文件夹，其中可以存放外观文件（.skin）和级联样式表文件（.css）。

按照应用范围的不同，可将主题分为“全局主题”和“应用程序主题”两大类。全局主题是指保存在服务器特定文件夹下的一个或多个特殊文件夹。全局主题对服务器上的所有Web应用程序都有效。应用程序主题就是前面提到的保存在ASP.NET网站App_Themes文件夹下的一个或多个主题文件夹，主题的名称就是该文件夹的名称。通常所说的主题都是指应用程序主题，即保存在App_Themes文件夹下的主题文件夹。

在解决方案资源管理器中右击网站名称，在弹出的快捷菜单中选择“添加ASP.NET文件夹”→“主题”命令，系统将判断网站中是否已存在一个名为App_Themes的文件，若存在，直接在该文件夹下创建一个默认名称为“主题1”的子文件夹，“主题1”即为新建主题的名称。若网站中尚未创建任何主题，则命令执行后系统首先会创建App_Themes文件夹，而后创建“主题1”文件夹。

重复上述操作可在App_Themes文件夹中创建多个主题，如“主题1”“主题2”……“主题n”等。每个主题文件夹中又可以包含一个或多个不同的外观文件、级联样式表文件、图片文件或其他资源文件。

需要注意的是，当主题被页面引用时，存放在主题文件夹下的级联样式表文件将自动被引用，无须专门使用<link>标记进行引用，此时样式表已变成了主题的一个组成部分。

在页面的@Page指令中按下列代码所示添加页面的Theme属性或StyleSheetTheme属性，即可将主题应用到当前页面中。

或

需要说明的是，Theme和StyleSheetTheme都是用来引用主题的，但Theme的优先级更高一些。使用StyleSheetTheme属性引用外观文件时，其中的样式设置可以被控件的外观属性设置所覆盖。使用Theme属性引用外观文件时，控件的外观属性设置无效（被外观文件覆盖）。

3.1.2 使用外观文件

外观是指ASP.NET控件（位于Visual Studio工具箱中的控件，也称为“服务器控件”）的外观属性设置集合，它保存在扩展名为skin的外观文件中。由于外观文件的作用是设置控件的外部表现形式，故常将其称为“皮肤文件”。

1.创建和使用外观文件

在解决方案资源管理器中右击某主题名称，在弹出的快捷菜单中选择“添加”→“外观文件”命令，在弹出的对话框中填写外观文件的名称（默认为SkinFile.skin）后单击“添加”按钮，即可将外观文件添加到指定的主题中。

外观文件添加到网站后，系统将自动切换到如图3-1所示的外观文件代码编写窗口。其中，<%…%>之间的内容为注释文本，用于提示用户编写代码时的注意事项。外观文件的内容可在注释文本之外进行编写。

图3-1 外观文件代码编写窗口

例如，下列代码对所有ASP.NET标签控件（Label）的字号、字体及颜色进行了统一设置。

一旦将包含该外观文件的主题引用到某页面，则页面中所有的标签控件都将以20pt、楷体、红色显示。

如果页面中同类控件需要有不同的外观设置，可在代码中使用SkinID属性加以区分。举例如下。

代码含义为，默认的标签控件以20pt、楷体、红色显示，但SkinID属性为BlueLabel的标签显示为16pt、黑体、蓝色。控件的SkinID属性可以在设计视图中选中控件后，在如图3-2所示的“属性”窗口中进行设置，也可以直接在源视图中添加控件的属性设置代码。

【 演练3-1 】利用外观文件使页面中的Button控件和Panel（容器）控件具有如图3-3所示的样式。说明：Panel2中通过使用背景图片的方式实现了渐变色背景效果。

图3-2 控件的SkinID属性

图3-3 使用外观文件设置ASP.NET控件的外观

页面设计步骤如下。

新建一个ASP.NET空网站，向网站中添加一个名称为Default.aspx的Web窗体页面。向网站中添加App_Themes文件夹及NewTheme主题子文件夹。

（1）向页面中添加ASP.NET控件

切换到Default.aspx的设计视图，可以看到Visual Studio已经为页面创建了一个<div>层，且光标已定位在该层中。

1）双击工具箱中的Panel控件图标，向页面中添加第一个容器控件Panel1。

2）将光标定位到Panel1中输入说明文字“Panel1”后按〈Enter〉键换行。

3）双击工具箱中的Button控件图标，向Panel1中添加命令按钮控件Button1。将光标定位到按钮控件的后面按〈Enter〉键换行。

4）再次双击工具箱中的Panel控件图标，向Panel1中添加第2个容器控件Panel2，并输入说明文字Panel2。

（2）调整控件的大小及位置

添加ASP.NET控件到页面后，可通过以下几个途径调整其大小。

1）在设计视图中选中控件后，直接拖动控件周围的8个控制点。

2）选中控件后，在“属性”窗口中修改其Width属性值和Height属性值。

3）在源视图中设置控件的Width属性值和Height属性值。

例如，下列代码用于设置Panel1控件的宽度为400px，高度为184px。

调整页面中各控件及文字位置最简单、最粗略的方法就是在页面适当位置添加空格或按〈Enter〉键换行，每按一次空格键或〈Enter〉键，系统就会在HTML代码中添加一个“ ”标记或<br/>标记。更加严格的位置调整需要使用CSS或表格进行页面元素的定位。

以上操作完成后，在设计视图中可以看到如图3-4所示的未经修饰的页面效果。此时如果按〈F5〉键在浏览器中打开页面，效果如图3-5所示，只能看到按钮控件和容器控件的说明文字，两个容器控件因未设置边框而无法看到。

图3-4 未应用主题时在设计视图中看到的效果

图3-5 未应用主题时在浏览器中看到的效果

（3）向主题中添加外观文件和样式表

右击NewTheme主题，在弹出的快捷菜单中选择“添加”→“外观文件”命令后单击“添加”按钮，系统将在NewTheme主题文件夹中添加一个名为SkinFile.skin的外观文件。

右击NewTheme主题，在弹出的快捷菜单中选择“添加”→“样式表”命令后单击“添加”按钮，系统将在NewTheme主题文件夹中添加一个名为StyleSheet.css的样式表文件。添加到主题中的样式表文件不需要在页面中通过代码进行关联，当主题被引用时该样式表文件将自动被引用。

操作完成后将事先准备好的、用于设置Panel2的背景图片文件bgpanel.gif复制到New-Theme文件夹中。

（4）设计ASP.NET控件的外观

向外观文件SkinFile.skin中添加以下代码。

向外观文件StyleSheet.css中添加以下代码。

（5）设置对象属性

为网页引用主题可以使用前面介绍过的在@Page指令中添加Theme属性的方法。也可以在设计视图选择页面（DOCUMENT），并在“属性”窗口中设置其Theme属性值为主题名称NewTheme，此时系统会在@Page指令中添加Theme=＂NewTheme＂的属性设置。

在设计视图中选择Panel2容器控件，在“属性”窗口中设置其SkinID属性值为BgPanel，使控件使用外观文件中由BgPanel指定的Panel控件外观。

在设计视图中选择命令按钮控件Button1，在“属性”窗口中设置其Text属性值为“命令按钮”（指定按钮上显示的文字）。按〈F5〉键在浏览器中打开页面，即可看到预期的设计效果。

需要注意以下几点。

1）在页面（DOCUMENT）“属性”窗口中设置页面主题时，Visual Studio提供了Theme（页主题）和StyleSheetTheme（样式表主题）两个属性。两者的用法基本一致，主要区别在于调用的优先级不同。

当设置Theme时，先调用页面中的属性，再调用Theme中的属性，如果有重复的属性定义，最终以Theme中的属性为准。

当设置StyleSheetTheme时，先调用StyleSheetTheme中定义的属性，再使用页面中定义的属性，如果有重复属性定义，最终结果以页面中定义的属性为准。

2）在编写外观文件时，注释文本需要使用<%-注释文本-%>的格式，并且注释文本不能出现在ASP.NET控件标记<asp:…/>之间。

3）本例在Panel2中使用渐变色图片作为背景。为了提高页面的加载速度，该图片的宽度仅为1px，在外观文件设置中通过“background-repeat: repeat-x”属性设置了水平方向的平铺（一次下载，多次使用）。

2..skin文件与.css文件的区别

外观文件（.skin）和级联样式表文件（.css）的主要区别体现在以下几个方面。

1）外观文件可以使页面中多个同类ASP.NET控件具有相同的外观样式，而级联样式表只能通过设置CssClass属性实现单个ASP.NET控件的外观样式控制，如果页面中的控件较多，就会造成大量重复操作。

2）外观文件可以实现对所有ASP.NET控件的外观设置，而级联样式表文件并不是对所有ASP.NET控件都有效，其主要应用领域是HTML元素。

3）在控制外观属性较多的ASP.NET控件时，需要在样式表文件中定义大量的类名选择符，会使文件变得十分臃肿。而且若各CSS类之间的关系处理不好，还可能造成页面布局的混乱。

3.1.3 网页的动态换肤

在ASP.NET程序运行时，可以通过后台代码实现根据用户的选择动态变更ASP.NET页面主题，从而使其具有不同的外观。

3-1 网页的动态换肤

【 演练3-2 】在程序运行时动态变更页面主题。具体要求如下。

页面打开时显示如图3-6所示的默认外观样式，登录对话框带有一个立体边框，背景为淡蓝色。单击“绿色”超链接控件，对话框背景变为“从绿到白”的渐变色，页面和按钮控件中的文字均为蓝色、隶书，如图3-7所示。单击“蓝色”超链接控件，对话框背景变为“从白到蓝”的渐变色，页面和按钮控件中的文字均为红色，如图3-8所示。单击“默认”超链接控件，恢复到页面刚打开时的显示效果。

图3-6 默认外观

图3-7 绿渐变色外观

图3-8 蓝渐变色外观

程序设计步骤如下。

（1）设计Web页面

新建一个ASP.NET空网站，向网站中添加一个名为Default.aspx的Web窗体文件。在网站中创建一个名为images的文件夹，将事先准备好的两个背景图片（渐变绿和渐变蓝，外观默认使用纯色背景）复制到该文件夹中。

从工具箱向页面中添加一个Panel控件Panel1，向Panel1中添加一个用于布局的5行2列的HTML表格，在第1行合并左右两个单元格，输入说明文字，并添加3个超链接控件HyperLink1～HyperLink3；在第2行合并左右两个单元格，并添加一个标签控件Label1；在第3～4行左侧单元格中输入说明文字，右侧单元格各添加一个文本框控件；第5行在右侧单元格中添加两个命令按钮控件Button1和Button2，之间用空格拉开距离。

（2）设置对象属性

在设计视图中分别选中各控件，并在“属性”窗口中设置其属性。各控件的属性值设置情况见表3-1。初始属性设置完毕后，在设计视图中的程序界面如图3-9所示。

图3-9 设计视图中的程序界面

表3-1 各控件属性设置

需要注意以下几点。

1）超链接控件HyperLink的NavigateUrl属性，用于说明单击超链接时跳转到的网页。本例3个超链接控件被单击时都是跳转到自身，但通过“?”向目标URL传递了一个名为NewTheme的变量，其值分别为网站中3个不同主题的名称Default、Green和Blue。

由“?”传递的数据可以在目标页面中使用以下语句接收。

2）将文本框TextBox2的TextMode属性设置为Password，可指定文本框为密码框，输入其中的任何字符都将显示为特定的替代符号（如星号或圆点等）。

3）界面中各控件的简单对齐可以通过Visual Studio工具栏中的“对齐”按钮来实现。单击按钮右侧的▼标记，在打开的下拉列表中可选择不同的对齐方式。通过工具栏或在设计视图中拖动进行样式调整，Visual Studio都会以添加Style样式的方式记录在窗体页面的源视图中。

（3）添加主题和级联样式表文件

在解决方案资源管理器中向网站添加Blue、Default和Green共3个主题文件夹，如图3-10所示。向各主题文件夹中添加同名的外观文件Default.skin、Green.skin和Blue.skin。向Green和Blue主题文件夹中添加同名的级联样式表文件Green.css和Blue.css。