亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

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

系統(tǒng) 2098 0

ASP.NET 2.0的主題和皮膚特性使你能夠把樣式和布局信息存放到一組獨(dú)立的文件中,總稱(chēng)為主題(Theme)。接下來(lái)我們可以把這個(gè)主題應(yīng)用到任何站點(diǎn),用于改變?cè)撜军c(diǎn)內(nèi)的頁(yè)面和控件的外觀和感覺(jué)。通過(guò)改變主題的內(nèi)容,而不用改變站點(diǎn)的單個(gè)頁(yè)面,就可以輕易地改變站點(diǎn)的樣式。主題也可以在開(kāi)發(fā)者之間共享。

  ASP.NET包含了大量的用于定制應(yīng)用程序的頁(yè)面和控件的外觀和感覺(jué)的特性。控件支持使用Style(樣式)對(duì)象模型來(lái)設(shè)置格式屬性(例如字體、邊框、背景和前景顏色、寬度、高度等等)??丶仓С质褂脴邮奖恚–SS)來(lái)單獨(dú)設(shè)置控件的樣式。你可以用控件屬性或CSS來(lái)定義控件的樣式信息,或者把這些定義信息存放到單獨(dú)的一組文件中(稱(chēng)為主題),然后把它應(yīng)用到程序的所有或部分頁(yè)面上。單獨(dú)的控件樣式是用主題的皮膚(Skin)屬性來(lái)指定的。

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

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

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

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

  標(biāo)準(zhǔn)的HTML標(biāo)記通過(guò)style屬性來(lái)支持CSS,我們可以用分號(hào)隔離的屬性/值對(duì)(pair)來(lái)設(shè)置它。所有的ASP.NET HTML服務(wù)器控件都可以采用標(biāo)準(zhǔn)HTML標(biāo)記的方式來(lái)接受樣式。下面的例子演示了大量的應(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屬性可以用這種方式來(lái)設(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頁(yè)面的時(shí)候,在System.Web.UI.HtmlControls.HtmlControl類(lèi)中,樣式信息被填充到CssStyleCollection類(lèi)型的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集合屬性來(lái)控制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>

給Web服務(wù)器控件應(yīng)用樣式

  Web 服務(wù)器控件添加了幾個(gè)用于設(shè)置樣式的強(qiáng)類(lèi)型屬性(例如背景色、前景色、字體名稱(chēng)和大小、寬度、高度等等),從而為樣式提供了更多層次的支持。這些樣式屬性表現(xiàn)了HTML中可用的樣式行為的子集,并表現(xiàn)為System.Web.UI.WebControls.WebControl基類(lèi)直接暴露的"平面"屬性。使用這些屬性的優(yōu)勢(shì)在于,在開(kāi)發(fā)工具(例如微軟Visual Studio .NET)中,它們提供了編譯時(shí)的類(lèi)型檢測(cè)和語(yǔ)句編譯。

  下面的例子顯示了一個(gè)應(yīng)用了幾種樣式的WebCalendar控件。請(qǐng)注意,當(dāng)設(shè)置的屬性是類(lèi)類(lèi)型(class type)的時(shí)候(例如字體),你必須使用子屬性語(yǔ)法PropertyName-SubPropertyName(屬性-子屬性):

<ASP:Calendar runat="server"
BackColor="Beige"
ForeColor="Brown"
BorderWidth="3"
……
/>


  System.Web.UI.WebControls名字空間包含了Style基類(lèi),它封裝了公用的樣式屬性(其它的樣式類(lèi),例如TableStyle和TableItemStyle都繼承自這個(gè)基類(lèi))。為了指定控件的各個(gè)顯示元素,大多數(shù)Web服務(wù)器控件都暴露了這個(gè)類(lèi)型屬性。例如,WebCalendar暴露和很多樣式屬性:DayStyle、WeekendDayStyle、TodayDayStyle、SelectedDayStyle、OtherMonthDayStyle和NextPrevStyle。你可以使用子屬性語(yǔ)法PropertyName-SubPropertyName來(lái)設(shè)置這些樣式的屬性,如下面的例子所示:

<ASP:Calendar runat="server"
……
DayStyle-Width="50px"
DayStyle-Height="50px"

TodayDayStyle-BorderWidth="3"
WeekEndDayStyle-BackColor="palegoldenrod"
WeekEndDayStyle-Width="50px"
WeekEndDayStyle-Height="50px"
SelectedDayStyle-BorderColor="firebrick"
SelectedDayStyle-BorderWidth="3"
OtherMonthDayStyle-Width="50px"
OtherMonthDayStyle-Height="50px"
/>


  下面的語(yǔ)法有稍微的不同,它允許你把Style屬性聲明為Web服務(wù)器控件標(biāo)記內(nèi)嵌套的子元素:

<ASP:Calendar ... runat="server">
<TitleStyle BorderColor="darkolivegreen" BorderWidth="3" BackColor="olivedrab" Height="50px" />
</ASP:Calendar>


  下面的例子顯示了一種替代語(yǔ)法,但是它的功能與前面的語(yǔ)法是一樣的。

<ASP:Calendar id="MyCalendar" runat="server"
……

<TitleStyle BorderColor="darkolivegreen" BorderWidth="3" BackColor="olivedrab" Height="50px" />
<DayHeaderStyle BorderColor="darkolivegreen" BorderWidth="3" BackColor="olivedrab" ForeColor="black" Height="20px" />
<WeekEndDayStyle BackColor="palegoldenrod" Width="50px" Height="50px" />
<DayStyle Width="50px" Height="50px" />
<TodayDayStyle BorderWidth="3" />
<SelectedDayStyle BorderColor="firebrick" BorderWidth="3" />
<OtherMonthDayStyle Width="50px" Height="50px" />
</ASP:Calendar>


  使用HTML服務(wù)器控件的時(shí)候,你可以使用CSS類(lèi)定義給Web服務(wù)器控件應(yīng)用樣式。WebControl基類(lèi)暴露了一個(gè)叫做CssClass的字符串屬性,用于設(shè)置樣式類(lèi):

<style>
.calstyle { font-size:12pt; font-family:Tahoma,Arial; }
</style>

<ASP:Calendar CssClass="calstyle" runat="server"
……
/>


  如果某個(gè)服務(wù)器控件上設(shè)置的屬性沒(méi)有與該控件的強(qiáng)類(lèi)型屬性相對(duì)應(yīng),那個(gè)該屬性和值就被填充到控件的Attributes集合中。在默認(rèn)情況下,服務(wù)器控件會(huì)把這些屬性不作更改地呈現(xiàn)在HTML中,并返回給作出請(qǐng)求的瀏覽器客戶(hù)端。這意味著,我們可以直接設(shè)置Web服務(wù)器控件的樣式和類(lèi)屬性,而不必使用強(qiáng)類(lèi)型的屬性。盡管它要求我們理解控件的實(shí)際顯示過(guò)程,但是它也是應(yīng)用樣式的一個(gè)靈活的途徑。對(duì)于標(biāo)準(zhǔn)的輸入控件,這樣的操作用處很大,如下面的例子所示:

<ASP:TextBox runat="server" class="beige" style="font-weight:700;"/>
<ASP:TextBox TextMode="Password" runat="server" class="beige"/>
<ASP:DropDownList class="beige" runat="server">
<ASP:ListItem>Default Desktop</ASP:ListItem>
<ASP:ListItem>My Stock Portfolio</ASP:ListItem>
<ASP:ListItem>My Contact List</ASP:ListItem>
</ASP:DropDownList>
<ASP:Button Text="Submit" runat="server" class="beige"/>


  我們也可以使用WebControl基類(lèi)的ApplyStyle方法來(lái)編程設(shè)置Web服務(wù)器控件的樣式,如下面的代碼所示:

<script language="VB" runat="server">
Sub Page_Load(Src As Object, E As EventArgs)
Dim MyStyle As New Style
MyStyle.BorderColor = Color.Black
MyStyle.BorderStyle = BorderStyle.Dashed
MyStyle.BorderWidth = New Unit(1)

MyLogin.ApplyStyle (MyStyle)
MyPassword.ApplyStyle (MyStyle)
MySubmit.ApplyStyle (MyStyle)
End Sub
</script>

Login: <ASP:TextBox id="MyLogin" runat="server" />/<p/>
Password: <ASP:TextBox id="MyPassword" TextMode="Password" runat="server" />
View: <ASP:DropDownList id="MySelect" runat="server"> ... </ASP:DropDownList>

利用主題來(lái)定制站點(diǎn)

  前面的部分演示了幾種通過(guò)設(shè)置控件自身的樣式屬性來(lái)指定控件樣式的方法。例如,我們看看如下的頁(yè)面(代碼),在這個(gè)頁(yè)面上的各個(gè)控件上都應(yīng)用了很多樣式設(shè)置。

<asp:Label ID="Label1" runat="server" Text="Hello 1" Font-Bold="true" ForeColor="orange" /><br />

<asp:Calendar BackColor="White" BorderColor="Black" BorderStyle="Solid" CellSpacing="1" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="250px" ID="Calendar1" NextPrevFormat="ShortMonth" runat="server" Width="330px">
<SelectedDayStyle BackColor="#333399" ForeColor="White" />
<OtherMonthDayStyle ForeColor="#999999" />
<TodayDayStyle BackColor="#999999" ForeColor="White" />
<DayStyle BackColor="#CCCCCC" />
<NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" />
<DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" Height="8pt" />
<TitleStyle BackColor="#333399" BorderStyle="Solid" Font-Bold="True" Font-Size="12pt"
ForeColor="White" Height="12pt" />
</asp:Calendar>


  作為在各個(gè)控件上指定樣式的補(bǔ)充,ASP.NET 2.0引入了"主題"的概念,它提供了一種定義站點(diǎn)的控件和頁(yè)面的樣式設(shè)置的簡(jiǎn)單途徑,而且它與應(yīng)用程序的頁(yè)面是分離的。主題的優(yōu)勢(shì)在于,你在設(shè)計(jì)站點(diǎn)的時(shí)候不用考慮它的樣式,在將來(lái)應(yīng)用樣式的時(shí)候,不必更新頁(yè)面或應(yīng)用程序代碼。你還可以從外部獲取定制的主題,然后應(yīng)用到自己的應(yīng)用程序上。主題的優(yōu)勢(shì)是,樣式設(shè)置都存儲(chǔ)在一個(gè)單獨(dú)的位置,它的維護(hù)與應(yīng)用程序是分離的。

  下面的例子演示了一個(gè)帶有主題的頁(yè)面。請(qǐng)注意,這個(gè)頁(yè)面本身沒(méi)有包含任何樣式信息。主題在運(yùn)行時(shí)自動(dòng)地把樣式屬性應(yīng)用到頁(yè)面的控件上。

<%@ Page Language="VB" Theme="ExampleTheme" %>

<asp:Label ID="Label1" runat="server" Text="Hello 1" /><br />
<asp:Calendar ID="Calendar1" runat="server"/>
<asp:GridView ID="GridView1" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" DataKeyNames="au_id" runat="server">
……
</asp:GridView>
<asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:Pubs %>" ID="SqlDataSource1" runat="server" SelectCommand="SELECT [au_id], [au_lname], [au_fname], [state] FROM [authors]">
</asp:SqlDataSource>


App_Themes文件夾

  主題位于應(yīng)用程序根目錄的App_Themes文件夾中。主題由一個(gè)為主題命名的子目錄和這個(gè)子目錄下的一個(gè)或多個(gè)皮膚文件(帶有.skin擴(kuò)展名)組成。主題還可以包含CSS文件和/或存放靜態(tài)文件(例如圖像)的子目錄。下圖顯示了定義了兩個(gè)主題的App_Themes目錄,分別叫做"Default"和"White",每個(gè)主題包含一個(gè)皮膚文件和一個(gè)CSS文件。


  查看前面的例子,你會(huì)發(fā)現(xiàn)皮膚文件的內(nèi)容就是控件如何顯示的簡(jiǎn)單定義。一個(gè)皮膚文件可以包含多個(gè)控件定義,例如為每種控件類(lèi)型提供一個(gè)定義。在應(yīng)用主題的時(shí)候,主題中定義的控件屬性自動(dòng)地重載相同類(lèi)型的控件的本地屬性值。例如,皮膚文件中的<asp:Calendar Font-Name="Verdana" runat="server"/>控件定義將會(huì)引發(fā)應(yīng)用了該主題的頁(yè)面中的所有Calendar控件都使用Verdana字體。該控件的這個(gè)屬性的本地值都會(huì)被主題重載。請(qǐng)注意,在皮膚文件中給控件定義指定ID屬性是錯(cuò)誤的。

全局的和應(yīng)用程序的主題

  主題可以應(yīng)用于應(yīng)用程序?qū)踊驒C(jī)器層(用于所有的應(yīng)用程序)。應(yīng)用程序?qū)拥闹黝}放置在應(yīng)用程序根目錄下的App_Themes目錄中。全局主題放置在ASP.NET安裝目錄下的ASP.NETClientFiles文件夾下的"Themes"目錄中,例如%WINDIR%\Microsoft.NET\Framework\<version>\ASP.NETClientFiles\Themes。IIS Web站點(diǎn)的全局主題的位置是Inetpub\wwwroot\aspnet_client\system_web\<version>\Themes。
