Asp.NET 2.0 主题和皮肤
主题是Microsoft ASP.NET 2.0 提供给开发人员的一项新增功能。
在 Asp.NET 2.0 出现以前， 给网站提供更换主题功能是一项繁重的工作，鉴于每切换一套主题，都需要在页面更改相应的图片、字体、网页样式等等细小的元素，因而在代码编写之余，更要求资源的规范管理。而往往在网站的编写初期，如果没有一定的经验，很难全面的考虑到资源文件的细致归类及放置问题。最终导致网站改版时，大量的迁移和更改，稍有不慎，还会引发文件丢失的问题。
现在这些担忧，都在 Asp.NET 2.0 中得到了完善的解决。首先，您可以通过简单的代码编写实现复杂的功能；其次，Asp.NET 2.0 在处理主题的问题时提供了清晰的目录结构，使得资源文件的层级关系非常清晰，在易于查找和管理的同时，提供的良好的扩展性。
下面就让我们通过一个Demo感受一下Asp.NET 2.0 的新特性。
1. 建立主题文件夹：
在应用程序的根目录上单击右键，点选 Add Folder 下的 Theme Folder 选项后，会在根目录下出现名为 App_Themes 的空文件夹，所有的与主题有关的资源文件都会存储在这个文件夹下。
在本例中，选择以颜色不同的方式来区分主题，需要在主题文件夹（App_Themes）下建立两个以颜色为名称的文件夹。
操作方式：在 App_Themes 文件夹上单击右键，将鼠标移动到 Add Folder 选项上，发现在主题文件夹（App_Themes）新增文件夹的类型只有一种 Theme Folder：
建立两个主题文件夹，分别命名为 BlueTheme 和 PorpleTheme。
将主题 BlueTheme 应用于页面：
| <%@ Page Language="C#" StylesheetTheme="BlueTheme" %> |
3. 分别给每个主题添加 Skin 文件：
Skin 文件是实际包含主题所应用的格式设置的文件。一个主题可以包含一个或多个 Skin 文件。这没有关系，因为在将主题应用于页面时，ASP.NET Framework 将把某个主题下的多个 Skin 文件合在一起，而将这些文件视为一个 Skin 文件。
您可以根据需要将 Skin 文件命名为任何名称，在文件中可以通过声明某个控件的实例设置一个或多个此控件中的属性，从而使用 Skin 文件指定控件的外观。（注：并不是所有属性都可以设置，能设置的多为外观属性）。
本例中先在主题 BlueTheme 中建立新文件 Control.skin，在文件中对三个控件的某些属性进行了设置。
|
<asp:TextBox BackColor="#c4d4e0" ForeColor="#0b12c6" Runat="Server" />
<asp:Label ForeColor="#0b12c6" Runat="Server" />
<asp:Button BackColor="#c4d4e0" ForeColor="#0b12c6" Runat="Server" /> |
此时页面页面代码为:
| <body> <form id="form1" runat="server"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td height="23px" colspan="2"></td> </tr> <tr> <td align="center" height="50px"> <asp:Label ID="Label1" runat="server" Text="Enter Your Name:"></asp:Label> </td> <td> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> </td> </tr> <tr> <td align="center" height="50px"> <asp:Label ID="Label2" runat="server" Text="Enter Your Nickname:"></asp:Label> </td> <td> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </td> </tr> <tr> <td align="center" height="50px"> <asp:Button ID="Button1" runat="server" Text=" OK " /> </td> <td> <asp:Button ID="Button2" runat="server" Text="Cancel" /> </td> </tr> <tr> <td height="23px" colspan="2"></td> </tr> <tr> <td colspan="2"><br /><br /></td> </tr> </table> </form> </body> |
此时页面效果为:
4. 使用 CSS 文件做更细致的设置：
对于一套皮肤的设置,我们不仅需要对网页中的控件进行设置,还应该做到对网页中的任一显示元素都进行随心所欲的修改,这时,我们可以通过对CSS样式表文件的控制来达到目的.
本例中在主题 BlueTheme 中建立了新文件 Default.css, 在此文件中对页面中的 body,table,td 元素进行了设置.
| body { margin:0; padding:0; overflow:hidden; } .tableStyle { font-family:"宋体"; font-size:12px;color:#000000; line-height:120%; background-image:url(image/bg.jpg); } .tdStyle { background-image:url(image/Bar_out.gif); } |
再更改部分页面代码调用 CSS 样式后, 效果如下
5. 主题的动态切换：
在前台页面 Default.aspx 中添加一个下拉框,用来进行主题的选择.
| <tr> <td colspan="2"> <br /> 您可以在此处选择页面主题： <asp:dropdownlist id="ChooseTheme" runat="server" autopostback="true"> <asp:ListItem Value="BlueTheme">请选择颜色</asp:ListItem> <asp:ListItem Value="BlueTheme">蓝色</asp:ListItem> <asp:ListItem Value="PorpleTheme">紫色</asp:ListItem> </asp:dropdownlist> <br /><br /><br /> </td> </tr> |
在后台页面 Default.aspx.cs 中添加代码用来在每次刷新页面时替换新选的主题.
| protected void Page_PreInit(object sender, System.EventArgs e) { Page.Theme = Request["ChooseTheme"]; } |
点选下拉框中的选项,主题便会在页面刷新后改变,如:把蓝色主题切换为紫色主题，效果如下：
以上，便是 ASP.NET 2.0 中新增的主题功能，利用此项功能，我们不仅可以快速的将各式各样的外观应用于整个 Web 应用程序。还可以更加轻松的完成网站的扩充和维护工作。
