ASP.NET的Theme和Skin

theme就是一系列屬性設置,利用它可以定義頁面和空間的外觀。它控制的範圍可以是某些網頁、整個web應用程序,甚至可以是一個服務器上的所有Web應用。

theme和控件皮膚
theme由一系列元素組成:皮膚、css、圖片以及其它資源。它至少包含皮膚。theme在web server或web site的特殊目錄中定義。

皮膚
皮膚文件具有.skin的文件擴展名,包含諸如:button,label,textbox或calender等空間的屬性設置。空間皮膚設置就像空間自己的化妝,但只包含你要求設置的那些屬性的值。下面是一個button的皮膚設置:
<asp:button runat="server" BackColor="lightblue" ForeColor="black" />
 
你應該在theme目錄下建立.skin文件,一個.skin文件可以包含爲一種或種控件設置的一個或多個皮膚,你可以爲每個控件定義一個單獨的文件,也可以只定義一個文件包含所有空間皮膚的設置。

有兩種控件皮膚缺省皮膚和命名皮膚:
在theme應用到一個頁面時,缺省皮膚會自動應用到該頁面上的所有同類型的控件。什麼樣的皮膚是缺省皮膚呢?判斷的標準就是他是否有SkinID屬性,如果沒有,就是缺省皮膚。舉例來說,假如你爲日曆控件創建了一個缺省皮膚,這個皮膚會應用到使用theme的頁面上的所有日曆控件。(缺省皮膚通過控件類型匹配,這樣,button皮膚會應用到所有的button,但不會應用到LinkButton等繼承button的控件對象)。

一個命名皮膚具有一個SkinID屬性。命名皮膚不會自動通過類型應用到控件。你必須通過設置控件的SkinID屬性來顯式地應用一個命名皮膚。使用命名皮膚允許你爲相同控件的不同實例設置不同的皮膚。

層疊樣式表
theme同樣可以包含層疊樣式表(.css)文件。當你把一個.css文件放在theme目錄下時,其樣式表會自動成爲theme的一部分。你可以通過在與skin文件相同的目錄下創建.css文件來定義樣式表。

圖片和其它資源
Theme可以包含圖片和其它資源,如腳本文件或聲音文件。例如,你的theme的包含了一個TreeView控件的皮膚,你可以包含一些圖片用來表示其擴展或收起的按鈕。

一般情況下資源文件與skin文件在同一個目錄下,但他們可以在Web應用的任何地方,例如在theme目錄的一個子目錄。如果引用一個在theme目錄的子目錄下的資源文件,用一個類似下面Image控件所示的路徑:
<asp:Image runat="server" ImageUrl="ThemeSubfolder/filename.ext" />
 
你也可以把你的資源文件存儲在theme目錄之外的其他目錄。如果你使用(~)來引用資源文件,web應用會自動找到這些圖片。舉例來說,如果你把資源文件放在你的應用程序的一個子目錄,你可以用這樣的路徑:~/SubFolder/filename.ext 來引用資源文件,就像下面這樣:
<asp:Image runat="server" ImageUrl="~/AppSubfolder/filename.ext" />
 
Theme的範圍

你可以爲一個單獨的Web應用定義theme,也可以爲Web Server上的所有應用定義一個全局的theme。在theme定義後,你可以通過@Page設置頁面的Theme或StyleSheetTheme屬性來應用,你也可以通過在應用程序的設置文件中設置Pages元素來把theme應用到所有的頁面。如果<pages>元素定義在Machine。config文件,這個theme將會應用到這臺服務器的所有應用程序的所有頁面。

Page Theme
Page Theme是/App_Themes 的一個子目錄,包含控件皮膚,樣式表,圖片文件以及其它資源。每個Theme是/App_Themes的一個不同的子目錄。下面的例子代碼是一個典型的Page Theme,定義了兩個Theme,分別命名爲BlueTheme和PinkTheme。
MyWebSite
  App_Themes
    BlueTheme
      Controls.skin
      BlueTheme.css
    PinkTheme
      Controls.skin
      PinkTheme.css
 

Global Theme
    global theme是一個可以應用到服務器上所有Web site的theme。在你在一臺服務器上維護多個網站時,global theme允許你定義這些網站的總體風格。
    global theme與Page theme很相似,也包含屬性設置,樣式表設置和圖片。但是,global theme存儲在Web Server的全局目錄,命名爲/Themes。在這臺服務器上的任何網站,網站中的任何頁面,都可以引用這個global theme。

Theme設置的先後順序
你可以指定theme設置的先後順序,設置theme設置接管本地控件設置。

如果你設置一個頁面的Theme屬性,在theme中的控件設置和頁面上的頁面設置將合併成爲該控件的最終設置。如果一個控件屬性在頁面和theme中都進行了設置,theme中的控件設置將覆蓋頁面上的控件設置。這樣的策略使得各個頁面能夠保持一致的風格。例如,它可以允許你把theme應用到你在以前版本的ASP.NET中創建的頁面。

另外,你還可以把theme以樣式表的方式應用到頁面,通過設置頁面的StyleSheetTheme屬性。在這種情況下,本地頁面設置優先於theme中的設置。這是使用層疊樣式表的模型。如果你想設置單個的控件屬性,同時應用theme控制整體表現,你就可以把theme作爲樣式表來應用。

使用Theme可以設置的屬性
作爲一個通用規則,你可以使用theme定義有關page或控件外表或靜態內容的屬性。你只可以設置那些ThemeableAttribute屬性設置爲true的控件類。
顯式定義空間行爲的屬性不接受theme設置的值,例如,你不能通過Theme設置一個Button的CommandName屬性,類似的,你不能使用theme來設置GridView控件的AllowPaging屬性或DataSource屬性。

Theme和層疊樣式表
theme與層疊樣式表類似,他們都定義了一個通用屬性集,可以應用到任何頁面。但是,theme與樣式表有以下不同:

  • theme可以定義一個控件或頁面的許多屬性,不僅是style屬性。例如,使用theme,你可以爲TreeView控件設定圖片,爲GridView控件設置模版設計,等等。
  • Theme可以包含圖片
  • Theme與樣式表的覆蓋方式不一樣。例如,確省情況下,屬性值會覆蓋本地屬性值除非你把theme作爲樣式表應用。
  • 每個頁面只能應用一個Theme,你不能應用多個theme到一個頁面,不象樣式表那樣,可以應用多個到一個頁面。
     
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章