體驗 .NET 2.0 的優雅 (2)：ASP.NET 主題與皮膚完整指南

ASP.NET 2.0 內建 主題與皮膚 機制，讓網站外觀切換零程式碼、設計時可見、學習曲線平緩。本文完整說明使用步驟、運作原理、Theme 與 StyleSheetTheme 差異與優雅之處。

一、視覺效果對比

Black Skin

White Skin

二、使用步驟

1. 專案新增 App_Themes 資料夾
2. 每個主題建立以主題命名的子資料夾，置入 .css、.skin、圖片、Flash 等資源
3. 設定控制項套用：
   • 一般控制項：CssClass 對應 CSS 類別名
   • 伺服器控制項：SkinID 對應 .skin 定義的 skinid
4. 套用主題三種方式：
   • 全域：Web.config <pages StyleSheetTheme="ThemeName" />
   • 頁面：<%@ Page StylesheetTheme="ThemeName" %> 或 Page.StyleSheetTheme = "ThemeName"
   • 角色/使用者選擇：搭配 MasterPage，User.IsInRole("RoleName") 動態決定

CSS 範例 (x.css)

.column { background-image: url(images/content-shim.gif); }
.gradient { background-image: url(images/content-shim-photo.gif); }
.solid { background-image: url(images/content-shim-none.gif); }
.header {
    background-image: url(Images/header.gif);
    background-repeat: no-repeat;
    position: relative; width: 789px; height: 76px; margin: 0 auto 5px auto;
}

Skin 範例 (x.skin)

<asp:imagebutton runat="server" Imageurl="Images/button-login.gif" skinid="login" />
<asp:image runat="server" Imageurl="Images/button-create.gif" skinid="create" />
<asp:image runat="server" ImageUrl="Images/button-download.gif" skinid="download"/>

原則：不同主題的 CSS 與 Skin 結構應完全相同，僅屬性值差異。

三、運作原理

• 主題差異本質：頁面與控制項樣式（字型、段落、背景、邊框）、部分圖片不同
• 傳統純 CSS 難處理 Image/ImageButton 圖片切換
• .NET 2.0 內建支援：伺服器控制項新增 SkinID，Page 類別新增 Theme/StyleSheetTheme 屬性
• 指定主題後，頁面自動連結主題目錄下 CSS 與 Skin 檔案
• Skin 以類 CSS 方式運作：指定 SkinID 的伺服器控制項自動載入並附加匹配屬性（最常用於 ImageUrl）
• 伺服器端完成，Skin 檔案快取於記憶體，效能無虞

四、Theme vs StyleSheetTheme 差異

測試發現：生成頁面中 <link href='...'> 位置不同——StyleSheetTheme 在 <title> 前，Theme 在後。CSS 載入優先序差異導致覆寫行為不同，Theme 優先級較高，可覆寫頁面內部樣式。

五、優雅之處

1. 框架內建零程式碼：甚至不需撰寫程式碼
2. VS2005 設計時支援：設計檢視即時預覽主題效果
3. 學習曲線平緩：熟悉 CSS 者零門檻上手