給頁(yè)面指定主題

  通過(guò)把<%@ Page Theme="..." %>指令設(shè)置為全局或應(yīng)用程序?qū)拥闹黝}(Themes或App_Themes目錄下的文件夾名稱(chēng)),我們可以為單個(gè)頁(yè)面指定主題。一個(gè)頁(yè)面只能應(yīng)用一個(gè)主題,但是該主題中的多個(gè)皮膚文件可以用于設(shè)置頁(yè)面上的控件的樣式信息。

在配置文件中指定主題

  你也可以在Web.config文件的<pages theme="..."/>部分中指定應(yīng)用在程序的所有頁(yè)面上的主題。如果需要取消某個(gè)特定的頁(yè)面的主題,需要把該頁(yè)面指令的主題屬性設(shè)置為空字符串("")。請(qǐng)注意,母版頁(yè)不能應(yīng)用主題;你應(yīng)該在內(nèi)容頁(yè)上或配置文件中設(shè)置主題。

<configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0">
<system.web>
<pages theme="ExampleTheme"/>
</system.web>
</configuration>


禁止某個(gè)控件應(yīng)用主題

  你可以通過(guò)把控件的EnableTheming屬性設(shè)置為false,把特定的控件排除出主題的應(yīng)用范圍。

<%@ Page Language="VB" Theme="OrangeTheme" %>
……
<asp:Label ID="Label1" runat="server" Text="Hello 1" /><br />
<asp:Label ID="Label2" runat="server" Text="Hello 2" EnableTheming="False" /><br />


