ASP.NET：主题中的皮肤和样式表

ASP.NET：验证控件

ASP.NET：母版页与内容页

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事件中可以动态加载主题，此时皮肤文件和样式表文件会同时被加载，但在该事件中不能够调用页面的控件，因为在此事件中，页面控件还未初始化。
<%@ PageLanguage="C#"Theme="DynamicTheme"%>

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

……
protected void Page_PreInit(object sender,EventArgse)
{
    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事件中选择加载主题中的皮肤，但皮肤只能是命名皮肤。
<%@ PageLanguage="C#"Theme="DynamicCSS"%>
……
<a href="showdynamicskin.aspx?skin=professional">Professional</a>
<a href="showdynamicskin.aspx?skin=colorful">Colorful</a>
……
protected void Page_PreInit(objectsender,EventArgse)
{
    if (Request["skin"] !=null)
     { 
       switch (Request["skin"])
        {
            case "professional":
                grdMovies.SkinID = "Professional";
                break;
            case "colorful":
                grdMovies.SkinID = "Colorful";
                break;
        }
    }
}

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

除了动态加载主题外，还可以选择加载主题中的样式表。
样式表文件：App_Themes\DynamicCSS\GridView.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;
}

<%@ PageLanguage="C#"Theme="DynamicCSS"%>
……
<asp:GridViewid="grdMovies"Runat="server" DataSourceID="srcMovies"GridLines="none"
HeaderStyle-CssClass="Header"
AlternatingRowStyle-CssClass="Alternating"/>

<asp:DropDownList
id="ddlCssClass"
Runat="server">
<asp:ListItemText="Professional" />
<asp:ListItemText="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_Themes\Theme1\TextBox.skin
<%--TextBox默认皮肤--%>
<asp:TextBoxrunat="server"BackColor="Red"/>  
<%--TextBox命名皮肤1--%>
<asp:TextBoxrunat="server"BackColor="Yellow"SkinId="txtName"/>
<%--TextBox命名皮肤2--%>
<asp:TextBoxrunat="server"BackColor="Blue"SkinId="txtAge"/>

1、页面以Theme方式加载主题
<%@ PageLanguage="C#"AutoEventWireup="true"CodeFile="Default1.aspx.cs"Inherits="Default1" Theme="Theme1"%>
……
<form>
    <div>
    <asp:TextBoxID="TextBox1"runat="server"BackColor="Black"></asp:TextBox>
    <asp:TextBoxID="TextBox2 "runat="server"SkinID="txtName"BackColor="Black"></asp:TextBox>
    <asp:TextBoxID="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:TextBoxID="TextBox1"runat="server"BackColor="Black"></asp:TextBox>
    <asp:TextBoxID="TextBox2 "runat="server"SkinID="txtName"BackColor="Black"></asp:TextBox>
    <asp:TextBoxID="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;" />