溫故知新ASP.NET 2.0(C#)(2) - Themes(主題)

溫故知新ASP.NET 2.0(C#)(2) - Themes(主題)

介紹

使用 ASP.NET 2.0 的“主題”功能，可以将樣式和布局資訊分解為單獨的檔案組，統稱為“主題”。然後，主題可應用于任何站點，影響站點中頁和控件的外觀。這樣，通過更改主題即可輕松地維護對站點的樣式更改，而無需對站點各頁進行編輯。還可與其他開發人員共享主題。

關鍵

1、在web site中添加App_Themes檔案夾，可以在每個主題檔案加内添加.skin檔案、.css檔案（指定主題後會自動加載主題下所有.css檔案）或者圖檔檔案

2、在web.config的<system.web>元素下的<pages>元素下設定theme或者styleSheetTheme屬性（針對全局）；在頁的@Page指令裡設定Theme或者StylesheetTheme屬性（針對目前頁）

3、Theme定義的樣式不可以覆寫；StylesheetTheme定義的樣式可以覆寫

4、.skin檔案裡不設定SkinId則就是預設的，設定了SkinId後則對應控件的SkinId屬性

5、動态修改Page的Theme要在Page_PreInit方法中實作

示例

Blue主題

<asp:Label runat="server" BackColor="blue" ForeColor="white" /> 

<asp:Label runat="server" BackColor="DarkBlue" ForeColor="white" SkinId="Dark" /> 

<%--ImageUrl如下設定則解析到該主題下的Images檔案夾的pic.jpg檔案--%> 

<asp:Image runat="server" ImageUrl="Images/pic.jpg" />

Red主題

<asp:Label runat="server" BackColor="red" ForeColor="white" /> 

<asp:Label runat="server" BackColor="DarkRed" ForeColor="white" SkinId="Dark" /> 

主題測試-Theme

Themes/Theme.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Theme.aspx.cs" 

        Inherits="Themes_Theme" Title="主題測試-Theme" Theme="Blue" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> 

        <p> 

                在頁頭部分指定Theme="Blue"</p> 

                相關主題檔案，我覺得最好把樣式寫在css裡然後設定控件的CssClass屬性 

                <br /> 

                <asp:Label ID="Label1" runat="server" BackColor="blue" ForeColor="white" /> 

                <asp:Label ID="Label2" runat="server" BackColor="DarkBlue" ForeColor="white" 

                SkinId="Dark" /> 

        </p> 

                <asp:Label ID="lbl" runat="Server" Text="不做任何設定（使用主題中的沒設定SkinId的樣式）" /> 

                <asp:Label ID="lbl2" runat="Server" Text="設定BackColor為black（因為設定的是頁的Theme屬性，是以無法覆寫原有樣式）" BackColor="black" /> 

                <asp:Label ID="lbl3" runat="Server" Text="主題測試設定SkinID為dark（指定SkinId）" SkinID="dark" /> 

</asp:Content>

主題測試-StylesheetTheme

Themes/StylesheetTheme.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="StylesheetTheme.aspx.cs" 

        Inherits="Themes_StylesheetTheme" Title="主題測試-StylesheetTheme" StylesheetTheme="Red" %> 

                在頁頭部分指定StylesheetTheme="Red"</p> 

                <asp:Label ID="Label1" runat="server" BackColor="red" ForeColor="white" /> 

                <asp:Label ID="Label2" runat="server" BackColor="DarkRed" ForeColor="white" SkinId="Dark" 

                /> 

                <asp:Label ID="lbl2" runat="Server" Text="設定BackColor為black（因為設定的是頁的StylesheetTheme屬性，是以可以覆寫原有樣式）" BackColor="black" /> 

主題測試-動态加載主題

Themes/Dynamic.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Dynamic.aspx.cs" 

        Inherits="Themes_Dynamic" Title="主題測試-動态加載主題" %> 

                相關.skin檔案内容如下：<asp:Image runat="server" ImageUrl="Images/pic.jpg" /> 

                <a href="?theme=blue">藍色主題</a>  <a href="?theme=red">紅色主題</a> 

                該Image控件應用主題中的樣式，包括ImageUrl 

                <asp:Image ID="img" runat="server" /> 

Themes/Dynamic.aspx.cs

using System; 

using System.Data; 

using System.Configuration; 

using System.Collections; 

using System.Web; 

using System.Web.Security; 

using System.Web.UI; 

using System.Web.UI.WebControls; 

using System.Web.UI.WebControls.WebParts; 

using System.Web.UI.HtmlControls; 

public partial class Themes_Dynamic : System.Web.UI.Page 

{ 

        protected void Page_Load(object sender, EventArgs e) 

        { 

        } 

        protected void Page_PreInit(object sender, System.EventArgs e) 

                // 動态修改Page的Theme要在Page_PreInit方法中實作 

                if (!String.IsNullOrEmpty(Request.QueryString["theme"])) 

                { 

                        Page.Theme = Request.QueryString["theme"]; 

                } 

                else 

                        Page.Theme = "blue"; 

}

     本文轉自webabcd 51CTO部落格，原文連結：http://blog.51cto.com/webabcd/344836，如需轉載請自行聯系原作者