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

ASP.NET 2.0中使用樣式、主題和皮膚：點選下載

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＞

 

 

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-214929/，如需轉載，請註明出處，否則將追究法律責任。