ASP.NET 界面外观设计与布局

4.1.1 什么是主题和外观
主题是指网页和控件外观属性设置的合集，通过使用主题能够定义页面和控件的样式，然后再Web
应用程序中应用页面和页面上的控件，可以简化样式控制。
主题包括一系列元素，这些元素主要有外观文件、样式表文件。
主题文件的扩展名为.skin，创建后，主题文件通常保存在Web应用程序的特殊目录App_Themes下。
一个Web应用程序可以拥有多个主题，每个文件夹就是一个主题，每个主题下都可以拥有自己的样式表和外观文件。
1、 外观文件
外观文件用于定义页面中服务器控件的外观，是主体的核心内容，其扩展名为.skin。
它包含了需要设置的各个控件的属性设置，但是在外观定义中不能主线ID属性的设置。
同一类型的控件外观分为 默认外观 和 命名外观 两种。
a) 默认外观
如果控件外观中没有设置SkinID属性，则称为默认外观。
在页面中应用主题时默认将自动应用于同一类型的所有控件。
在同一个主题中对于同一类型的控件只能设置一个默认外观。
b) 命名外观
设置了SkinID属性的控件外观称为命名外观。
SkinID属性命名唯一，不能重复。
在创建控件外观时可为同一类型的控件设置多个命名外观。
命名外观不会自动按类型应用于控件，要通过设置控件的SkinID属性来显示地声明。
2、 样式表文件
样式表文件即CSS文件，在主体中可以包含一个或多个样式表文件。
主体中的CSS文件和非主体的CSS文件没有本质区别。
将CSS文件存放在主体文件夹中，当主题被页面引用时将自动被引用，不需要使用标记进行专门的引用。
4.1.2 创建主题
1、添加主题文件夹

2、添加外观文件

接下来就可以在外观文件中添加对标准控件的定义。
在定义中必须包含runat=”server”，但是不能包含ID属性，并且所有的外观定义都要位于<%…和…%>之外
Skin1的使用：
（1） 创建一个新的窗体
（2） 窗体里放入一个Button,然后修改Button的属性，随便改，改的独特一点

（3） 选中下面这个Button之后，复制选中的那个句话，粘贴到新建的外观文件Skin1.skin中

（4） 注意这里有Button ID，但是外观不是一个控件的样式，而是一类控件的样式，所以要把ID删掉

（5） 我们再在.aspx页面中放入一个Button，不修改其样式

（6） 在.aspx页面中的第一行Page那一行，引入自己创建的样式文件theme1（这是个主题样式）

（7） 运行查看

我们可以看到两个Button是一个样式的，这是因为，我们在这整个Web页面（.aspx）里应用了主题Theme1
而主题Theme1是我们所写的左边那个的样式，当他应用到整个页面之后，页面内的所有Button按钮都是同左边样式相同的了
3、 添加样式表文件（.css）
在解决方案资源管理器中，右击 主题名称 Theme1,在弹出的快捷菜单中依次选择 添加—添加新项—样式表—改样式表名称—添加
在.css文件中可以对样式进行设置

4.1.3 使用主题
1、对单个页面使用主题
（1）在页面的@Page指令中添加Theme属性：

（2）在页面的@Page指令中添加StyleSheetTheme属性：

（3）备注：
以上两个属性都可以用来引用主题，但是如果页面中的某控件已经有了一些预定义的外观设置，并且和主题中的设置发生冲突，那么，在使用Theme属性引用主题时，预设的外观设置将被 主题中的外观文件 所覆盖；
而使用StyleSheetTheme属性引用主题，预设的外观设置将被覆盖所引用主题中的外观文件的设置
可见Theme属性的优先级高一些。
（4）比如：（两个Button,一个是设计好的，另外一个是原始的Button，正常的样式如Theme属性的预览图所示）
1）Theme属性
代码：

预览图：

运行图：

2）StyleSheetTheme属性
代码：

预览图：

运行图：

（5）案例：主题的使用
设计一个名为Theme1的主话题，使用该主题的页面中除了Label1以外，所有的文字均为黑色、宋体；label1中的文字为红色、楷体、加粗；文本框的边框颜色为红色；Button按钮上的文字为黑体、蓝色。
1） 创建一个空网站
2） 右击网站名称-添加-添加ASP.NET文件夹-主题-重命名为 Theme1
3） 右击主题名Theme1-添加-添加新项-外观文件-重命名为 SkinFile.skin
4） 在外观文件的<%…和…%>之外添加如下内容

