ASP.NET2.0主题和皮肤实现网站美化

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

主题和外观是ASP.NET 2.0 中的新增功能, 使用 ASP.NET 2.0 的“主题和外观”功能，可以将样式和布局信息分解为单独的文件组，统称为“主题”。然后，主题可应用于任何站点，影响站点中页和控件的外观。这样，通过更改主题即可轻松地维护对站点的样式更改，而无需对站点各页进行编辑。还可与其他开发人员共享主题。应用 ASP.NET 2.0的“主题和外观”功能轻松实现对网站美观的控制。

　　ASP.NET 提供了一些可在应用程序中对页和控件的外观或样式进行自定义的功能。控件支持 Style 对象模型，用于设置字体、边框、背景色和前景色、宽度、高度等样式属性。控件还完全支持可将样式设置与控件属性分离的级联样式表 (CSS)。可以将样式信息定义为控件属性或 CSS，也可以在名为 Theme 的单独文件组中定义此信息，以便应用于应用程序的全部或部分页。各控件样式在主题中被指定为 Skin。

　　“主题”，它提供了一种简易方式，可以独立于应用程序的页为站点中的控件和页定义样式设置。多个主题的优点在于，设计站点时可以不考虑样式，以后应用样式时也无需更新页或应用程序代码。此外，还可以从外部源获得自定义主题，以便将样式设置应用于应用程序。一个主题的优点在于，样式设置存储在一个位置，可以独立于应用该主题的应用程序来维护这些设置。

　　下面的示例演示的页具有同一个主题，应用该主题指定控件样式设置。注意，该页本身并不需要包含任何样式信息。在运行时该主题自动将样式属性应用于该页的控件。

　　新建一个Web 项目，点击“添加新项”，选择“主题外观”并命名为“Button.skin”,点击“添加”按扭，如图 1所示

图 1

　　当单击“添加”按扭以后会弹出如下对话框图 2 问你是否将主题文件添加到“App_Themes”文件夹，在应用程序中，主题文件必须存储在根目录的App_Themes文件夹下，主题由此文件夹下的命名子目录组成，该子目录包含一个或多个具有 .skin 扩展名的外观文件的集合。主题还可以包含一个 CSS 文件和/或图像等静态文件的子目录。我们单击“是”，这样就为Web添加一个名为“Button”的主题。如图 3

图 2

图 3

　　我们可以看到在App_Themes文件夹下有一个所创建的主题Button，在Button文件夹下有一个Button.skin文件，这就是我们添加的主题文件，双击Button.skin文件，为其添加皮肤设置代码。
代码如下：

＜asp:Button runat="server" BorderColor="yellow" BackColor="yellow" BorderStyle="dotted" /＞
＜asp:Button runat="server" BorderColor="blue" BackColor="white" SkinID="Blue" /＞
＜asp:Button runat="server" BorderColor="red" BackColor="red" Width="150" BorderWidth="2px" SkinID="red" /＞

　　从代码中我们可以看到，我们为Button控件设置了三个皮肤主题，＜asp:Button runat="server" BorderColor="yellow" BackColor="yellow" BorderStyle="dotted" /＞，这是默认的皮肤，在Web页面中我们使用Button控件时的默认设置，＜asp:Button runat="server" BorderColor="blue" BackColor="white" SkinID="Blue" /＞，＜asp:Button runat="server" BorderColor="red" BackColor="red" Width="150" BorderWidth="2px" SkinID="red" /＞设置了SkinID 分别为Blue和red的主题皮肤。

　　从上一个示例中可以注意到，外观文件的内容只不过是控件定义（如果这些定义出现在页面中）。一个外观文件可以包含多个控件定义，例如，每种控件类型一个定义。在主题中定义的控件属性自动重写应用了主题的目标页中同一类型的控件的本地属性值。
　主题可位于应用程序级或计算机级（全局适用于所有应用程序）。如上所述，应用程序级主题放在应用程序根目录下的 App_Themes 目录中。全局主题放在 ASP.NET 安装目录下 ASP.NETClientFiles 文件夹下的“Themes”目录中，例如 %WINDIR%\Microsoft.NET\Framework\＜version＞\ASP.NETClientFiles\Themes。对于 IIS 网站，全局主题的位置是 Inetpub\wwwroot\aspnet_client\system_web\＜version＞\Themes。

　　我们设置好应用主题后，那么怎么为页指定主题呢？我们在页面中添加4个Button按扭，设置如图 4

图4

　　代码如下：

＜%@ Page Language="C#" AutoEventWireup="true" Theme="Button" CodeFile="Default.aspx.cs" Inherits="_Default" %＞

＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞

＜html xmlns="http://www.w3.org/1999/xhtml" ＞
＜head runat="server"＞
＜title＞无标题页＜/title＞
＜/head＞
＜body＞
＜form /＞
   禁用主题的Button控件＜br /＞
 ＜/div＞

＜/form＞
＜/body＞
＜/html＞

　　如上所示，通过将＜%@ Page " Theme="Button" %＞指令设置为全局主题或应用程序级主题的名称（Themes 或 App_Themes 目录下的文件夹的名称），可为单个页指定主题。一页只能应用一个主题，但该主题中可以有多个外观文件，用于将样式设置应用于该页中的控件。这样Button.skin中设置的属性就应用到页面中。也可通过在 Web.config 中指定＜pages theme="..."/＞节，也可以为应用程序中的所有页定义应用的主题。若要对特定页取消设置此主题，可以将 Page 指令的 Theme 属性设置为空字符串 ("")。请注意，母版页不能应用主题。
　　在页面中有4个Button按扭，其中前三个应用了Button.skin文件中设置的主题，Button1控件应用了Button.skin中设定的默认皮肤；Button2控件应用了Button.skin中SkinID为Blue的命名皮肤；Button3控件应用了Button.skin中SkinID为Blue的命名皮肤，为控件指定皮肤主题也很简单，只要指定相应的SkinID属性，入图5

图5

　　默认情况下，外观文件中的控件定义应用于受主题影响的应用程序的页中同一类型的所有控件。但是，您可能希望同一类型的控件在应用程序中不使用外观。例如，您可能希望 Button4 控件不使用Button.skin文件中设置的主题。那么我们也可以对控件禁用主题在示例中Button4按扭通过将EnableTheming 属性设置为 false，可将特定控件排除在主题之外，＜asp:Button ID="Button4" runat="server" BackColor="DarkOrange" BorderColor="#C000C0" ForeColor="Yellow" Text="Button" Width="174px" EnableTheming="False"/＞。

　　运行这个程序，如图6

图6