或許有些朋友還不是很清楚themes、skins。以下先介紹下themes、skins.。
一、簡介:
一看Themes、Skins這2名字就都知道是用來做什麼的了吧,下面就說下它是做什麼的(怎麼都知道了還說,~_~),利用Themes我們可以很容易的更改控制項、頁面的風格,而不需要修改我們的程式碼和頁面檔案。
Themes檔案被單獨的放在1個App_Themes資料夾下面,與你的程式是完全分開的。
二、怎麼使用Themes和Skins:
先來看一個很簡單的實例:
App_Themesdefault1.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_Themesdefault1.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_Themesdefault1.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了。
------------------------------------------
以上都是個人的看法和體會,如有不妥處,請大家多多指點,謝謝!