asp.net主題檔案(css+.skin)的使用

一、簡介：

    關于主題檔案的建立，請參看本部落格http://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" "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。比如：

＜asp:label font-bold="true" forecolor="red" runat="server" /＞

default.aspx

 ＜asp:label id="label1" runat="server" text="hello 1" /＞＜br /＞

 ＜asp:label id="label2" runat="server" text="hello 2" forecolor="blue" /＞

　　運作結果，所有的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";

}