主題中的命名皮膚(Named Skins)

  在默認(rèn)情況下,皮膚文件中的控件定義會(huì)應(yīng)用到頁(yè)面上的所有相同類(lèi)型的控件上。但是,你可能希望應(yīng)用程序不同部分的同類(lèi)控件顯示為不同的樣式。例如,在某個(gè)地方你可能希望文本和標(biāo)簽控件用粗體顯示,在另一個(gè)地方可能希望它用斜體顯示。你可以使用主題中的命名皮膚來(lái)實(shí)現(xiàn)這種功能。

默認(rèn)皮膚和命名皮膚

  你可以通過(guò)為控件建立不同的定義,在一個(gè)皮膚文件中為同類(lèi)控件定義多種不同的樣式。你可以把這些控件定義的SkinID屬性設(shè)置為任何名稱(chēng),接著在需要應(yīng)用特定皮膚的控件上設(shè)置這個(gè)SkinID值。如果缺少SkinID屬性,就應(yīng)用默認(rèn)的皮膚(沒(méi)有設(shè)置SkinID屬性的皮膚)。下面的例子演示了應(yīng)用不同皮膚的標(biāo)簽和日歷控件。請(qǐng)注意,頁(yè)面中帶有命名SkinID的控件從默認(rèn)的皮膚中獲取了不同的樣式集合。

