Asp.net 輕鬆換膚

　 一、簡介：

　　利用Themes我們可以很容易的更改控制項、頁面的風格，而不需要修改我們的代碼和分頁檔。Themes檔案被單獨的放在1個App_Themes檔案夾下面，與你的程式是完全分開的。

　　二、怎麼使用Themes和Skins：

　　先看個非常簡單的執行個體： 

App_Themes\default\1.skin檔案代碼: 

＜asp:Label Font-Bold="true" ForeColor="Red" runat="server" /＞

　　default.aspx:檔案代碼：

＜%@ Page Language="C#" Theme="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＞Page with Example Theme Applied＜/title＞
＜/head＞
＜body＞
 ＜form id="form1" runat="server"＞
 ＜asp:Label ID="Label1" runat="server" Text="Hello 1" /＞＜br /＞
 ＜asp:Label ID="Label2" runat="server" Text="Hello 2" /＞＜br /＞
 ＜/form＞
＜/body＞
＜/html＞

　　可以看到我們在default.aspx並沒有寫如何的控制style的代碼，但運行取發現label上的字都變成了粗體紅色了，這就是1個最基本的theme例子。

　　App_Themes檔案夾：

　　App_Themes檔案夾位於程式的根目錄下，App_Themes下必須是Theme名稱的子檔案夾，子檔案夾中可以包含多個.skin和.css檔案。中建立2個Theme，名稱分別為default和default2：

　　使用themes

　　1、在1個頁面中應用Theme:

　　如果想在某1個頁面中應用Theme，直接在aspx檔案中修改＜%@ Page Theme="..." %＞，比如你想這個頁面應用default2 theme，設定＜%@ Page Theme="default2" %＞就OK

　　2、在所有頁面應用同1個Theme:

　　如果要在所有頁面上使用相同的Theme，在web.config中的＜system.web＞節點下加上句＜pages theme="..."/＞

　　3、讓控制項不應用Theme:

　　第1個例子中我們看到了2個Label的風格都變了,就是說.skin檔案中的風格在頁面上所有Label都起作用了。但有時我們希望某1個Label不應用.skin中的風格，這時你只需設定Label的EnableTheming屬性為false的時候就可以了。

　　也許你還想不同的label顯示不同的風格，你只需設定label的SkinID屬性就可以，見下面的執行個體：

App_Themes\default\1.skin

＜asp:label runat="server" font-bold="true" forecolor="Red" /＞
＜asp:label runat="server" SkinID="Blue" font-bold="true" forecolor="blue" /＞

deafult.aspx

＜%@ Page Language="C#" Theme="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＞Page with Example Theme Applied＜/title＞
＜/head＞
＜body＞
 ＜form id="form1" runat="server"＞
 ＜asp:Label ID="Label2" runat="server" Text="Hello 2" SkinID="Blue" /＞＜br /＞
 ＜asp:Label ID="Label3" runat="server" Text="Hello 3" /＞＜br /＞
 ＜/form＞
＜/body＞
＜/html＞

　　運行後就會發現2個label顯示的風格不一樣了。

　　4、其他方法：

　　前面已經說了在aspx檔案頭使用 ＜%@ Page Theme="..." %＞ 來使用theme，而用這個方法應用theme中的風格將會覆蓋你寫在aspx中的控制項屬性style。比如：

　　App_Themes\default\1.skin

＜asp:Label Font-Bold="true" ForeColor="Red" runat="server" /＞

　　default.aspx

＜%@ Page Language="C#" Theme="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"＞
＜/head＞
＜body＞
 ＜form id="form1" runat="server"＞
 ＜asp:Label ID="Label1" runat="server" Text="Hello 1" /＞＜br /＞
 ＜asp:Label ID="Label2" runat="server" Text="Hello 2" ForeColor="blue" /＞
 ＜/form＞
＜/body＞
＜/html＞

　　運行結果，所有的label的forecolor都為red。

　　而使用＜%@ Page StyleSheetTheme="..." %＞應用theme就不會覆蓋你在aspx檔案中寫的屬性style：

　　控制項應用style屬性的順序如下：

　　a、StyleSheetTheme引用的風格

　　b、代碼設定的控制項屬性(覆蓋StyleSheetTheme)

　　c、Theme引用的風格(覆蓋前面2個)

　　theme中包含CSS：

　　theme中也可以使用.css檔案,當你把.css檔案放在1個theme目錄下後,在用到了這個theme的頁面中自動會應用你的.css的

　　三、後台代碼輕鬆為網站換府膚

　　前面講的都是在aspx檔案或web.config中應用theme，而在blog這樣的每個使用者都有不同的skin的網站中用上面的方法來實現換skin顯然是不方便的。

　　下面就介紹怎麼在後台代碼中動態引用theme來解決上面的情況，theme必須在page被請求的最早期就應用上，所以我們必須在Page_PreInit事件中寫代碼，代碼很簡單，就1句：

Page.Theme = "..."; 

　　這裡我們只要從資料庫中去讀取每個使用者佈建的不同theme名就可以輕鬆實現每個使用者都有不同的skin了。