044. asp.net主题之三应用或禁用主题和动态加载主题
1.为单个页面指定主题可以将@Page指令的Theme或StyleSheetTheme属性设置为要使用的主题名称, 代码如下:
<%@ Page Theme ="MyTheme" %>
或
<%@ Page StyleSheetTheme="MyTheme" %>
StyleSheetTheme属性的工作方式与普通主题(使用Theme设置的主题)类似, 不同的是当使用StyleSheetTheme时, 控件外观的设置可以被页面中声明的同一类型的相同属性所代替. 例如: 如果使用Theme属性指定主题, 该主题指定所有的Button控件的背景都是黄色, 那么即使在页面中个别Button控件的背景色设置了不同颜色, 页面中所有的Button控件的背景依然是黄色. 如果需要改变个别Button的背景色, 则需要使用StyleSheetTheme属性指定主题.
禁用打个页面的主题, 只需要将@Page指令的EnableTheming属性设置为False即可. 代码如下:
<%@ Page EnableTheming ="False" %>
如果想要禁用控件的主题, 只要将控件的EnableTheming属性设置为False即可, 比如想要禁用Button的主题, 代码如下:
<asp:Button ID="Button1" runat="server" EnableTheming="false" Text="Button" />
2. 为应用程序指定和禁用主题:
为了快速地位整个网站的所有页面设置相同的主题, 可以设置Web.config文件中的<pages>配置节点中的内容. Web.config文件的配置代码如下:
<configuration>
<connectionStrings/>
<system.web>
<pages theme="ThemeName"></pages>
<!--或者<pages styleSheetTheme="ThemeName" ></pages>-->
</system.web>
</configuration>
若要禁用整个应用程序的主题设置, 只要将<pages>配置节中的Theme属性或者StyleSheetTheme属性设置为空即可;
下面演示一个动态加载主题的示例:
整体文件列表
Default.aspx文件内容:
<%@ Page Language="C#" AutoEventWireup="true" 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 id="Head1" runat="server"> <title>动态加载主题</title> </head> <body> <form id="form1" runat="server"> <div> 动态加载主题<br /> <table> <tr> <td style="width: 100px"> 选择主题：</td> <td style="width: 100px"> <asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True"> <asp:ListItem Value="Theme1">主题一</asp:ListItem> <asp:ListItem Value="Theme2">主题二</asp:ListItem> </asp:DropDownList></td> <td style="width: 100px"> <a href ="default.aspx">返回</a> </td> </tr> <tr> <td style="width: 100px"> 默认外观：</td> <td style="width: 100px"> <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox></td> <td style="width: 100px"> </td> </tr> <tr> <td style="width: 100px"> 命名外观：</td> <td style="width: 100px"> <asp:TextBox SkinID="textboxSkin" ID="TextBox2" runat="server" ></asp:TextBox></td> <td style="width: 100px"> </td> </tr> <tr> <td style="width: 100px"> </td> <td style="width: 100px"> <input id="Button1" type="button" value="button" /></td> <td style="width: 100px"> </td> </tr> </table> </div> </form> </body> </html>
Default.aspx.cs文件内容:
public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } //切换主题的时候触发下拉列表的选择项改变事件 protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) { string url = Request.Path + "?theme=" + DropDownList1.SelectedItem.Value; Response.Redirect(url); } //注意使用Theme属性指定页面的主题, 只能在页面的PreInit事件发生之前或者发生过程中设置, 当前示例是在发生过程中修改Page对象的Theme属性,达到修改主题的目的 void Page_PreInit(Object sender, EventArgs e) { string theme = "Theme1"; if (Request.QueryString["theme"] == null) { theme = "Theme1"; } else { theme = Request.QueryString["theme"]; } Page.Theme = theme; ListItem item = DropDownList1.Items.FindByValue(theme); if (item != null) { item.Selected = true; } } }
Theme1下StyleSheet.css文件内容:
body { text-align :center; color :Yellow ; background-color :Navy; } A:link { color:White ; text-decoration:underline; } A:visited { color:White; text-decoration:underline; } A:hover { color :Fuchsia; text-decoration:underline; font-style :italic ; } input { border-color :Yellow; }
Theme1下TextBoxSkin.skin文件内容:
<asp:TextBox runat="server" Text="主题1" BackColor="#FFE0C0" BorderColor="#FFC080" Font-Size="12pt" ForeColor="#C04000" Width="149px"/>
<asp:TextBox SkinId="textboxSkin" runat="server" Text="主题1" BackColor="#FFFFC0" BorderColor="Olive" BorderStyle="Dashed" Font-Size="15pt" Width="224px"/>
Theme2下StyleSheet.css文件内容:
body { text-align :center; color :#004000; background-color :Aqua; } A:link { color:Blue; text-decoration:underline; } A:visited { color:Blue; text-decoration:underline; } A:hover { color :Silver; text-decoration:underline; font-style :italic ; } input { border-color :#004040; }
Theme2下TextBoxSkin.skin文件内容:
<asp:TextBox runat="server" Text="主题2" BackColor="#C0FFC0" BorderColor="#00C000" ForeColor="#004000" Font-Size="12pt" Width="149px"/>
<asp:TextBox SkinId="textboxSkin" runat="server" Text="主题2" BackColor="#00C000" BorderColor="#004000" ForeColor="#C0FFC0" BorderStyle="Dashed" Font-Size="15pt" Width="224px"/>
最终效果图:
