ASP.NET 2.0中使用樣式、主題和皮膚

ASP.net2.0的主題和皮膚特性使你能夠把樣式和布局資訊存放到一組獨立的檔案中，總稱為主題（Theme）。接下來我們可以把這個主題應用到任何網站，用於改變該網站內的頁面和控制項的外觀和感覺。通過改變主題的內容，而不用改變網站的單個頁面，就可以輕易地改變網站的樣式。主題也可以在開發人員之間共用。

　　ASP.NET包含了大量的用於定製應用程式的頁面和控制項的外觀和感覺的特性。控制項支援使用Style（樣式）物件模型來設定格式屬性（例如字型、邊框、背景和前景顏色、寬度、高度等等）。控制項也支援使用樣式表（CSS）來單獨設定控制項的樣式。你可以用控制項屬性或CSS來定義控制項的樣式資訊，或者把這些定義資訊存放到單獨的一組檔案中（稱為主題），然後把它應用到程式的所有或部分頁面上。單獨的控制項樣式是用主題的皮膚（Skin）屬性來指定的。

　　本文用大量的樣本示範了在ASP.NET 2.0中如何使用樣式、主題和皮膚特性。

　　給控制項應用樣式

　　Web使用者介面是非常靈活的，不同的Web網站的外觀和感覺是截然不同的。目前廣泛採用的樣式表（CSS）在很大程度上就是負責處理Web上遇到的豐富的設計需求的。ASP.NET的HTML伺服器控制項和Web伺服器控制項都被設計成優先支援CSS樣式表。這一部分討論如何在伺服器控制項上使用樣式，並示範了它們所提供的Web表單的外觀和感覺的非常細微的控制。

　　給HTML控制項應用樣式

　　標準的HTML標記通過style屬性來支援CSS，我們可以用分號隔離的屬性/值對（pair）來設定它。所有的ASP.NET HTML伺服器控制項都可以採用標準HTML標記的方式來接受樣式。下面的例子示範了大量的應用到HTML伺服器控制項的樣式。在原始碼中你可以看到，這些樣式都是在控制項顯示的時候傳遞給瀏覽器的。

＜span style="font: 12pt verdana; color:orange;font-weight:700" runat="server"＞
This is some literal text inside a styled span control＜/span＞
＜p＞＜font face="verdana"＞＜h4＞Styled Button＜/h4＞＜/font＞＜p＞
＜button style="font: 8pt verdana;background-color:lightgreen;border-color:black;width:100" runat="server"＞Click me!＜/button＞

　　CSS還定義了class屬性，你可以把它設定為文檔中＜style＞...＜/style＞內包含的CSS樣式定義。Class屬性使你能夠一次定義樣式，在多個伺服器標記上使用，避免了樣式的重複定義。HTML伺服器控制項的style屬性可以用這種方式來設定，如下所示：

＜style＞
.spanstyle 
{ 
font: 12pt verdana; 
font-weight:700;
color:orange;
}
.buttonstyle 
{ 
font: 8pt verdana;
background-color:lightgreen;
border-color:black;
width:100 
}
……
＜/style＞
＜span class="spanstyle" runat="server"＞
This is some literal text inside a styled span control
＜/span＞
＜p＞＜font face="verdana"＞＜h4＞Styled Button＜/h4＞＜/font＞＜p＞
＜button class="buttonstyle" runat="server"＞Click me!＜/button＞

　　在分析ASP.NET頁面的時候，在System.Web.UI.HtmlControls.HtmlControl類中，樣式資訊被填充到CssStyleCollection類型的Style屬性。這個屬性本質上是一個字典，它把控制項的樣式暴露為每個樣式屬性鍵的按字串索引的值集合。例如，你可以使用下面的代碼設定和檢索HtmlInputText伺服器控制項的width樣式屬性：

＜script language="VB" runat="server" ＞
Sub Page_Load(Sender As Object, E As EventArgs)
MyText.Style("width") = "90px"
Response.Write(MyText.Style("width"))
End Sub
＜/script＞
＜input type="text" id="MyText" runat="server"/＞

　　下面的例子顯示了如何編程使用Style集合屬性來控制HTML伺服器控制項的樣式：

＜script language="VB" runat="server"＞
Sub Page_Load(Src As Object, E As EventArgs)
Message.InnerHtml &= "＜h5＞Accessing Styles...＜/h5＞"
Message.InnerHtml &= "The color of the span is: " &MySpan.Style("color") &"＜br＞"
Message.InnerHtml &= "The width of the textbox is: " &MyText.Style("width") &"＜p＞"
Message.InnerHtml &= "MySelect's style collection is: ＜br＞＜br＞"
Dim Keys As IEnumerator
Keys = MySelect.Style.Keys.GetEnumerator()
Do While (Keys.MoveNext())
Dim Key As String
Key = CStr(Keys.Current)
Message.InnerHtml &= "＜li＞  "
Message.InnerHtml &= Key &"=" &MySelect.Style(Key) &"＜br＞"
Loop
End Sub
Sub Submit_Click(Src As Object, E As EventArgs)
Message.InnerHtml &= "＜h5＞Modifying Styles...＜/h5＞"
MySpan.Style("color") = ColorSelect.Value
MyText.Style("width") = "600"
Message.InnerHtml &= "The color of the span is: " &MySpan.Style("color") &"＜br＞"
Message.InnerHtml &= "The width of the textbox is: " &MyText.Style("width")
End Sub
＜/script＞