1. 程式人生 > >ASP.NET 主題(Themes)FAQ

ASP.NET 主題(Themes)FAQ

StylesheetTheme 與 Theme區別:

<pages StylesheetTheme="Theme_1"></pages>

StylesheetTheme:App_Themes中全域性樣式不會覆蓋使用者在頁面控制元件上的自定義樣式。

<pages Theme="Theme_1"></pages>

Theme:App_Themes中全域性樣式一定會覆蓋使用者在頁面控制元件上的自定義樣式。

1、主題是什麼

   主題由一組元素組成:外觀、級聯樣式表 (CSS)、影象和其他資源。主題將至少包含外觀。主題是在網站或 Web 伺服器上的特殊目錄中定義的。主題是一組Web Control的屬性設定的集合,提供一種簡單的方法設定控制元件的樣式屬性。

·         主題只在Web Control中有效

·         母板頁(Master Page)上不能設定主題,但是主題可以在內容頁面上設定

·         主題上設定的Web Control的樣式覆蓋頁面上設定的樣式

·         如果在頁面上設定EnableTheming="false",主題無效

·         要在頁面中動態設定主題,必須在頁面生命週期Page_Preinit事件之前

·         主題包括.skin和.css檔案

2、.skin是什麼檔案

.skin是外觀檔案,它包含各個控制元件(例如,Button、Label、TextBox 或 Calendar 控制元件)的屬性設定。控制元件外觀設定類似於控制元件標記本身,但只包含您要作為主題的一部分來設定的屬性。例如,下面是 Button

 控制元件的控制元件外觀:

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

在 theme 資料夾中建立 .skin 檔案。一個 .skin 檔案可以包含一個或多個控制元件型別的一個或多個控制元件外觀。可以為每個控制元件在單獨的檔案中定義外觀,也可以在一個檔案中定義所有主題的外觀。有兩種型別的控制元件外觀 -“預設外觀”和“已命名外觀”:

·         當向頁應用主題時,預設外觀自動應用於同一型別的所有控制元件。如果控制元件外觀沒有 SkinID 屬性,則是預設外觀。例如,如果為 Calendar 控制元件建立一個預設外觀,則該控制元件外觀適用於使用本主題的頁面上的所有 Calendar 控制元件。(預設外觀嚴格按控制元件型別來匹配,因此 Button 控制元件外觀適用於所有 Button 控制元件,但不適用於 LinkButton 控制元件或從 Button 物件派生的控制元件。)

·         已命名外觀是設定了 SkinID 屬性的控制元件外觀。已命名外觀不會自動按型別應用於控制元件。而應當通過設定控制元件的 SkinID 屬性將已命名外觀顯式應用於控制元件。通過建立已命名外觀,可以為應用程式中同一控制元件的不同例項設定不同的外觀。

3、如何為相同控制元件定義不同的Skin

    使用SkinID為控制元件定義不同的skin,例如

<asp:Label runat=server Text="ThemedLabel" BackColor="Red" /> -label的預設外觀         

 <asp:Label runat=server SkinId="BoldLabel" Text="ThemedLabel_WithSkinId" BackColor="Blue" Font-Bold="true" /> - 命名為BoldLabel 的Label外觀

   因此頁面沒有指定SkinId的label自動應用預設外觀,Label的SkinID設定為BoldLabel的Label控制元件應用BoldLabel外觀

4、如何組織主題檔案內容

   Theme檔案下可以包含多個.Skin檔案,所以可以多種方式組織你的主題檔案,所有的主題檔案在應用於頁面之前會合並。

·         一個.skin檔案包含所有的控制元件的外觀定義

·         每個控制元件一個.skin檔案

·         相同SkinID的控制元件放在一個.skin檔案中

5、有沒有辦法定義好的Theme檔案在多個程式中共享

伺服器上的任何網站以及任何網站中的任何頁面都可以引用全域性主題,使用全域性的主題可以在各個應用程式之間共享,例如你想建立一個全域性共享的主題theme1。IIS 伺服器上的全域性主題放置位置類似於 \Inetpub\wwwroot\aspnet_client\system_web\v2.0.xxxxx\Themes\Theme1

應用程式級別的主題會覆蓋全域性的主題,例如你在應用程式中也定義了Theme1的主題,那麼在應用程式級的Theme1主題將覆蓋全域性的主題Theme1

6、StyleSheetTheme是什麼

   主題還可以包含級聯樣式表(.css 檔案)。將 .css 檔案放在主題目錄中時,樣式表自動作為主題的一部分應用。使用副檔名 .css 在主題資料夾中定義樣式表。設定頁面的 StyleSheetTheme 屬性將主題作為樣式表主題來應用。如果您希望能夠設定頁面上的各個控制元件的屬性,同時仍然對整體外觀應用主題,則可以將主題作為樣式表主題來應用。EnableTheming="false"情況下StyleSheetTheme仍然有效。通過重寫屬性StyleSheetTheme來動態修改頁面上的主題樣式

 public override string StyleSheetTheme
 {
    get{ retrun "MyStyleSheetTheme"; } 
 }

7、主題(Theme/Skin)資源

一組相當不錯的Theme,可以直接應用的專案開發中