在ASP.NET 2.0中使用样式、主题和皮肤

ASP.NET 2.0的主题和皮肤特性使你能够把样式和布局信息存放到一组独立的文件中，总称为主题（Theme）。接下来我们可以把这个主题应用到任何站点，用于改变该站点内的页面和控件的外观和感觉。通过改变主题的内容，而不用改变站点的单个页面，就可以轻易地改变站点的样式。主题也可以在开发者之间共享。

　　ASP.NET包含了大量的用于定制应用程序的页面和控件的外观和感觉的特性。控件支持使用Style（样式）对象模型来设置格式属性（例如字体、边框、背景和前景颜色、宽度、高度等等）。控件也支持使用样式表（CSS）来单独设置控件的样式。你可以用控件属性或CSS来定义控件的样式信息，或者把这些定义信息存放到单独的一组文件中（称为主题），然后把它应用到程序的所有或部分页面上。单独的控件样式是用主题的皮肤（Skin）属性来指定的。

　　本文用大量的示例演示了在ASP.NET 2.0中如何使用样式、主题和皮肤特性。

给控件应用样式

　　Web用户界面是非常灵活的，不同的Web站点的外观和感觉是截然不同的。目前广泛采用的样式表（CSS）在很大程度上就是负责处理Web上遇到的丰富的设计需求的。ASP.NET的HTML服务器控件和Web服务器控件都被设计成优先支持CSS样式表。这一部分讨论如何在服务器控件上使用样式，并演示了它们所提供的Web窗体的外观和感觉的非常细微的控制。

给HTML控件应用样式

　　标准的HTML标记通过style属性来支持CSS，我们可以用分号隔离的属性/值对（pair）来设置它。所有的ASP.NET HTML服务器控件都可以采用标准HTML标记的方式来接受样式。下面的例子演示了大量的应用到HTML服务器控件的样式。在源代码中你可以看到，这些样式都是在控件显示的时候传递给浏览器的。

　　CSS还定义了class属性，你可以把它设置为文档中＜style＞...＜/style＞内包含的CSS样式定义。Class属性使你能够一次定义样式，在多个服务器标记上使用，避免了样式的重复定义。HTML服务器控件的style属性可以用这种方式来设置，如下所示：

　　在分析ASP.NET页面的时候，在System.Web.UI.HtmlControls.HtmlControl类中，样式信息被填充到CssStyleCollection类型的Style属性。这个属性本质上是一个字典，它把控件的样式暴露为每个样式属性键的按字符串索引的值集合。例如，你可以使用下面的代码设置和检索HtmlInputText服务器控件的width样式属性：

　　下面的例子显示了如何编程使用Style集合属性来控制HTML服务器控件的样式：

给Web服务器控件应用样式

　　Web 服务器控件添加了几个用于设置样式的强类型属性（例如背景色、前景色、字体名称和大小、宽度、高度等等），从而为样式提供了更多层次的支持。这些样式属性表现了HTML中可用的样式行为的子集，并表现为System.Web.UI.WebControls.WebControl基类直接暴露的"平面"属性。使用这些属性的优势在于，在开发工具（例如微软Visual Studio .NET）中，它们提供了编译时的类型检测和语句编译。

　　下面的例子显示了一个应用了几种样式的WebCalendar控件。请注意，当设置的属性是类类型（class type）的时候（例如字体），你必须使用子属性语法PropertyName-SubPropertyName（属性－子属性）：

　　System.Web.UI.WebControls名字空间包含了Style基类，它封装了公用的样式属性（其它的样式类，例如TableStyle和TableItemStyle都继承自这个基类）。为了指定控件的各个显示元素，大多数Web服务器控件都暴露了这个类型属性。例如，WebCalendar暴露和很多样式属性：DayStyle、WeekendDayStyle、TodayDayStyle、SelectedDayStyle、OtherMonthDayStyle和NextPrevStyle。你可以使用子属性语法PropertyName-SubPropertyName来设置这些样式的属性，如下面的例子所示：

　　下面的语法有稍微的不同，它允许你把Style属性声明为Web服务器控件标记内嵌套的子元素：

　　下面的例子显示了一种替代语法，但是它的功能与前面的语法是一样的。

　　使用HTML服务器控件的时候，你可以使用CSS类定义给Web服务器控件应用样式。WebControl基类暴露了一个叫做CssClass的字符串属性，用于设置样式类：

