asp.net中皮膚與樣式

怎樣寫一個主題的皮膚呢？：

就是類似於你在設計檢視下把一個控制元件的樣式設定好之後再把這個控制元件的原始碼考到皮膚檔案中，把不屬於皮膚的內容去了，如id就可以了

這個去了id之後，而不加SkinId這就是一個預設皮膚，也就是在引用頁面中如果不設定SkinID同一型別的控制元件都使用這個皮膚，如果設定SkinId

那麼就是不預設皮膚了，所以在引用的時候，一定要通過SkinID引用一下才可以，（注意在一個皮膚檔案中只允許有一個預設皮膚不然就會出

現錯誤）

在配置檔案裡新增Theme或者StyleSheetTheme屬性

<configuration>
  <system.web>
    <!—<pages theme=”Theme_XP”/>-->
    <pages styleSheetTheme="Theme_XP"/>  所有的控制元件都使用這個樣式
    </system.web>
</configuration>

 

在頁面的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_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;
}

<%@ 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_Themes\Theme1\TextBox.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>