<%@ Page Language="VB" Theme="OrangeTheme2" %>

<asp:Label ID="Label1" runat="server" Text="Hello 1" />
<asp:Label ID="Label2" runat="server" Text="Hello 2" SkinID="Blue" />
<asp:Label ID="Label3" runat="server" Text="Hello 3" />

<asp:Calendar ID="Calendar1" runat="server"/>
<asp:Calendar ID="Calendar2" SkinID="Simple" runat="server"/>


  命名皮膚可以在主題的皮膚文件中用多種方式來(lái)組織。由于主題可以包含多個(gè)皮膚文件,你可能會(huì)把命名皮膚分割到單個(gè)文件中,使每個(gè)皮膚文件包含相同SkinID的多個(gè)控件定義。例如,在一個(gè)主題中,你可能擁有三個(gè)皮膚文件,它們分別與特定的SkinID值對(duì)應(yīng):

/WebSite1
/App_Themes
/MyTheme
Default.skin
Red.skin
Blue.skin


  你也可以根據(jù)控件類(lèi)型對(duì)皮膚文件進(jìn)行分組,使每個(gè)皮膚文件包含特定控件的一組皮膚定義:

/WebSite1
/App_Themes
/MyTheme
GridView.skin
Calendar.skin
Label.skin


  你甚至于可以根據(jù)站點(diǎn)的不同區(qū)域來(lái)分割皮膚文件,例如:

/WebSite1
/App_Themes
/MyTheme
HomePage.skin
DataReports.skin
Forums.skin


  在一個(gè)主題目錄下存放多個(gè)皮膚文件的能力使你能夠靈活地組織它們。它還使你能夠輕易地與他人共享皮膚定義,或者把皮膚定義從一個(gè)主題復(fù)制到另一個(gè)主題,而不需要編輯主題中的皮膚文件。

