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í)候傳遞給瀏覽器的。
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è)置,如下所示:
.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樣式屬性:
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ù)器控件的樣式:
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(屬性-子屬性):
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è)置這些樣式的屬性,如下面的例子所示:
……
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)嵌套的子元素:
<TitleStyle BorderColor="darkolivegreen" BorderWidth="3" BackColor="olivedrab" Height="50px" />
</ASP:Calendar>
下面的例子顯示了一種替代語(yǔ)法,但是它的功能與前面的語(yǔ)法是一樣的。
……
>
<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):
.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 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ù)器控件的樣式,如下面的代碼所示:
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: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è)面的控件上。
<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è)置主題。
<system.web>
<pages theme="ExampleTheme"/>
</system.web>
</configuration>
禁止某個(gè)控件應(yīng)用主題
你可以通過(guò)把控件的EnableTheming屬性設(shè)置為false,把特定的控件排除出主題的應(yīng)用范圍。
……
<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)的皮膚中獲取了不同的樣式集合。
<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):
/App_Themes
/MyTheme
Default.skin
Red.skin
Blue.skin
你也可以根據(jù)控件類(lèi)型對(duì)皮膚文件進(jìn)行分組,使每個(gè)皮膚文件包含特定控件的一組皮膚定義:
/App_Themes
/MyTheme
GridView.skin
Calendar.skin
Label.skin
你甚至于可以根據(jù)站點(diǎn)的不同區(qū)域來(lái)分割皮膚文件,例如:
/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)簽都顯示為橙色。
<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)色。
<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)容。
<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è)包含圖像子目錄的主題。
<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)容
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)容
<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)容
<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)用主題。
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)容
<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)容
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" />
更多文章、技術(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ì)您有幫助就好】元