5） 右击主题名Theme1-添加-添加新项-样式表-命名为StyleSheet.css，并输入以下代码

6） 新建一个名称为Default.aspx的Web窗体，在其中放置一个4行3列的表格用于页面布局。在表格中放置两个文本框控件、两个标签控件、两个按钮控件，设置Label1控件的SkinID属性为Label-red，设计视图如下图所示：（SkinID属性找不到，就直接从主题那里复制文字过去）

7） 切换到Default.aspx的源视图，在@Page指令中添加对应主题

8） 运行调试

2、对网站使用主题
如果要对网站中的所有页面使用主题，可以在Web.config文件的标记中设置Theme属性或者StyleSheetTheme属性，代码如下：

我将@Page后的添加主题去掉了，在Web.config重写
设计视图：

运行调试图：

总结：使用这种方法能快速修改网站中所有页面的外观
其实这样还是看不出来在Web.config下能够修改所有页面的外观这一特点，可以考虑用一个能够跳转页面的项目试试
3、动态加载主题
除了在页面声明和配置文件中指定主题之外，还可以通过编程方式在运行时，动态加载主题，实现自定义页面主题的功能。
动态加载主题的方法是，在页面Page_PreInit事件中，设置页面的Theme属性为指定的主题名称。
ASP.NET运行库在PreInit事件激发后，立即加载指定的主题。
案例：动态加载主题
设计默认主题、红色主题、蓝色主题，在页面中放置一个日历控件，实现在下拉列表中选择什么主题，就以什么主题来设置日历控件的外观。
（1） 创建一个空网站
（2） 右击网站名称-添加-添加ASP.NET文件夹-主题-重命名为 Common

（3） 右击主题Common-添加-添加新项-外观文件-创建SkinFile.skin外观文件

（4） 在外观文件SkinFile.skin的<%…和…%>之外添加如下内容：

（5） 重复步骤（2）~（4），主题名为Theme1，外观文件名为SkinFile1.skin，代码中的颜色改为Red

（6） 重复步骤（2）~（4），主题名为Theme2，外观文件名为SkinFile2.skin，代码中的颜色改为Blue

（7） 新建一个Web窗体，添加一个DropDownList控件，其4个列表项的Text属性分别为：请选择主题、默认主题、红色主题、蓝色主题，同时设置其AutoPostBack属性值为true
（8） 切换到Web页面，在@Page指令中添加对主题的引用

（9） 切换到Web的.cs页面（WebForm1.aspx.cs），输入如下代码

（10） 运行调试（别忘记在设计视图中添加进一个日历控件，不然没法显示出效果）

4.1.4 禁用主题
在默认情况下，主题中对页面和控件外观的设置，会覆盖页面和控件的本地设置，如果某些控件或页面已经有预定义的外观，并且不希望主题的设置将它覆盖，可以禁用主题。
如果要禁用空间或者页面的主题，需要将该控件或者页面的EnableTheming属性设置为false。
1、禁用页面主题代码如下：

还是上面的日历：（不变色了）

2、禁用控件主题的代码如下（以Label控件为例）：

页面设计：

Theme1：

运行调试：

总结：
在页面中引入自定义主题Theme1，Theme1中设定，它所控制的页面中，所有Lable控件都是固定的颜色，接着，在Web页面中，令Label3禁用主题，这就意味着Label3不会随着引入主题中规定Label要变颜色而变色，所以前两个都变了颜色，但是3没有变色。
3、如果想对页面中多个控件禁用主题，可以将这些控件放到一个Panel（面板？）控件内，然后对该Panel控件禁用主题，代码如下：

把日历放到了一个Panel里，然后禁用了Panel，运行调试的时候不会因为选择不同的主题而改变颜色。
补充：
行内样式：<asp:>
内部样式：<style>在这</style>
外部样式：<link href=”xxx.css”>
主题样式：（在网页第一行，引入自己创建的样式文theme1）Theme=”Theme1”
四种样式的优先级（由高到低）：
行内样式>主题样式>内部样式>外部样式
正常情况下，应用主题里面的样式在设计过程中是看不见，需要运行调试才可以看见，此时可以把主题样式中的Theme改为StyleSheetTheme=”Theme1”，就可以在设计的过程中看到应用的样式了