使用主題的服務(wù)器端樣式

  主題是在應(yīng)用程序建立之后,甚至于在站點(diǎn)寄宿在生產(chǎn)服務(wù)器之后才應(yīng)用到程序上的。給程序應(yīng)用主題的人可能是該應(yīng)用程序的開(kāi)發(fā)人員。例如,讓?xiě)?yīng)用程序的開(kāi)發(fā)人員和網(wǎng)站設(shè)計(jì)人員一起處理站點(diǎn)的外觀是很常見(jiàn)的。在主題應(yīng)用到程序上之后,主題定義中的樣式屬性會(huì)重載應(yīng)用程序頁(yè)面中的目標(biāo)控件的屬性值。

  另一方面,開(kāi)發(fā)者獨(dú)立地構(gòu)建樣式信息也很常見(jiàn)。例如,在獨(dú)立的文件中,使用級(jí)聯(lián)樣式表(CSS)來(lái)定義控件和標(biāo)記樣式。在這種情況下,你也可以使用主題,把主題當(dāng)作是一種服務(wù)器端的樣式表。通過(guò)這種方式應(yīng)用樣式表的時(shí)候,主題定義中的樣式屬性會(huì)設(shè)置應(yīng)用程序中的控件的默認(rèn)值,但是可以通過(guò)其它操作來(lái)重新設(shè)置頁(yè)面中的控件的這些值,從而重載了主題定義。

宣告式的服務(wù)器端樣式

  當(dāng)我們通過(guò)在@Page指令或配置文件的<pages/>段中設(shè)置Theme屬性來(lái)應(yīng)用主題的時(shí)候,主題中的皮膚的屬性將會(huì)重載頁(yè)面中目標(biāo)控件的相同屬性。下面的例子演示了頁(yè)面中的一個(gè)標(biāo)簽控件,它的ForeColor被設(shè)置為藍(lán)色。在應(yīng)用的主題中,標(biāo)簽皮膚把ForeColor屬性設(shè)置為橙色。當(dāng)你運(yùn)行頁(yè)面的時(shí)候,請(qǐng)注意主題定義重載了本地控件屬性,所有的標(biāo)簽都顯示為橙色。

<%@ Page Language="VB" Theme="OrangeTheme" %>

<asp:Label ID="Label1" runat="server" Text="Hello 1" /><br />
<asp:Label ID="Label2" runat="server" Text="Hello 2" ForeColor="blue" />


  請(qǐng)注意,這個(gè)標(biāo)簽是橙色的(繼承自主題)而不是藍(lán)色的(控件設(shè)置)

  當(dāng)我們通過(guò)在@Page指令或配置文件的<pages/>段中設(shè)置StyleSheetTheme屬性,把主題作為服務(wù)器端樣式應(yīng)用的時(shí)候,主題的屬性是可以被頁(yè)面中的控件重載的。下面的例子演示了應(yīng)用StyleSheetTheme的情況(內(nèi)容與上面一個(gè)例子相同)。請(qǐng)注意,頁(yè)面中定義的ForeColor屬性取得了勝利,所有的標(biāo)簽都顯示為藍(lán)色。

<%@ Page Language="VB" StyleSheetTheme="OrangeTheme" %>

<asp:Label ID="Label1" runat="server" Text="Hello 1" /><br />
<asp:Label ID="Label2" runat="server" Text="Hello 2" ForeColor="blue" />


  請(qǐng)注意,這個(gè)標(biāo)簽是藍(lán)色的(控件設(shè)置)而不是橙色的(來(lái)自StyleSheetTheme)

主題和StyleSheetTheme(樣式表主題)的優(yōu)先問(wèn)題

  StyleSheetTheme是在應(yīng)用程序開(kāi)發(fā)的時(shí)候使用的,是一種在頁(yè)面中構(gòu)建樣式信息的方法,目的是為了保證應(yīng)用程序的行為與外觀的改變無(wú)關(guān)。你可能需要在已經(jīng)使用了StyleSheetTheme的應(yīng)用程序中進(jìn)一步應(yīng)用主題。如果應(yīng)用程序同時(shí)使用了主題和StyleSheetTheme,那么控件的屬性將按下面的次序來(lái)應(yīng)用:

  · 首先應(yīng)用StyleSheetTheme屬性

  · 應(yīng)用頁(yè)面中控件的屬性(重載StyleSheetTheme)

  · 最后應(yīng)用主題的屬性(同時(shí)重載控件屬性和StyleSheetTheme)

  下面的例子演示了上述內(nèi)容。

<%@ Page Language="VB" Theme="OrangeTheme" StyleSheetTheme="GreenTheme" %>

<asp:Label ID="Label1" runat="server" Text="Hello 1" /><br />
<asp:Label ID="Label2" runat="server" Text="Hello 2" ForeColor="blue" Font-Italic="false" />


  請(qǐng)注意,頁(yè)面重載了StyleSheetTheme 的斜體屬性,但是主題的前景色重載了其它內(nèi)容

