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

2010-08-28 10:51:27來源:西部e網(wǎng)作者:

  ASP.net2.0的主題和皮膚特性使你能夠把樣式和布局信息存放到一組獨(dú)立的文件中,總稱為主題(Theme)。接下來我們可以把這個(gè)主題應(yīng)用到任何站點(diǎn),用于改變該站點(diǎn)內(nèi)的頁面和控件的外觀和感覺。通過改變主題的內(nèi)容,而不用改變站點(diǎn)的單個(gè)頁面,就可以輕易地改變站點(diǎn)的樣式。主題也可以在開發(fā)者之間共享。
  ASP.NET包含了大量的用于定制應(yīng)用程序的頁面和控件的外觀和感覺的特性?丶С质褂肧tyle(樣式)對象模型來設(shè)置格式屬性(例如字體、邊框、背景和前景顏色、寬度、高度等等)?丶仓С质褂脴邮奖恚–SS)來單獨(dú)設(shè)置控件的樣式。你可以用控件屬性或CSS來定義控件的樣式信息,或者把這些定義信息存放到單獨(dú)的一組文件中(稱為主題),然后把它應(yīng)用到程序的所有或部分頁面上。單獨(dú)的控件樣式是用主題的皮膚(Skin)屬性來指定的。

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

  給控件應(yīng)用樣式

  Web用戶界面是非常靈活的,不同的Web站點(diǎn)的外觀和感覺是截然不同的。目前廣泛采用的樣式表(CSS)在很大程度上就是負(fù)責(zé)處理Web上遇到的豐富的設(shè)計(jì)需求的。ASP.NET的HTML服務(wù)器控件和Web服務(wù)器控件都被設(shè)計(jì)成優(yōu)先支持CSS樣式表。這一部分討論如何在服務(wù)器控件上使用樣式,并演示了它們所提供的Web窗體的外觀和感覺的非常細(xì)微的控制。

  給HTML控件應(yīng)用樣式

  標(biāo)準(zhǔn)的HTML標(biāo)記通過style屬性來支持CSS,我們可以用分號隔離的屬性/值對(pair)來設(shè)置它。所有的ASP.NET HTML服務(wù)器控件都可以采用標(biāo)準(zhǔn)HTML標(biāo)記的方式來接受樣式。下面的例子演示了大量的應(yīng)用到HTML服務(wù)器控件的樣式。在源代碼中你可以看到,這些樣式都是在控件顯示的時(shí)候傳遞給瀏覽器的。

<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屬性,你可以把它設(shè)置為文檔中<style>...</style>內(nèi)包含的CSS樣式定義。Class屬性使你能夠一次定義樣式,在多個(gè)服務(wù)器標(biāo)記上使用,避免了樣式的重復(fù)定義。HTML服務(wù)器控件的style屬性可以用這種方式來設(shè)置,如下所示:

<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頁面的時(shí)候,在System.Web.UI.HtmlControls.HtmlControl類中,樣式信息被填充到CssStyleCollection類型的Style屬性。這個(gè)屬性本質(zhì)上是一個(gè)字典,它把控件的樣式暴露為每個(gè)樣式屬性鍵的按字符串索引的值集合。例如,你可以使用下面的代碼設(shè)置和檢索HtmlInputText服務(wù)器控件的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服務(wù)器控件的樣式:

<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>

 

關(guān)鍵詞:ASP.NET

贊助商鏈接: