110
asp.net主題文件(css+.skin)的使用
一、簡介：關於主題文件的創建，請參看本博客https://blog.sina.com.cn/s/blog_67aaf4440100nl5k.html
利用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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="https://www.w3.org/1999/xhtml"＞
＜head runat="server"＞
＜title＞Page with Example Theme Applied＜/title＞
＜/head＞
＜body＞
＜form 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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="https://www.w3.org/1999/xhtml"＞
＜head runat="server"＞
＜title＞Page with Example Theme Applied＜/title＞
＜/head＞
＜body＞
＜form 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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="https://www.w3.org/1999/xhtml"＞
＜head runat="server"＞
＜/head＞
＜body＞
＜form 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了。
在哪裏添加Page_PreInit事件？
一.在頁麵的cs類當中寫 override vs會智能提示重寫OnPreInit
C# code
protected override void OnPreInit(EventArgs e)
{
this.Page.Theme = "blue";
}
二.手動寫入代碼
protected override void OnPreInit(EventArgs e)
{
this.Page.Theme = "blue";
}
最後更新：2017-04-02 22:16:10