　　如果某个服务器控件上设置的属性没有与该控件的强类型属性相对应，那个该属性和值就被填充到控件的Attributes集合中。在默认情况下，服务器控件会把这些属性不作更改地呈现在HTML中，并返回给作出请求的浏览器客户端。这意味着，我们可以直接设置Web服务器控件的样式和类属性，而不必使用强类型的属性。尽管它要求我们理解控件的实际显示过程，但是它也是应用样式的一个灵活的途径。对于标准的输入控件，这样的操作用处很大，如下面的例子所示：

　　我们也可以使用WebControl基类的ApplyStyle方法来编程设置Web服务器控件的样式，如下面的代码所示：

利用主题来定制站点

　　前面的部分演示了几种通过设置控件自身的样式属性来指定控件样式的方法。例如，我们看看如下的页面（代码），在这个页面上的各个控件上都应用了很多样式设置。

　　作为在各个控件上指定样式的补充，ASP.NET 2.0引入了"主题"的概念，它提供了一种定义站点的控件和页面的样式设置的简单途径，而且它与应用程序的页面是分离的。主题的优势在于，你在设计站点的时候不用考虑它的样式，在将来应用样式的时候，不必更新页面或应用程序代码。你还可以从外部获取定制的主题，然后应用到自己的应用程序上。主题的优势是，样式设置都存储在一个单独的位置，它的维护与应用程序是分离的。

　　下面的例子演示了一个带有主题的页面。请注意，这个页面本身没有包含任何样式信息。主题在运行时自动地把样式属性应用到页面的控件上。

App_Themes文件夹

　　主题位于应用程序根目录的App_Themes文件夹中。主题由一个为主题命名的子目录和这个子目录下的一个或多个皮肤文件（带有.skin扩展名）组成。主题还可以包含CSS文件和/或存放静态文件（例如图像）的子目录。下图显示了定义了两个主题的App_Themes目录，分别叫做"Default"和"White"，每个主题包含一个皮肤文件和一个CSS文件。

　　查看前面的例子，你会发现皮肤文件的内容就是控件如何显示的简单定义。一个皮肤文件可以包含多个控件定义，例如为每种控件类型提供一个定义。在应用主题的时候，主题中定义的控件属性自动地重载相同类型的控件的本地属性值。例如，皮肤文件中的＜asp:Calendar Font-Name="Verdana" runat="server"/＞控件定义将会引发应用了该主题的页面中的所有Calendar控件都使用Verdana字体。该控件的这个属性的本地值都会被主题重载。请注意，在皮肤文件中给控件定义指定ID属性是错误的。

全局的和应用程序的主题

　　主题可以应用于应用程序层或机器层（用于所有的应用程序）。应用程序层的主题放置在应用程序根目录下的App_Themes目录中。全局主题放置在ASP.NET安装目录下的ASP.NETClientFiles文件夹下的"Themes"目录中，例如%WINDIR%\Microsoft.NET\Framework\＜version＞\ASP.NETClientFiles\Themes。IIS Web站点的全局主题的位置是Inetpub\wwwroot\aspnet_client\system_web\＜version＞\Themes。
给页面指定主题

　　通过把＜%@ Page Theme="..." %＞指令设置为全局或应用程序层的主题（Themes或App_Themes目录下的文件夹名称），我们可以为单个页面指定主题。一个页面只能应用一个主题，但是该主题中的多个皮肤文件可以用于设置页面上的控件的样式信息。

在配置文件中指定主题

　　你也可以在Web.config文件的＜pages theme="..."/＞部分中指定应用在程序的所有页面上的主题。如果需要取消某个特定的页面的主题，需要把该页面指令的主题属性设置为空字符串（""）。请注意，母版页不能应用主题；你应该在内容页上或配置文件中设置主题。

禁止某个控件应用主题

　　你可以通过把控件的EnableTheming属性设置为false，把特定的控件排除出主题的应用范围。

主题中的命名皮肤（Named Skins）

　　在默认情况下，皮肤文件中的控件定义会应用到页面上的所有相同类型的控件上。但是，你可能希望应用程序不同部分的同类控件显示为不同的样式。例如，在某个地方你可能希望文本和标签控件用粗体显示，在另一个地方可能希望它用斜体显示。你可以使用主题中的命名皮肤来实现这种功能。

默认皮肤和命名皮肤

