ASP.NET 2.0 主題與外觀：佈景主題、Skin 檔案、CSS 整合與動態切換完整實戰

主題與外觀核心概念

• 主題：位於 App_Themes 目錄下的命名子目錄 (如 App_Themes/BlueTheme)，包含一或多個 .skin 檔、選用 .css、圖片等靜態資源。
• 外觀：.skin 檔案定義控制項屬性預設值 (如 <asp:Button runat="server" BackColor="Blue" ForeColor="White" />)，不含 id、runat="server"。
• 套用層級：web.config (全站) → @ Page Theme="..." (單頁) → 程式碼 Page.Theme = "..." (動態)。

建立主題實戰步驟

1. 新增主題資料夾與 Skin 檔

• 方案總管 → 右鍵專案 → 加入 ASP.NET 資料夾 → App_Themes。
• 右鍵 App_Themes → 新增資料夾 → 命名 BlueTheme。
• 右鍵 BlueTheme → 加入新項目 → Skin 檔案 → 命名 Buttons.skin。

2. 定義 Skin 檔案

<!-- Buttons.skin -->
<asp:Button runat="server" BackColor="#003399" ForeColor="White" Font-Bold="true" BorderStyle="Solid" BorderWidth="1px" BorderColor="#000066" />
<asp:TextBox runat="server" BorderColor="#003399" BorderWidth="1px" BorderStyle="Solid" />
<asp:Label runat="server" ForeColor="#003399" Font-Bold="true" />
<asp:GridView runat="server" 
    HeaderStyle-BackColor="#003399" HeaderStyle-ForeColor="White" HeaderStyle-Font-Bold="true"
    RowStyle-BackColor="White" AlternatingRowStyle-BackColor="#EEF2FF"
    GridLines="Horizontal" BorderColor="#003399" BorderWidth="1px" />

• 同一控制項型別可定義多個 Skin，透過 SkinID 區分：

<asp:Button runat="server" SkinID="Primary" BackColor="#003399" ForeColor="White" />
<asp:Button runat="server" SkinID="Secondary" BackColor="Gray" ForeColor="White" />

頁面使用：<asp:Button SkinID="Primary" runat="server" />

3. 整合 CSS 檔案

• 在主題資料夾加入 Theme.css。
• web.config 或頁面無需額外設定，ASP.NET 自動將主題資料夾內所有 .css 以 <link> 註冊至頁面 <head>。

/* Theme.css */
body { font-family: 'Microsoft JhengHei', sans-serif; background: #F5F8FC; }
.highlight { background: #FFF8DC; border: 1px solid #FFD700; padding: 4px; }

套用主題三種方式

關鍵：必須在 Page_PreInit 階段設定，晚於此將失效。

動態切換主題：使用者個人化

protected void Page_PreInit(object sender, EventArgs e)
{
    if (Session["UserTheme"] != null)
        Page.Theme = Session["UserTheme"].ToString();
    else
        Page.Theme = "BlueTheme"; // 預設
}

protected void ddlTheme_SelectedIndexChanged(object sender, EventArgs e)
{
    Session["UserTheme"] = ddlTheme.SelectedValue;
    Server.Transfer(Request.Path); // 重新載入頁面套用新主題
}

主題與 Control 樣式屬性互動規則

1. 控制項宣告屬性 (如 <asp:Button BackColor="Red" />) 優先權最高，覆蓋主題。
2. 主題 Skin 定義次之。
3. 控制項預設值最低。

若需「主題提供基礎樣式，頁面可微調」，Skin 定義通用屬性，頁面僅覆寫差異屬性。

進階：主題資源本地化

• 建立 App_Themes/BlueTheme/zh-TW/Buttons.skin (文化特定子目錄)。
• ASP.NET 依 UICulture 自動選擇對應 Skin。

部署與效能

• 主題資料夾隨專案部署，.skin、.css、圖片皆為靜態檔案，IIS 直接服務，極快。
• 生產環境啟用靜態檔案快取 (web.config <staticContent> <clientCache>)。
• 預編譯網站 (aspnet_compiler -fixednames) 會將 Skin 編譯進組件，進一步提升啟動速度。

常見問題與解決

結語

ASP.NET 2.0 主題與外觀 將「樣式定義」從頁面程式碼中完全分離，實現全站一致性、零程式碼切換風格、設計師與開發者並行作業。善用 App_Themes、.skin、.css、SkinID、動態切換與本地化，即可打造專業級、可維護、使用者個人化的 Web 應用外觀系統。