ASP.NET 主題與外觀完整教學：打造一致性 UI

ASP.NET 主題 讓你集中管理網站外觀，包含外觀、CSS 樣式表、圖片與其他資源。本文說明主題架構、兩種外觀類型、建立步驟與實際範例。

核心概念

• 主題目錄：位於網站根目錄 App_Themes 下，每個子目錄代表一個主題名稱。
• 外觀檔：副檔名 .skin，定義控制項屬性設定，類似控制項標記但僅含樣式屬性。
• CSS：放入主題資料夾的 .css 會自動套用。
• 圖片/腳本：同樣置於主題資料夾，以相對路徑引用。

兩種外觀類型

建立主題步驟

1. 方案總管右鍵專案 → 加入 ASP.NET 資料夾 → Theme，命名為 SampleTheme。
2. 於主題資料夾新增 Label.skin、Calendar.skin 等外觀檔。
3. 頁面或 web.config 設定 Theme="SampleTheme" 或 StyleSheetTheme="SampleTheme"。

實際範例

Label.skin

<asp:Label runat="server" Font-Bold="true" ForeColor="orange" />
<asp:Label runat="server" SkinID="Blue" Font-Bold="true" ForeColor="blue" />

Calendar.skin

<asp:Calendar runat="server"
    BackColor="#FFFFCC" BorderColor="#FFCC66" BorderWidth="1px"
    DayNameFormat="FirstLetter" Font-Names="Verdana" Font-Size="8pt"
    ForeColor="#663399" Height="200px" ShowGridLines="True" Width="220px">
    <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
    <SelectorStyle BackColor="#FFCC66" />
    <OtherMonthDayStyle ForeColor="#CC9966" />
    <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
    <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
    <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
    <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" />
</asp:Calendar>

<asp:Calendar SkinID="Simple" runat="server"
    BackColor="White" BorderColor="#999999" CellPadding="4"
    DayNameFormat="FirstLetter" Font-Names="Verdana" Font-Size="8pt"
    ForeColor="Black" Height="180px" Width="200px">
    <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
    <SelectorStyle BackColor="#CCCCCC" />
    <WeekendDayStyle BackColor="#FFFFCC" />
    <OtherMonthDayStyle ForeColor="#808080" />
    <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
    <NextPrevStyle VerticalAlign="Bottom" />
    <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
    <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
</asp:Calendar>

套用主題

頁面指示詞：<%@ Page Theme="SampleTheme" %>
或 web.config 全站套用：<pages theme="SampleTheme" />

動態切換主題

在 Page_PreInit 事件中依使用者偏好設定 Page.Theme 屬性，即可即時切換外觀。