　　你可以通过为控件建立不同的定义，在一个皮肤文件中为同类控件定义多种不同的样式。你可以把这些控件定义的SkinID属性设置为任何名称，接着在需要应用特定皮肤的控件上设置这个SkinID值。如果缺少SkinID属性，就应用默认的皮肤（没有设置SkinID属性的皮肤）。下面的例子演示了应用不同皮肤的标签和日历控件。请注意，页面中带有命名SkinID的控件从默认的皮肤中获取了不同的样式集合。

　　命名皮肤可以在主题的皮肤文件中用多种方式来组织。由于主题可以包含多个皮肤文件，你可能会把命名皮肤分割到单个文件中，使每个皮肤文件包含相同SkinID的多个控件定义。例如，在一个主题中，你可能拥有三个皮肤文件，它们分别与特定的SkinID值对应：

　　你也可以根据控件类型对皮肤文件进行分组，使每个皮肤文件包含特定控件的一组皮肤定义：

　　你甚至于可以根据站点的不同区域来分割皮肤文件，例如：

　　在一个主题目录下存放多个皮肤文件的能力使你能够灵活地组织它们。它还使你能够轻易地与他人共享皮肤定义，或者把皮肤定义从一个主题复制到另一个主题，而不需要编辑主题中的皮肤文件。

使用主题的服务器端样式

　　主题是在应用程序建立之后，甚至于在站点寄宿在生产服务器之后才应用到程序上的。给程序应用主题的人可能是该应用程序的开发人员。例如，让应用程序的开发人员和网站设计人员一起处理站点的外观是很常见的。在主题应用到程序上之后，主题定义中的样式属性会重载应用程序页面中的目标控件的属性值。

　　另一方面，开发者独立地构建样式信息也很常见。例如，在独立的文件中，使用级联样式表（CSS）来定义控件和标记样式。在这种情况下，你也可以使用主题，把主题当作是一种服务器端的样式表。通过这种方式应用样式表的时候，主题定义中的样式属性会设置应用程序中的控件的默认值，但是可以通过其它操作来重新设置页面中的控件的这些值，从而重载了主题定义。

宣告式的服务器端样式

　　当我们通过在@Page指令或配置文件的＜pages/＞段中设置Theme属性来应用主题的时候，主题中的皮肤的属性将会重载页面中目标控件的相同属性。下面的例子演示了页面中的一个标签控件，它的ForeColor被设置为蓝色。在应用的主题中，标签皮肤把ForeColor属性设置为橙色。当你运行页面的时候，请注意主题定义重载了本地控件属性，所有的标签都显示为橙色。

　　请注意，这个标签是橙色的（继承自主题）而不是蓝色的（控件设置）

　　当我们通过在@Page指令或配置文件的＜pages/＞段中设置StyleSheetTheme属性，把主题作为服务器端样式应用的时候，主题的属性是可以被页面中的控件重载的。下面的例子演示了应用StyleSheetTheme的情况（内容与上面一个例子相同）。请注意，页面中定义的ForeColor属性取得了胜利，所有的标签都显示为蓝色。

　　请注意，这个标签是蓝色的（控件设置）而不是橙色的（来自StyleSheetTheme）

主题和StyleSheetTheme（样式表主题）的优先问题

　　StyleSheetTheme是在应用程序开发的时候使用的，是一种在页面中构建样式信息的方法，目的是为了保证应用程序的行为与外观的改变无关。你可能需要在已经使用了StyleSheetTheme的应用程序中进一步应用主题。如果应用程序同时使用了主题和StyleSheetTheme，那么控件的属性将按下面的次序来应用：

　　· 首先应用StyleSheetTheme属性

　　· 应用页面中控件的属性（重载StyleSheetTheme）

　　· 最后应用主题的属性（同时重载控件属性和StyleSheetTheme）

　　下面的例子演示了上述内容。

　　请注意，页面重载了StyleSheetTheme 的斜体属性，但是主题的前景色重载了其它内容

Visual Web Developer的支持

　　VWD包含了对StyleSheetTheme的设计时（design-time）支持。当你把StyleSheetTheme应用到一个页面上的时候，Visual Studio中的"设计视图"在控件的显示预览中就反应了应用程序的状况。通过选择控件的智能事务面板（只有部分控件支持它）中的"自动格式化…"选项，你可以从可用的SkinID值列表中选择一个。"自动格式化"对话框显示了StyleSheetTheme中包含的可用SkinID值列表，同时还显示了应用选定的皮肤之后的控件样式预览。当你选中某个值之后，设计器会为该控件保存SkinID属性。

