ASP.NET 2.0 主題與樣式完全掌握

主題機制簡介

ASP.NET 2.0 的主題功能將樣式與版面配置抽離為獨立檔案集合，讓開發人員能輕鬆切換網站外觀，無需逐頁修改。主題包含 .skin 檔（控制項屬性設定）、.css 樣式表、圖片等資源，統一存放於 App_Themes 目錄下。

主題目錄結構

App_Themes/
├── Blue/
│   ├── Blue.skin
│   ├── Style.css
│   └── Images/
│       └── logo.png
├── Red/
│   ├── Red.skin
│   ├── Style.css
│   └── Images/
│       └── logo.png
└── Default/
    └── ...

套用主題的四種方式

Theme vs StyleSheetTheme 關鍵差異

• Theme：套用後無法被頁面內的屬性覆寫，適合強制統一風格
• StyleSheetTheme：套用後可被頁面內屬性覆寫，彈性較大

Skin 檔案撰寫技巧

預設 Skin（無 SkinID）

<asp:Label runat="server" BackColor="Blue" ForeColor="White" Font-Bold="true" />
<asp:Button runat="server" BackColor="Navy" ForeColor="White" />

所有同類型控制項自動套用，除非控制項明確設定 EnableTheming="false"。

具名 Skin（有 SkinID）

<asp:Label runat="server" SkinID="Header" Font-Size="24px" ForeColor="DarkBlue" />
<asp:Label runat="server" SkinID="Error" ForeColor="Red" Font-Bold="true" />

使用時需在控制項指定 SkinID="Header"。

圖片路徑自動解析

<asp:Image runat="server" ImageUrl="Images/logo.png" />

執行時會自動解析為 App_Themes/CurrentTheme/Images/logo.png。

動態切換主題

必須在 Page_PreInit 事件中設定，否則會擲出例外：

protected void Page_PreInit(object sender, EventArgs e) {
    string theme = Request.Cookies["Theme"]?.Value ?? "Blue";
    Page.Theme = theme;
}

完整範例：Blue/Red 兩套主題

Blue.skin

<asp:Label runat="server" BackColor="Blue" ForeColor="White" />
<asp:Label runat="server" SkinID="Dark" BackColor="DarkBlue" ForeColor="White" />
<asp:Image runat="server" ImageUrl="Images/banner.jpg" />
<asp:Button runat="server" BackColor="SteelBlue" ForeColor="White" />

Red.skin

<asp:Label runat="server" BackColor="Red" ForeColor="White" />
<asp:Label runat="server" SkinID="Dark" BackColor="DarkRed" ForeColor="White" />
<asp:Image runat="server" ImageUrl="Images/banner.jpg" />
<asp:Button runat="server" BackColor="Firebrick" ForeColor="White" />

頁面使用

<%@ Page Theme="Blue" %>
<asp:Label ID="lblTitle" runat="server" Text="歡迎光臨" SkinID="Header" />
<asp:Label ID="lblMsg" runat="server" Text="這是一般標籤" />
<asp:Image ID="imgBanner" runat="server" />

進階應用：主題與 MasterPage 搭配

在 MasterPage 中設定 Theme 或 StyleSheetTheme，所有內容頁自動繼承。若內容頁需覆寫，可在內容頁的 Page_PreInit 中重新指定。

效能優化建議

• 將共用 CSS 抽離至主題外部，避免重複下載
• 使用 styleSheetTheme 作為基礎風格，Theme 作為強制覆寫層
• 生產環境啟用 CSS 壓縮與快取
• 避免在 Skin 中設定大量內嵌樣式，優先使用 CSS 類別