rel="File-List" href="file:///C:%5CDOCUME%7E1%5C%E8%B5%96%E5%BC%BA%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_filelist.xml">
ASP.NET主題可以讓網站的頁面風格一致。使用它可以同時控制HTML元素和ASP.NET控件在頁面上的皮膚。
主題不同於母版頁。母版頁可以在網站的多個頁面間共享內容，而主題的作用是爲了控制內容的皮膚。
1 創建主題
在名爲“App_Themes”的應用程序的文件夾中新建文件夾就可以創建主題。在App_Themes中添加的每個文件夾都代表一個主題。
如果App_Themes文件夾不存在，可以創建一個。但是一定要在應用程序的根目錄中創建。
注：當使用Visual Web Developer時，可以通過以下方式創建一個新的主題文件夾：在解決方案資源管理器視圖中，在項目的右鍵菜單上選擇“Add ASP.NET Folder（添加ASP.NET文件夾）”，然後選擇“Theme（主題）”即可。
一個主題文件夾中有幾種不同類型的文件，包括圖片和文本文件。可以通過在主題文件夾中添加多個子文件夾來組織主題文件夾的內容。
在主題文件夾中比較重要的文件類型是：
皮膚文件
CSS文件
2 在主題中添加皮膚
一個主題可能包含一個或多個皮膚文件。可以通過皮膚來修改所有具有皮膚效果的ASP.NET控件的屬性。
例如，將Web應用程序中所有的TextBox控件的背景色設爲黃色並選擇dotted作爲它的邊框樣式。如果將代碼清單1中的文件添加到Simple主題中（App_Themes/Simple文件夾），就可以在所有的頁面中通過Simple主題來修改頁面中所有TextBox控件的皮膚。
清單1：Simple/TextBox.skin
<asp:TextBox BackColor="Yellow" BorderStyle="Dotted" Runat="Server" />
建議採用以下命名規則：皮膚文件名稱和待修改的控件名稱一樣，在加上皮膚的擴展名稱。
注：不能給用戶控件的屬性應用皮膚。然而，可以給用戶控件中包含的控件應用皮膚。
清單2：ShowSkin.aspx
<%@ Page Language="C#" Theme="Simple" %>
<!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>Show Skin</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox runat="server" />
</div>
</form>
</body>
</html>
注意，代碼清單2的頁面的<%@ Page %>指令中有一個Theme屬性。Simple主題就是通過這個屬性應用到頁面的。
注：默認情況下，所有的控件屬性都是可以主題化的（可以在皮膚文件中修改）。但是，一些控件屬性由Themeable（False）屬性，可以使用這個屬性來禁用主題。
2.1 創建命名皮膚
上面創建的是默認皮膚。默認皮膚可以應用在合適類型的控件的每個實例上，比如應用在TextBox控件的每個實例上。
同時也可以創建命名皮膚。在創建命名時，可以指定什麼時候應用該皮膚。如果需要將必填的表單字段外框設爲紅色，就可以創建一個命名皮膚然後再特定得TextBox控件上應用這些皮膚。
代碼清單3：TextBox.skin
<!--默認皮膚-->
<asp:TextBox BorderStyle="Double" BorderWidth="5px" Runat="Server" />
<!--命名皮膚-->
<asp:TextBox SkinID="DashedTextBox" BorderStyle="Dashed" BorderWidth="5px" Runat="Server" />
在一個主題中，每一個控件只能有一個默認皮膚。但是，可以在主題中包括多個命名皮膚。每個命名皮膚的名稱必須唯一。
代碼清單4：ShowNamedSkin.aspx
<%@ Page Language="C#" Theme="Simple" %>
<!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>Show Skin</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtFirstName" SkinID="DashedTextBox" runat="server" />
<br /><br />
<asp:TextBox ID="txtLastName" runat="server" />
</div>
</form>
</body>
</html>
2.2 Themes與StyleSheetThemes
當在頁面中應用主題時，主題中的控件屬性會重寫頁面中的已有控件屬性。也就是說，皮膚文件中的屬性會重寫頁面中的屬性。
主題文件的這個默認行爲在修改已有網站的時候非常有用。可以使用它來重寫頁面上控件的所有皮膚屬性。
但是，有時候連Skin屬性也需要重寫。比如，要修改整個站點中的Label控件，將它們的背景顏色改爲橙色，但是一個Label控件除外。這時，如果能重寫控件的Skin屬性就很方便了。
將主題應用到含有StyleSheetTheme屬性，而不是Theme屬性的頁面上就可以重寫Skin屬性。
2.3 禁用主題
每個ASP.NET控件都包含名爲EnableTheming的屬性。可以使用這個屬性來阻止頁面中的特定控件應用皮膚。
2.4 在Web配置文件中註冊主題
在頁面中應用主題的方法，除了在每個頁面中添加Theme或者StyleSheetTheme屬性外，還可以在Web屬性文件中註冊主題，使網站的所有頁面都可以使用主題。
代碼清單5：Web.config
<?xml version="1.0"?>
<configuration>
<system.web>
<pages theme="Simple" />
</system.web>
</configuration>
除了使用Theme屬性外，還可以使用StyleSheetTheme屬性來對應用程序中的頁面應用主題。例如使用StyleSheetTheme屬性，就可以重寫頁面中通過Skin屬性指定的主題。
3 在主題中添加CSS
除了使用皮膚文件，也可以使用CSS來控制頁面上HTML元素和ASP.NET控件的皮膚。如果在主題文件夾中添加CSS文件，則在頁面應用主題時也會自動應用CSS。
代碼清單6：SimpleStyle.css
html
{
background-color:Gray;
font:14px Georgia,Serif;
}
.content
{
margin:auto;
width:600px;
border:solid 1px black;
background-color:White;
padding:10px;
}
hl
{
color:Gray;
font-size:18px;
border-bottom:solid 1px orange;
}
lable
{
font-weight:bold;
}
input
{
background-color:Yellow;
border:double 3px orange;
}
.button
{
background-color:#eeeeee;
}
如果在名爲StyleTheme的主題文件夾中添加SimpleStyle.css文件（App_Themes文件夾下的StyleTheme文件夾），這個CSS將會自動應用到代碼清單7中的頁面。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShowSimpleCSS.aspx.cs" Inherits="ThemeDemo.ShowSimpleCSS" Theme="StyleTheme" %>
<!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>Show Simple CSS</title>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<h1>Registration Form</h1>
<asp:Label ID="lblFirstName" Text="First Name:" AssociatedControlID="txtFirstName" runat="server" />
<br />
<asp:TextBox ID="txtFirstName" runat="server" />
<br /><br />
<asp:Label ID="lblLastName" Text="Last Name:" AssociatedControlID="txtLastName" runat="server" />
<br />
<asp:TextBox ID="txtLastName" runat="server" />
<br /><br />
<asp:Button ID="btnSubmit" Text="Submit Form" CssClass="button" runat="server" />
</div>
</form>
</body>
</html>
CSS用來對代碼清單7中的幾個HTML元素進行樣式設置。例如，樣式表將頁面背景色設爲灰色，並將<div>標籤的內容設爲居中。
因爲ASP.NET控件也會呈現爲HTML元素，所以樣式表也可以對由ASP.NET的Label控件、TextBox控件和Button控件呈現的HTML元素進行樣式設置。一個Label控件會輸出爲一個HTML<label>標籤，樣式表將所有的<label>標籤格式化爲粗體。TextBox控件和Button控件的輸出爲HTML<input>標籤，樣式表將修改<input>標籤的邊框樣式和背景顏色。
使用CSS的好處是使加載頁面的速度更快。在外部的樣式表中保存的內容越多，在每次頁面請求時需要加載的內容就越少。瀏覽器可以加載緩存外部樣式表的內容並對Web應用程序中的所有頁面應用樣式表。
如果通過修改控件屬性來修改控件皮膚，那麼在每次頁面請求時，多餘的內容都會被加載到瀏覽器中。
使用皮膚文件和修改控件屬性沒有區別。使用皮膚也會使頁面變得臃腫。舉例來說，如果給Label控件創建一個皮膚，當每個頁面的Label控件輸出時，皮膚文件中的Label的屬性必須和每個頁面中的Label控件進行合併。
3.1 在主題中添加多個CSS
可以在主體文件夾中添加任意多個CSS文件。在主題中添加多個CSS後，在主題應用到頁面時，所有的CSS也都會應用到頁面。
外部樣式表連接到頁面的順序非常重要。應爲一個樣式表中的樣式規則可以被其他樣式表中的樣式規則重寫。
在主題中添加多個樣式表後，樣式表應用到頁面的順序是按字母排序的（根據樣式表文件名）。
4 創建全局主體
可以在一個Web服務器端上的多個程序之間共享同一個主題。全局主題包括皮膚文件和CSS文件。在創建一個企業規模的站點並需要將頁面表現方式應用到企業中的所有應用程序時，全局主題十分有用。
在創建全局主題的方法是將主題文件夾保存在以下路徑：
WINDOWS/Microsoft.NET/Frameword/[version]/ASP.NETClientFiles/Themes
將主題文件添加在此路徑後，就可以馬上在基於文件系統的網站中使用這個主題。如果需要在基於HTTP的網站上使用這個主題，還需要額外的步驟：將主題文件夾添加在以下路經：Inetput/wwwroot/aspnet_client/system_web/[version]/Themes
手工將主題文件複製到此文件夾，或者在命令行中通過以下方式使用aspnet_regiis工具：
Aspnet_regiis –c
Aspnet_regiis工具在Windows/Microsoft.NET/Frameword/[version]文件夾中。打開命令提示並導航到這個文件夾就可以使用這個工具。
5 動態應用主題
通過處理頁面的PreInit事件可以在頁面中動態應用主題。在請求頁面時，這是第一個被觸發的事件。在其後的Load或PreRender等事件中是不能動態應用主題的。
例如：代碼清單8、9、10中就能通過用戶在頁面的點擊來應用綠色主題或紅色主題
代碼清單8：App_Themes/GreenTheme/GreenStyle.css
html
{
background-color:Green;
font:14px Georgia,Serif;
}
.content
{
margin:auto;
width:600px;
border:solid 1px black;
background-color:White;
padding:10px;
}
h1
{
color:Green;
font-size:18px;
border-bottom:solid 1px orange;
}
代碼清單9：App_Themes/RedTheme/RedStyle.css
html
{
background-color:Red;
font:14px Georgia,Serif;
}
.content
{
margin:auto;
width:600px;
border:solid 1px black;
background-color:White;
padding:10px;
}
h1
{
color:Red;
font-size:18px;
border-bottom:solid 1px orange;
}
代碼清單10：DynamicTheme.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicTheme.aspx.cs" Inherits="ThemeDemo.DynamicTheme" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_PreInit(object sender, EventArgs e)
{
if (Request["theme"] != null)
{
switch (Request["theme"])
{
case "Green":
Profile.UserTheme = "GreenTheme";
break;
case "Red":
Profile.UserTheme = "RedTheme";
break;
}
Theme = Profile.UserTheme;
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Dynamic Theme</title>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<h1>Dynamic Theme</h1>
Please select a Theme:
<ul>
<li><a href="DynamicTheme.aspx?theme=Green">Green Theme</a></li>
<li><a href="DynamicTheme.aspx?theme=Red">Red Theme</a></li>
</ul>
</div>
</form>
</body>
</html>
通過頁面的Theme屬性，特定主題可以應用到此頁面。通過在PreInit事件中將主題名稱（文件夾名稱）賦給Theme屬性，主題就會應用到頁面。
注意，被選擇的主題保存在Profile對象中。當把信息保存在Profile對象中時，在瀏覽器多個站點時這個信息仍然可以保留。所以如果用戶選擇了一次自己喜歡的主題，那麼當用戶在以後再次回到此站點時仍然會應用此主題。
代碼清單11中的Web配置文件中定義了Profile
<system.web>
<profile>
<properties>
<add name="UserTheme"/>
</properties>
</profile>
</system.web>
因爲在PreInit事件觸發後，控件樹並沒有創建完成，所以不能引用頁面中的控件。