主题和皮肤的内容

　　前面的部分已经讲过，皮肤文件包含了控件属性值的定义，它可以应用在程序的同种类型的控件上。这一部分讨论添加到皮肤文件或主题的哪些内容是有效的。

Themable（可应用主题的）属性

　　皮肤文件中的控件定义只能包含属性的值，它们都被标记为Themeable（可应用主题）。每个控件都可以通过在属性上使用ThemeableAttribute来定义一组属性。把不可应用主题的属性添加到皮肤文件中会导致错误出现。某个控件本身可能被主题排除了，例如数据源控件就不可应用主题。在默认情况下，任何控件的ID属性是不能应用主题的。除非控件有特定的要求，否则在默认情况下，它的所有属性都是可以应用主题的。你可以参照.NET框架组件参考文档来确认控件的属性是否可以应用主题。

在主题中使用CSS

　　通过把级联样式表（CSS）放置在命名主题的子目录中，你可以给该主题添加CSS。如果页面包含了＜head runat="server"/＞控件定义，那么该CSS样式表将应用于所有使用了该主题的页面。你可以根据需要重命名CSS文件，只要它的扩展名是.css。一个主题可以包含多个CSS文件。当页面中包含了CSS文件的引用（在＜head/＞元素中使用＜link rel="stylesheet" href="..."/＞标记）的时候，主题中的CSS文件都在页面的样式表后面应用。

在主题中使用图像

　　主题中也可以包含图像，它们是皮肤文件中的控件定义引用的。皮肤文件中的图像引用必须使用主题目录下的图像文件夹的相对路径，这样皮肤文件和图像才能轻易地随应用程序迁移。在运行时，图像的路径会被重新定位，因此，对目标页面中的控件来说，这个引用是相对的。下面的例子演示了一个包含图像子目录的主题。

定制控件集合主题

　　你在皮肤文件中设置的大多数属性都是一些简单的值属性，例如Font-Name、Width和 BackColor。但是，你也可以设置皮肤集合属性。皮肤集合属性并非应用在目标控件的集合项的属性上，而是在使用主题或使用StyleSheetTheme合并集合的时候，完全地替代集合。

　　这对于某些包含样式集合的集合属性是有用处的，例如TreeView控件的LevelStyles（层次样式）属性或Menu控件的LevelMenuItemStyles（菜单项样式）、LevelSubMenuItemStyles（子菜单项样式）或LevelSelectedStyles（选中的样式）属性。

　　TreeView.skin的内容

定制控件模板主题

　　你还可以在皮肤文件中应用模板属性。与集合类似，在皮肤文件中定义模板属性也不会应用在目标控件的模板的单独项上，而是代替整个模板的内容。这对于使用主题或StyleSheetTheme戏剧化地改变模板控件的布局时有用处的。

　　Template.skin内容

在主题中使用数据绑定和表达式

　　请注意，在主题模板中使用＜%# Eval %＞或＜%# Bind %＞的数据绑定也是有效的，但是不允许使用其它的代码数据绑定或表达式。

　　Databinding.skin内容

主题和配置

　　你可能希望终端用户动态地为应用程序选择和应用主题。通过把活动主题存储在用户配置中，你可以根据用户的喜好动态的应用主题。为了实现这种功能，你需要编写代码来应用主题，而不能使用@Page指令或Web.config中宣告式的方法。

在代码中指定主题

　　为了在代码中应用主题，你必须在运行时设置Page（页面）对象的Theme属性。在请求的生命周期的早期（在PreInit事件中），你就必须给页面应用主题。在下面的例子中，用户从下拉列表控件中选择主题名称的时候，在PreInit事件中会动态地应用主题。

　　使用ASP.NET 2.0中的配置（Profile）特性，你可以把用户选择的主题存储起来，并在用户登陆站点的时候读取它。下面的例子演示了这种技术。用户可以选择自己喜欢的颜色并存储配置文件，接下来页面通过检索Profile对象中的主题名称，应用这种颜色主题。请注意，如果你登出站点，主题就存储为默认值（无主题），但是如果你返回该站点，用户的选择就会保留。

　　ProfileTheme_vb.aspx的内容

　　Profile_vb.aspx的内容

在ASP.NET 2.0中使用样式、主题和皮肤