Visual Web Developer的支持

  VWD包含了對(duì)StyleSheetTheme的設(shè)計(jì)時(shí)(design-time)支持。當(dāng)你把StyleSheetTheme應(yīng)用到一個(gè)頁(yè)面上的時(shí)候,Visual Studio中的"設(shè)計(jì)視圖"在控件的顯示預(yù)覽中就反應(yīng)了應(yīng)用程序的狀況。通過(guò)選擇控件的智能事務(wù)面板(只有部分控件支持它)中的"自動(dòng)格式化…"選項(xiàng),你可以從可用的SkinID值列表中選擇一個(gè)。"自動(dòng)格式化"對(duì)話(huà)框顯示了StyleSheetTheme中包含的可用SkinID值列表,同時(shí)還顯示了應(yīng)用選定的皮膚之后的控件樣式預(yù)覽。當(dāng)你選中某個(gè)值之后,設(shè)計(jì)器會(huì)為該控件保存SkinID屬性。

主題和皮膚的內(nèi)容

  前面的部分已經(jīng)講過(guò),皮膚文件包含了控件屬性值的定義,它可以應(yīng)用在程序的同種類(lèi)型的控件上。這一部分討論添加到皮膚文件或主題的哪些內(nèi)容是有效的。

Themable(可應(yīng)用主題的)屬性

  皮膚文件中的控件定義只能包含屬性的值,它們都被標(biāo)記為T(mén)hemeable(可應(yīng)用主題)。每個(gè)控件都可以通過(guò)在屬性上使用ThemeableAttribute來(lái)定義一組屬性。把不可應(yīng)用主題的屬性添加到皮膚文件中會(huì)導(dǎo)致錯(cuò)誤出現(xiàn)。某個(gè)控件本身可能被主題排除了,例如數(shù)據(jù)源控件就不可應(yīng)用主題。在默認(rèn)情況下,任何控件的ID屬性是不能應(yīng)用主題的。除非控件有特定的要求,否則在默認(rèn)情況下,它的所有屬性都是可以應(yīng)用主題的。你可以參照.NET框架組件參考文檔來(lái)確認(rèn)控件的屬性是否可以應(yīng)用主題。

在主題中使用CSS

  通過(guò)把級(jí)聯(lián)樣式表(CSS)放置在命名主題的子目錄中,你可以給該主題添加CSS。如果頁(yè)面包含了<head runat="server"/>控件定義,那么該CSS樣式表將應(yīng)用于所有使用了該主題的頁(yè)面。你可以根據(jù)需要重命名CSS文件,只要它的擴(kuò)展名是.css。一個(gè)主題可以包含多個(gè)CSS文件。當(dāng)頁(yè)面中包含了CSS文件的引用(在<head/>元素中使用<link rel="stylesheet" href="..."/>標(biāo)記)的時(shí)候,主題中的CSS文件都在頁(yè)面的樣式表后面應(yīng)用。

在主題中使用圖像

  主題中也可以包含圖像,它們是皮膚文件中的控件定義引用的。皮膚文件中的圖像引用必須使用主題目錄下的圖像文件夾的相對(duì)路徑,這樣皮膚文件和圖像才能輕易地隨應(yīng)用程序遷移。在運(yùn)行時(shí),圖像的路徑會(huì)被重新定位,因此,對(duì)目標(biāo)頁(yè)面中的控件來(lái)說(shuō),這個(gè)引用是相對(duì)的。下面的例子演示了一個(gè)包含圖像子目錄的主題。

<%@ Page Language="VB" Theme="MyTheme" %>

<asp:Image ID="Image1" SkinID="Warning" runat="server" />
<asp:Label ID="Label1" runat="server" Text="Hello 1" /><br />
<asp:Image ID="Image2" SkinID="Warning" runat="server" />
<asp:Label ID="Label2" runat="server" Text="Hello 2" /><br />
<asp:Image ID="Image3" SkinID="Warning" runat="server" />
<asp:Label ID="Label3" runat="server" Text="Hello 3" /><br />


定制控件集合主題

  你在皮膚文件中設(shè)置的大多數(shù)屬性都是一些簡(jiǎn)單的值屬性,例如Font-Name、Width和 BackColor。但是,你也可以設(shè)置皮膚集合屬性。皮膚集合屬性并非應(yīng)用在目標(biāo)控件的集合項(xiàng)的屬性上,而是在使用主題或使用StyleSheetTheme合并集合的時(shí)候,完全地替代集合。

  這對(duì)于某些包含樣式集合的集合屬性是有用處的,例如TreeView控件的LevelStyles(層次樣式)屬性或Menu控件的LevelMenuItemStyles(菜單項(xiàng)樣式)、LevelSubMenuItemStyles(子菜單項(xiàng)樣式)或LevelSelectedStyles(選中的樣式)屬性。

  TreeView.skin的內(nèi)容

