ASP.NET加载主题和皮肤样式的各种方式

一、加载主题（皮肤、样式表）的多种方式

除了在页面指令中采用Theme或者StylesheetTheme为单个页面加载主题外，还可以通过配置文件为多个页面批量加载主题，另外，还可以通过改变页面的Theme属性值动态加载主题，或者通过改变控件的SkinID属性值动态加载主题中的皮肤，或者通过改变控件的CssClass属性值动态加载主题中的样式表。

1、通过修改配置文件为多个页面批量加载主题

在配置文件里添加Theme或者StyleSheetTheme属性

<configuration>  

<system.web>    

<!—<pages theme=”Theme_XP”/>-->

    <pages styleSheetTheme="Theme_XP"/>    

</system.web> </configuration>

此时配置文件目录下的所有页面都会自动加载改主题，但记得去掉Page指令里的Theme或者StyleSheetTheme属性，否则会重写配置文件的里的对应属性。 

2、通过改变页面的Theme属性值动态加载主题

在页面的PreInit事件中可以动态加载主题，此时皮肤文件和样式表文件会同时被加载，但在该事件中不能够调用页面的控件，因为在此事件中，页面控件还未初始化。

<%@ Page Language="C#" Theme="DynamicTheme" %>

…… <a href="DynamicTheme.aspx?theme=XP">Theme_XP </a>

<a href="DynamicTheme.aspx?theme=Win7">Theme_Win7 </a>

…… protected void Page_PreInit(object sender, EventArgs e)

{     Theme = "Theme_XP";     if (Request["theme"] != null)    

{         switch (Request["theme"])      

   {             case "XP":                

Theme = "Theme_XP";              

   break;        

    case "Win7":             

    Theme = "Theme_Win7";         

        break;        

}    

}

}

3、通过改变控件的SkinID属性值动态加载主题中的皮肤

除了在页面的PreInit事件中动态加载主题外，还可以在PreInit事件中选择加载主题中的皮肤，但皮肤只能是命名皮肤。

<%@ Page Language="C#" Theme="DynamicCSS" %>

…… <a href="showdynamicskin.aspx?skin=professional">Professional</a>

<a href="showdynamicskin.aspx?skin=colorful">Colorful</a>

…… protected void Page_PreInit(object sender, EventArgs e)

{     if (Request["skin"] != null)   

   {         switch (Request["skin"])       

  {             case "professional":              

   grdMovies.SkinID = "Professional";              

   break;           

  case "colorful":             

    grdMovies.SkinID = "Colorful";         

        break;         }

    }

}

4、通过改变控件的CssClass属性值动态加载主题中的样式表

除了动态加载主题外，还可以选择加载主题中的样式表。 样式表文件：App_ThemesDynamicCSSGridView.CSS

.Professional td {     padding:4px;     color:#333333;     background-color:#F7F6F3; }

.Professional .Header th {     padding:4px;     background-color:#5D7B9D;     font-weight:bold;     color:White; }

.Professional .Alternating td {     background-color:White;     color:#284775; }

.Colorful td {     padding:4px;     color:#333333;     background-color:#FFFBD6; }

.Colorful .Header th {     padding:4px;     background-color:#990000;     font-weight:bold;     color:White; }

.Colorful .Alternating td {     background-color:White; }

<%@ Page Language="C#" Theme="DynamicCSS" %>

…… <asp:GridView id="grdMovies" Runat="server" DataSourceID="srcMovies" GridLines="none" HeaderStyle-CssClass="Header" AlternatingRowStyle-CssClass="Alternating"/>

<asp:DropDownList id="ddlCssClass" Runat="server">

<asp:ListItem Text="Professional" /> <asp:ListItem Text="Colorful" /> </asp:DropDownList>

…… protected void btnSubmit_Click(object sender, EventArgs e)

{     grdMovies.CssClass = ddlCssClass.SelectedItem.Text; }

二、禁用主题（皮肤、样式表）

当加载主题到页面后，因为某些原因需要禁用某个页面的主题，或者说禁用某个控件的主题，此时我们可以采用设置Theme或者StyleSheetTheme为空来完成。而设置EnableTheming为False禁用的只是主题中的皮肤。

禁用主题：设置Theme或者StyleSheetTheme为空来完成，或者创建一个空的主题文件，然后关联它。

禁用主题中的皮肤：当以Theme方式加载主题时，我们可以设置控件或者页面的EnableThemeing为False禁用主题中的皮肤。

三、Theme和StyleSheetTheme的异同

两者都可用来加载指定的主题，当主题中不包含皮肤文件时，两者效果一样，当主题中包含皮肤文件时，两者因优先级不一样会产生不一样的效果，优先级依次为：StyleSheetTheme->Page->Theme，后面的会重写前面的相同部分。

皮肤文件：App_ThemesTheme1TextBox.skin

<%--TextBox默认皮肤--%>

<asp:TextBox runat="server" BackColor="Red"/>  

<%--TextBox命名皮肤1--%>

<asp:TextBox runat="server" BackColor="Yellow" SkinId="txtName"/>

<%--TextBox命名皮肤2--%>

<asp:TextBox runat="server" BackColor="Blue" SkinId="txtAge"/>

1、页面以Theme方式加载主题

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default1.aspx.cs" Inherits="Default1"  Theme="Theme1"%>

…… <form>  

   <div>   

  <asp:TextBox ID="TextBox1" runat="server" BackColor="Black"></asp:TextBox>    

<asp:TextBox ID="TextBox2 " runat="server" SkinID="txtName" BackColor="Black"></asp:TextBox>  

   <asp:TextBox ID="TextBox3" runat="server" SkinID="txtAge"></asp:TextBox>    

</div>

</form>

页面运行后的效果及生成的部分html代码如下，显然，主题中的皮肤文件TextBox.skin重写了页面中三个TextBox控件的相关皮肤属性BackColor，最终其值依次变成了Red，Bule，Yellow。

<input name="TextBox1" type="text" id="TextBox1" style="background-color:Red;" />

<input name="TextBox2" type="text" id="TextBox2" style="background-color:Yellow;" /> 

<input name="TextBox3" type="text" id="TextBox3" style="background-color:Blue;" /> 

2、页面以StylesheetTheme方式加载主题

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" StylesheetTheme="Theme1"%>

…… <form>     <div>    

<asp:TextBox ID="TextBox1" runat="server" BackColor="Black"></asp:TextBox>    

<asp:TextBox ID="TextBox2 " runat="server" SkinID="txtName" BackColor="Black"></asp:TextBox>    

<asp:TextBox ID="TextBox3" runat="server" SkinID="txtAge"></asp:TextBox>     </div> </form>

页面运行后的效果及生成的部分html代码如下，显然，页面中前两个TextBox控件的相关皮肤属性BackColor重写了主题中的皮肤文件TextBox.skin，最终其值依次变成了Black，Black，Blue。

<input name="TextBox1" type="text" id="TextBox1" style="background-color:Black;" />

<input name="TextBox2" type="text" id="TextBox2" style="background-color:Black;" /> 

<input name="TextBox3" type="text" id="TextBox3" style="background-color:Blue;" />