Share via


ASP.NET 佈景主題和面板概觀

更新:2007 年 11 月

主題就是屬性 (Property) 設定的集合,可讓您定義頁面和控制項的外觀,然後將此外觀一致地套用於 Web 應用程式的頁面、套用於整個 Web 應用程式,或是套用於伺服器上的所有 Web 應用程式。

主題和控制項面板

主題是由一組項目組成︰面板、階層式樣式表 (CSS)、影像和其他資源。主題至少會包含面板。主題是在您網站或 Web 伺服器的特殊目錄中定義。

面板

面板檔案的副檔名為 .skin,其中包含個別控制項的屬性設定,例如 ButtonLabelTextBoxCalendar 控制項。控制項面板設定類似控制項標記本身,但只包含您要設定為主題部分的屬性。例如,下列是 Button 控制項的控制項面板︰

<asp:button  BackColor="lightblue" ForeColor="black" />

您會在 Theme 資料夾中建立 .skin 檔案。面板檔案中可以包含一個或多個控制項型別的一個或多個控制項面板。您可以為每個控制項在不同的檔案中定義面板,或將主題的所有面板定義在單一檔案中。

控制項面板有兩種,即「預設面板」和「具名面板」:

  • 當主題套用至頁面時,預設面板會自動套用至所有相同型別的控制項。如果沒有 SkinID 屬性 (Attribute),控制面板即為預設面板。例如,如果您建立 Calendar 控制項的預設面板,此控制項面板會套用至使用此主題之頁面上的所有 Calendar 控制項 (預設面板完全是依照控制項型別來進行比對,所以 Button 控制項面板會套用至所有 Button 控制項,但不會套用至 LinkButton 控制項或從 Button 物件衍生的控制項)。

  • 具名面板是具有 SkinID 屬性集的控制項面板。具名面板不會根據型別自動套用到控制項,而是您必須設定控制項的 SkinID 屬性,以明確套用具名面板。建立具名面板可以讓您對應用程式中相同控制項的不同執行個體,設定不同的面板。

階層式樣式表

主題中也可以包括階層式樣式表 (.css 檔)。當您將 .css 檔案放置在 Theme 資料夾時,就會自動將樣式表套用為佈景主題的一部分。您可以在主題資料夾中使用副檔名 .css 定義樣式表。

主題圖形和其他資源

主題也可以包含圖形和其他資源,例如指令碼檔或音效檔。例如,頁面主題的一部分可能包含 TreeView 控制項的面板。做為佈景主題的一部分,您可以加入用來代表展開按鈕或收縮按鈕的圖形。

通常,佈景主題的資源檔所在的資料夾是與該佈景主題的面板檔案一樣,但資源檔也可以在 Web 應用程式的任何位置,例如 Theme 資料夾的子資料夾。若要參考 Theme 資料夾之子資料夾中的資源檔,請使用如下列 Image 控制項面板中所示的路徑:

<asp:Image  ImageUrl="ThemeSubfolder/filename.ext" />

您也可以將資源檔存放在 Theme 資料夾外。如果使用波狀符號 (~) 語法參考資源檔,Web 應用程式就會自動尋找影像。例如,假設您將佈景主題的資源放置在應用程式的子資料夾中,就可以使用格式為 ~/SubFolder/filename.ext 的路徑來參考資源檔,如下列範例所示。

<asp:Image  ImageUrl="~/AppSubfolder/filename.ext" />

設定主題的範圍

您可以為單一 Web 應用程式定義主題,或定義為可由 Web 伺服器上的所有應用程式使用的全域主題。在定義佈景主題之後,您可以使用 @ Page 指示詞的 Theme 或 StyleSheetTheme 屬性,將佈景主題放置在個別頁面上,或者透過設定應用程式組態檔中的 <pages> 項目,將佈景主題套用至該應用程式中的所有頁面。如果在 Machine.config 檔案中定義 <pages> 項目,則佈景主題會套用至伺服器上 Web 應用程式中的所有頁面。

頁面主題

頁面主題是具有控制項面板、樣式表、圖形檔案和其他資源的主題資料夾,這個資料夾會建立為網站中 \App_Themes 資料夾的子資料夾。每個主題都是 \App_Themes 資料夾的不同子資料夾。下列範例示範的是典型的頁面主題,定義兩個名為 BlueTheme 和 PinkTheme 的主題︰

