一、建立主題
在名為App_Themes的應用程式的檔案夾中新增檔案夾就可以建立主題。在App_Themes中添加的每一個檔案夾都代表一個主題。
在主題檔案夾中比較重要的檔案類型有皮膚檔案和CSS檔案。
二、在主題中添加皮膚
一個主題可能包含一個或多個皮膚檔案。可以通過皮膚來修改所有具有皮膚效果的ASP.NET控制項屬性。
例如,將Web應用程式中所有的TextBox控制項的背景顏色設為黃色並選擇dotted作為它的邊框樣式。在App_Themes檔案夾下建立Simple檔案夾,然後在Simple檔案夾中建立TextBox.skin檔案,該檔案代碼如下所示:
<asp:TextBox BackColor=”Yellow” BorderStyle=”Dotter” runat=”Server”/>
注意上面代碼裡面runat是必須的,而且不能帶ID屬性。
主題檔案夾下可以擁有一個或上百給皮膚檔案,但在一個主題檔案夾下的所有的檔案都會編譯成一個主題類。
上面的主題檔案夾Simple如果要在某個頁面使用其定義的主題,則使用如下代碼:
<%@ Page Language=”C#” Theme=”Simple”%>
如果該頁面的TextBox控制項屬性EnableTheming設定為false,則主題不起作用。
1、 建立命名皮膚
在定義命名皮膚時比定義預設皮膚增加SkinID屬性,在應用主題頁面指定控制項的SkinID屬性為命名皮膚定義的SkinID屬性名稱即可。
2、 Themes和StyleSheetThems
使用Themes指定應用某個主題時候,主題定義皮膚會覆蓋頁面中控制項自訂的皮膚。
而使用StyleSheetThems指定則不會覆蓋。
<%@ Page Language=”C#” StyleSheetThems=”Simple”%>
3、 禁用皮膚
每個控制項都包含有EnableTheming屬性,設定為false則禁用主題皮膚。
4、 在Web設定檔中註冊主題
<system.web>
<pages theme=”Simple” />
</system.web>
在啟用程式中的主題後,可以在特定頁面中通過
<%@ Page Language=”C#” EnableTheming=”false”%>
來禁用主題。
三、在主題中添加CSS
除了使用主題皮膚外,也可以使用CSS來控制頁面上HTML元素和ASP.NET控制項的皮膚。如果在主題檔案夾下添加了CSS檔案,則在頁面應用主題時也會自動應用CSS。
四、建立全域主題
此種情況本人應用較少,跳過。對於很少用到的知識而且又不是基礎性的,我的學習原則是知道有這個應用即可,待有機會真正用上時再學習也不遲。不然在技術的汪洋大海裡面永遠也不知岸在哪裡。
五、Live App皮膚
通過處理頁面的Page_PreInit事件可以在頁面Live App主題。在請求頁面時,這是第一個被觸發的事件。在其後的Page_Load或Page_PreRender等事件中是不能Live App主題的。
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.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 "Pink":
Profile.userTheme = "PinkTheme";
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=Pink">Pink Theme</a>
</li>
</ul>
</div>
</form>
</body>
</html>
通過頁面的Theme屬性,特定主題可以應用到此頁面。通過在PreInit事件中將主題名稱賦給Theme屬性,主題將會應用到此頁面。
當把資訊儲存到Profile對象中時,在瀏覽多個網站時這個資訊仍然會保留。所以如果使用者選擇了一次自己喜歡的主題,那麼當使用者在以後再次返回到此網站時仍然會應用此主題。
在Web.Config檔案中定義Profile
<system.web>
<!--
<pages theme="Simple3" />
-->
<profile>
<properties>
<add name="userTheme" />
</properties>
</profile>
</system.web>