<asp:TreeView runat="server"
Font-Names="Verdana"
ForeColor="Black"
HoverNodeStyle-Font-Underline="true"
ShowExpandCollapse="false"
NodeIndent="0"

<LevelStyles>
<asp:TreeNodeStyle ChildNodesPadding="10" Font-Bold Font-Size="12pt" ForeColor="DarkGreen"/>
<asp:TreeNodeStyle ChildNodesPadding="5" Font-Bold Font-Size="10pt" />
<asp:TreeNodeStyle ChildNodesPadding="5" Font-UnderLine Font-Size="10pt" />
<asp:TreeNodeStyle Font-Size="8pt" />
</LevelStyles>
</asp:TreeView>


定制控件模板主題

  你還可以在皮膚文件中應(yīng)用模板屬性。與集合類(lèi)似,在皮膚文件中定義模板屬性也不會(huì)應(yīng)用在目標(biāo)控件的模板的單獨(dú)項(xiàng)上,而是代替整個(gè)模板的內(nèi)容。這對(duì)于使用主題或StyleSheetTheme戲劇化地改變模板控件的布局時(shí)有用處的。

  Template.skin內(nèi)容

<asp:Login runat="server">
<LayoutTemplate>
<i>Please log in to this site:</i><br /><br />
<asp:Label Font-Bold="true" AssociatedControlID="UserName" ID="UserNameLabel" runat="server">User Name:</asp:Label>
<asp:TextBox ID="UserName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ControlToValidate="UserName" ErrorMessage="User Name is required." ID="UserNameRequired" runat="server" ToolTip="User Name is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator>
<asp:Label Font-Bold="true" AssociatedControlID="Password" ID="PasswordLabel" runat="server">Password:</asp:Label>
<asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator ControlToValidate="Password" ErrorMessage="Password is required." ID="PasswordRequired" runat="server" ToolTip="Password is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator>
<asp:Button CommandName="Login" ID="LoginButton" runat="server" Text="Log In" ValidationGroup="Login1" />
<asp:Literal EnableViewState="False" ID="FailureText" runat="server"></asp:Literal>
</LayoutTemplate>
</asp:Login>


在主題中使用數(shù)據(jù)綁定和表達(dá)式

  請(qǐng)注意,在主題模板中使用<%# Eval %>或<%# Bind %>的數(shù)據(jù)綁定也是有效的,但是不允許使用其它的代碼數(shù)據(jù)綁定或表達(dá)式。

  Databinding.skin內(nèi)容

<asp:DataList RepeatColumns="2" CellPadding="20" runat="server">
<ItemTemplate>
<h3><asp:Label ID="titleLabel" runat="server" Text='<%# Eval("title") %>'/></h3>
<asp:Image ImageUrl='<%# Eval("title_id", "Images/{0}.gif") %>' runat="server" />
<b>ID:</b>
<asp:Label ID="title_idLabel" runat="server" Text='<%# Eval("title_id") %>'/><br />
<b>Type:</b>
<asp:Label ID="typeLabel" runat="server" Text='<%# Eval("type") %>'/><br />
<b>Price:</b> $
<asp:Label ID="priceLabel" runat="server" Text='<%# Eval("price") %>'/><br />
<asp:TextBox TextMode="MultiLine" Rows="5" Columns="40" ID="notesLabel" Text='<%# Eval("notes") %>' runat="server"/><br />
</ItemTemplate>
</asp:DataList>

主題和配置

  你可能希望終端用戶(hù)動(dòng)態(tài)地為應(yīng)用程序選擇和應(yīng)用主題。通過(guò)把活動(dòng)主題存儲(chǔ)在用戶(hù)配置中,你可以根據(jù)用戶(hù)的喜好動(dòng)態(tài)的應(yīng)用主題。為了實(shí)現(xiàn)這種功能,你需要編寫(xiě)代碼來(lái)應(yīng)用主題,而不能使用@Page指令或Web.config中宣告式的方法。

在代碼中指定主題

  為了在代碼中應(yīng)用主題,你必須在運(yùn)行時(shí)設(shè)置Page(頁(yè)面)對(duì)象的Theme屬性。在請(qǐng)求的生命周期的早期(在PreInit事件中),你就必須給頁(yè)面應(yīng)用主題。在下面的例子中,用戶(hù)從下拉列表控件中選擇主題名稱(chēng)的時(shí)候,在PreInit事件中會(huì)動(dòng)態(tài)地應(yīng)用主題。

