ASP.NET 2.0主題和皮膚實現網站美化

主題和外觀是ASP.NET 2.0 中的新增功能, 使用 ASP.NET 2.0 的“主題和外觀”功能，可以將樣式和布局資訊分解為單獨的檔案組，統稱為“主題”。然後，主題可應用於任何網站，影響網站中頁和控制項的外觀。這樣，通過更改主題即可輕鬆地維護對網站的樣式更改，而無需對網站各頁進行編輯。還可與其他開發人員共用主題。應用 ASP.NET 2.0的“主題和外觀”功能輕鬆實現對網站美觀的控制。

　　ASP.NET 提供了一些可在應用程式中對頁和控制項的外觀或樣式進行自訂的功能。控制項支援 Style 物件模型，用於設定字型、邊框、背景色和前景色彩、寬度、高度等樣式屬性。控制項還完全支援可將樣式設定與控制項屬性分離的階層式樣式表 (CSS)。可以將樣式資訊定義為控制項屬性或 CSS，也可以在名為 Theme 的單獨檔案組中定義此資訊，以便應用於應用程式的全部或部分頁。各控制項樣式在主題中被指定為 Skin。

　　“主題”，它提供了一種簡易方式，可以獨立於應用程式的頁為網站中的控制項和頁定義樣式設定。多個主題的優點在於，設計網站時可以不考慮樣式，以後應用樣式時也無需更新頁或應用程式代碼。此外，還可以從外部源獲得自訂佈景主題，以便將樣式設定應用於應用程式。一個主題的優點在於，樣式設定儲存在一個位置，可以獨立於應用該主題的應用程式來維護這些設定。

　　下面的樣本示範的頁具有同一個主題，應用該主題指定控制項樣式設定。注意，該頁本身並不需要包含任何樣式資訊。在運行時該主題自動將樣式屬性應用於該頁的控制項。

　　建立一個Web 項目，點擊“添加新項”，選擇“主題外觀”並命名為“Button.skin”,點擊“添加”按扭， 1所示

圖 1

　　當單擊“添加”按扭以後會彈出如下對話方塊 圖 2 問你是否將主題檔案添加到“App_Themes”檔案夾，在應用程式中，主題檔案必須儲存在根目錄的App_Themes檔案夾下，主題由此檔案夾下的命名子目錄組成，該子目錄包含一個或多個具有 .skin 副檔名的面板檔案的集合。主題還可以包含一個 CSS 檔案和/或映像等靜態檔案的子目錄。我們單擊“是”，這樣就為Web添加一個名為“Button”的主題。 3

圖 2 圖 3

　　我們可以看到在App_Themes檔案夾下有一個所建立的主題Button，在Button檔案夾下有一個Button.skin檔案，這就是我們添加的主題檔案，雙擊Button.skin檔案，為其添加皮膚設定代碼。
代碼如下：

＜asp:Button runat="server" BorderColor="yellow" BackColor="yellow" BorderStyle="dotted" /＞ ＜asp:Button runat="server" BorderColor="blue" BackColor="white" SkinID="Blue" /＞ ＜asp:Button runat="server" BorderColor="red" BackColor="red" Width="150" BorderWidth="2px" SkinID="red" /＞

　　從代碼中我們可以看到，我們為Button控制項設定了三個皮膚主題，＜asp:Button runat="server" BorderColor="yellow" BackColor="yellow" BorderStyle="dotted" /＞，這是預設的皮膚，在Web頁面中我們使用Button控制項時的預設設定，＜asp:Button runat="server" BorderColor="blue" BackColor="white" SkinID="Blue" /＞，＜asp:Button runat="server" BorderColor="red" BackColor="red" Width="150" BorderWidth="2px" SkinID="red" /＞設定了SkinID 分別為Blue和red的主題皮膚。