MyWebSite
  App_Themes
    BlueTheme
      Controls.skin
      BlueTheme.css
    PinkTheme
      Controls.skin
      PinkTheme.css

全域主題

全域主題是可以套用至伺服器上所有網站的主題。全域主題讓您在維護同一伺服器上的多個網站時,可以定義您網域的整體外觀。

全域主題與頁面主題相似的地方在於它們同樣包括屬性設定、樣式表設定和圖形。不過,全域主題是存放在名為 Themes 的資料夾,這對 Web 伺服器而言是整體的設定。伺服器上的任何網站,以及任何網站中的任何網頁,都可以參考全域主題。

主題設定優先順序

您可以由指定如何套用主題,來指定主題設定接管區域控制項設定的優先順序。

如果您設定頁面的 Theme 屬性,則主題和頁面的控制項設定會合併起來,形成控制項最後的設定。如果同時在控制項和主題中定義控制項設定,主題的控制項設定會覆寫控制項的任何頁面設定。這種策略使主題可以在網頁之間建立一致的外觀,即使網頁上的控制項已經具有個別的屬性設定。例如,它讓您可將主題套用到使用先前版本之 ASP.NET 建立的網頁。

或者,您可以設定網頁的 StyleSheetTheme 屬性,將主題以樣式表主題的方式套用。在此情況下,在這兩個地方都定義設定時,本機頁面設定的優先權會高於在主題中定義的設定。這是階層式樣式表使用的模型。如果您想要設定網頁上個別控制項的屬性,又要套用主題以取得整體性外觀的話,可以將主題當做樣式表主題來套用。

應用程式層級佈景主題的項目無法部分取代全域主題項目。如果建立與全域主題同名的應用程式層級佈景主題,則應用程式層級佈景主題中的佈景主題項目將不會覆寫全域主題項目。

使用主題可以定義的屬性

通常可以使用主題來定義有關頁面或控制項外觀或靜態內容的屬性。您可以在控制項類別中,只將具有 ThemeableAttribute 屬性 (Attribute) 集的屬性 (Property) 設為 true。

明確指定控制項行為的屬性 (而不是外觀的屬性) 無法接受主題值。例如,您不能使用主題設定 Button 控制項的 CommandName 屬性。同樣地,您無法使用主題來設定 GridView 控制項的 AllowPaging 屬性或 DataSource 屬性。

請注意,您無法在佈景主題或面板中使用運算式產生器,它會在編譯時期於頁面中產生指派的程式碼運算式。

主題和階層式樣式表的比較

主題類似於階層式樣式表,這是指主題和樣式表都會定義一組可套用至任何頁面的通用屬性。但是,主題和樣式表有下列的不同點︰

  • 主題可以定義控制項或頁面的多個屬性,而不只是樣式屬性。例如,使用主題可以指定 TreeView 控制項的圖形、GridView 控制項的配置範本等等。

  • 主題可以包含圖形。

  • 佈景主題不重疊顯示樣式表所設定的方式。除非您使用 StyleSheetTheme 屬性來明確套用佈景主題,否則任何定義在頁面的 Theme 屬性所參考之佈景主題中的屬性值,預設會覆寫以宣告方式設定在控制項上的屬性值。如需詳細資訊,請參閱上述的「佈景主題設定優先順序」一節。

  • 每個頁面只能套用一個主題。和樣式表不同,您無法將多個主題套用至頁面,但可以套用多個樣式表。

安全性考量

佈景主題可能會在網站上使用時引起安全性問題。惡意佈景主題可以用於:

  • 更改控制項的行為,使其無法如預期般運作。

  • 插入用戶端指令碼,因而面臨跨站台的指令碼風險。

  • 更改驗證。

  • 公開 (Expose) 機密資訊。

  • 降低這些常見的威脅有:

  • 以適當的存取控制 (Access Control) 設定來保護全域和應用程式佈景主題目錄。而且只有受信任的使用者才可以將檔案寫入佈景主題目錄。

  • 不要使用來自未受信任之來源的佈景主題。總是先檢查任何來自組織外部的佈景主題是否有惡意程式碼,才加以用在網站上。

  • 不要在查詢資料中公開佈景主題名稱。惡意使用者可以利用這項資訊,使用開發人員未知的佈景主題,藉此公開機密資訊。

請參閱

工作

HOW TO:定義 ASP.NET 頁面佈景主題

HOW TO:套用 ASP.NET 佈景主題