<script runat="server">
Protected Sub Page_PreInit()
Page.Theme = Server.HtmlEncode(Request.QueryString("Theme"))
End Sub
</script>


  使用ASP.NET 2.0中的配置(Profile)特性,你可以把用戶(hù)選擇的主題存儲(chǔ)起來(lái),并在用戶(hù)登陸站點(diǎn)的時(shí)候讀取它。下面的例子演示了這種技術(shù)。用戶(hù)可以選擇自己喜歡的顏色并存儲(chǔ)配置文件,接下來(lái)頁(yè)面通過(guò)檢索Profile對(duì)象中的主題名稱(chēng),應(yīng)用這種顏色主題。請(qǐng)注意,如果你登出站點(diǎn),主題就存儲(chǔ)為默認(rèn)值(無(wú)主題),但是如果你返回該站點(diǎn),用戶(hù)的選擇就會(huì)保留。

  ProfileTheme_vb.aspx的內(nèi)容

<%@ Page Language="VB" Theme="Default" %>
<script runat="server">
Protected Sub Page_PreInit()
If Not Profile.FavoriteColor = "" Then
Page.Theme = Profile.FavoriteColor
End If
End Sub
</script>

<asp:Label ID="Label1" runat="server" Text="Welcome to my page. Please login with User=Test, Password=Test@1234"></asp:Label><br />
<asp:Login ID="Login1" runat="server" /><br />
<asp:LoginView ID="LoginView1" runat="server">
<LoggedInTemplate>
<asp:HyperLink ID="HyperLink1" NavigateUrl="Profile_cs.aspx" Text="Edit Profile..." runat="server" /><br />
<asp:LoginStatus ID="LoginStatus1" runat="server"/>
</LoggedInTemplate>
</asp:LoginView>


  Profile_vb.aspx的內(nèi)容

<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
If Not Page.IsPostBack AndAlso Not Profile.FavoriteColor = "" Then
DropDownList1.DataBind()
End If
End Sub
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Profile.FavoriteColor = DropDownList1.SelectedValue
Response.Redirect("ProfileTheme_cs.aspx")
End Sub
</script>
<b>Favorite Color:</b>
<asp:DropDownList ID="DropDownList1" SelectedValue='<%# Profile.FavoriteColor %>' runat="server">
<asp:ListItem Value="OrangeTheme">Orange</asp:ListItem>
<asp:ListItem Value="GreenTheme">Green</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
<!-- google_ad_client = "pub-9289012034941110"; google_ad_width = 468; google_ad_height = 60; google_ad_format = "468x60_as"; google_ad_type = "text"; google_ad_channel = ""; google_color_border = "FFFFFF"; google_color_bg = "FFFFFF"; google_color_link = "0000FF"; google_color_text = "000000"; google_color_url = "333333"; //-->

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


更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號(hào)聯(lián)系: 360901061

您的支持是博主寫(xiě)作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長(zhǎng)非常感激您!手機(jī)微信長(zhǎng)按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對(duì)您有幫助就好】

您的支持是博主寫(xiě)作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長(zhǎng)會(huì)非常 感謝您的哦!!!

發(fā)表我的評(píng)論
最新評(píng)論 總共0條評(píng)論
主站蜘蛛池模板: 精品视频一区二区三区在线播放 | 日韩免费不卡 | 99热成人精品免费久久 | 夜夜骑夜夜操 | 四虎免费久久影院 | 亚洲综合精品一二三区在线 | 欧美日韩一区在线观看 | 欧美成人日韩 | 精品一区二区三区影片 | 99视频在线永久免费观看 | 欧美亚洲综合在线观看 | 天天操天天射天天色 | 美女一级毛片 | 在线成人精品国产区免费 | 国产一区二区三区久久精品 | 思思91精品国产综合在线 | 国产精品美女视频 | 国产在线91精品入口 | a亚洲欧美中文日韩在线v日本 | 99视频有精品视频免费观看 | 午夜视频网址 | 天天舔天天干 | 中文字幕一区二区日产乱码 | 成人免费毛片一区二区三区 | 天天操你 | 蜜桃久久久| 四虎4w4w| 一区二区三区 日韩 | 国产日产久久高清欧美一区 | 久久综合久久美利坚合众国 | 综合色图 | 欧美久在线观看在线观看 | 国产一区二区三区视频在线观看 | 奇米影音 | 逆天至尊免费看229集 | 精品久久久日韩精品成人 | 亚洲综合涩 | 四虎永久地址 | 美女被羞羞视频网站在线 | 91精品国产高清91久久久久久 | 91国内视频在线观看 |