　　從上一個樣本中可以注意到，面板檔案的內容只不過是控制項定義（如果這些定義出現在頁面中）。一個面板檔案可以包含多個控制項定義，例如，每種控制項類型一個定義。在主題中定義的控制項屬性自動重寫應用了主題的目標頁中同一類型的控制項的區域屬性值。
　主題可位於應用程式級或電腦級（全域適用於所有應用程式）。如上所述，應用程式級主題放在應用程式根目錄下的 App_Themes 目錄中。全域主題放在 ASP.NET 安裝目錄下 ASP.NETClientFiles 檔案夾下的“Themes”目錄中，例如 %WINDIR%\Microsoft.NET\Framework\＜version＞\ASP.NETClientFiles\Themes。對於 IIS 網站，全域主題的位置是 Inetpub\wwwroot\aspnet_client\system_web\＜version＞\Themes。

　　我們設定好應用主題後，那麼怎麼為頁指定主題呢？我們在頁面中添加4個Button按扭，設定 4

圖4

　　代碼如下：

＜%@ Page Language="C#" AutoEventWireup="true" Theme="Button" CodeFile="Default.aspx.cs" Inherits="_Default" %＞ ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞ ＜html xmlns="http://www.w3.org/1999/xhtml" ＞ ＜head runat="server"＞ ＜title＞無標題頁＜/title＞ ＜/head＞ ＜body＞ ＜form id="form1" runat="server"＞ ＜div＞ ＜asp:Button ID="Button1" runat="server" Text="Button" /＞     預設皮膚的Button控制項＜br /＞ ＜br /＞ ＜br /＞ ＜asp:Button ID="Button2" runat="server" Text="Button" SkinID="Blue"/＞    命名皮膚SkinID="Blue"的Button控制項＜br /＞ ＜br /＞ ＜br /＞ ＜asp:Button ID="Button3" runat="server" Text="Button" SkinID="red"/＞    命名皮膚SkinID="red"的Button控制項＜br /＞ ＜br /＞ ＜br /＞ ＜asp:Button ID="Button4" runat="server" BackColor="DarkOrange" BorderColor="#C000C0" ForeColor="Yellow" Text="Button" Width="174px" EnableTheming="False"/＞    禁用主題的Button控制項＜br /＞  ＜/div＞ ＜/form＞ ＜/body＞ ＜/html＞

　　如上所示，通過將 ＜%@ Page " Theme="Button" %＞ 指令設定為全域主題或應用程式級主題的名稱（Themes 或 App_Themes 目錄下的檔案夾的名稱），可為單個頁指定主題。一頁只能應用一個主題，但該主題中可以有多個面板檔案，用於將樣式設定應用於該頁中的控制項。這樣Button.skin中設定的屬性就應用到頁面中。也可通過在 Web.config 中指定 ＜pages theme="..."/＞ 節，也可以為應用程式中的所有頁定義應用的主題。若要對特定頁取消設定此主題，可以將 Page 指令的 Theme 屬性設定為空白字串 ("")。請注意，主版頁面不能應用主題。
　　在頁面中有4個Button按扭，其中前三個應用了Button.skin檔案中設定的主題，Button1控制項應用了Button.skin中設定的預設皮膚；Button2控制項應用了Button.skin中SkinID為Blue的命名皮膚；Button3控制項應用了Button.skin中SkinID為Blue的命名皮膚，為控制項指定皮膚主題也很簡單，只要指定相應的SkinID屬性，入圖5

圖5

　　預設情況下，面板檔案中的控制項定義應用於受主題影響的應用程式的頁中同一類型的所有控制項。但是，您可能希望同一類型的控制項在應用程式中不使用外觀。例如，您可能希望 Button4 控制項不使用Button.skin檔案中設定的主題。那麼我們也可以對控制項禁用主題在樣本中Button4按扭通過將EnableTheming 屬性設定為 false，可將特定控制項排除在主題之外，＜asp:Button ID="Button4" runat="server" BackColor="DarkOrange" BorderColor="#C000C0" ForeColor="Yellow" Text="Button" Width="174px" EnableTheming="False"/＞。

　　運行這個程式，6

圖6