日韩久久久精品,亚洲精品久久久久久久久久久,亚洲欧美一区二区三区国产精品 ,一区二区福利

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

系統 2257 0

ASP.NET 2.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>

給Web服務器控件應用樣式

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

  下面的例子顯示了一個應用了幾種樣式的WebCalendar控件。請注意,當設置的屬性是類類型(class type)的時候(例如字體),你必須使用子屬性語法PropertyName-SubPropertyName(屬性-子屬性):

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


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

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


  下面的語法有稍微的不同,它允許你把Style屬性聲明為Web服務器控件標記內嵌套的子元素:

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


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

<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服務器控件的時候,你可以使用CSS類定義給Web服務器控件應用樣式。WebControl基類暴露了一個叫做CssClass的字符串屬性,用于設置樣式類:

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

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


  如果某個服務器控件上設置的屬性沒有與該控件的強類型屬性相對應,那個該屬性和值就被填充到控件的Attributes集合中。在默認情況下,服務器控件會把這些屬性不作更改地呈現在HTML中,并返回給作出請求的瀏覽器客戶端。這意味著,我們可以直接設置Web服務器控件的樣式和類屬性,而不必使用強類型的屬性。盡管它要求我們理解控件的實際顯示過程,但是它也是應用樣式的一個靈活的途徑。對于標準的輸入控件,這樣的操作用處很大,如下面的例子所示:

<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基類的ApplyStyle方法來編程設置Web服務器控件的樣式,如下面的代碼所示:

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

利用主題來定制站點

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

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


  作為在各個控件上指定樣式的補充,ASP.NET 2.0引入了"主題"的概念,它提供了一種定義站點的控件和頁面的樣式設置的簡單途徑,而且它與應用程序的頁面是分離的。主題的優勢在于,你在設計站點的時候不用考慮它的樣式,在將來應用樣式的時候,不必更新頁面或應用程序代碼。你還可以從外部獲取定制的主題,然后應用到自己的應用程序上。主題的優勢是,樣式設置都存儲在一個單獨的位置,它的維護與應用程序是分離的。

  下面的例子演示了一個帶有主題的頁面。請注意,這個頁面本身沒有包含任何樣式信息。主題在運行時自動地把樣式屬性應用到頁面的控件上。

<%@ 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文件夾

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


  查看前面的例子,你會發現皮膚文件的內容就是控件如何顯示的簡單定義。一個皮膚文件可以包含多個控件定義,例如為每種控件類型提供一個定義。在應用主題的時候,主題中定義的控件屬性自動地重載相同類型的控件的本地屬性值。例如,皮膚文件中的<asp:Calendar Font-Name="Verdana" runat="server"/>控件定義將會引發應用了該主題的頁面中的所有Calendar控件都使用Verdana字體。該控件的這個屬性的本地值都會被主題重載。請注意,在皮膚文件中給控件定義指定ID屬性是錯誤的。

全局的和應用程序的主題

  主題可以應用于應用程序層或機器層(用于所有的應用程序)。應用程序層的主題放置在應用程序根目錄下的App_Themes目錄中。全局主題放置在ASP.NET安裝目錄下的ASP.NETClientFiles文件夾下的"Themes"目錄中,例如%WINDIR%\Microsoft.NET\Framework\<version>\ASP.NETClientFiles\Themes。IIS Web站點的全局主題的位置是Inetpub\wwwroot\aspnet_client\system_web\<version>\Themes。
給頁面指定主題

  通過把<%@ Page Theme="..." %>指令設置為全局或應用程序層的主題(Themes或App_Themes目錄下的文件夾名稱),我們可以為單個頁面指定主題。一個頁面只能應用一個主題,但是該主題中的多個皮膚文件可以用于設置頁面上的控件的樣式信息。

在配置文件中指定主題

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

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


禁止某個控件應用主題

  你可以通過把控件的EnableTheming屬性設置為false,把特定的控件排除出主題的應用范圍。

<%@ 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)

  在默認情況下,皮膚文件中的控件定義會應用到頁面上的所有相同類型的控件上。但是,你可能希望應用程序不同部分的同類控件顯示為不同的樣式。例如,在某個地方你可能希望文本和標簽控件用粗體顯示,在另一個地方可能希望它用斜體顯示。你可以使用主題中的命名皮膚來實現這種功能。

默認皮膚和命名皮膚

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

<%@ 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"/>


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

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


  你也可以根據控件類型對皮膚文件進行分組,使每個皮膚文件包含特定控件的一組皮膚定義:

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


  你甚至于可以根據站點的不同區域來分割皮膚文件,例如:

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


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

使用主題的服務器端樣式

  主題是在應用程序建立之后,甚至于在站點寄宿在生產服務器之后才應用到程序上的。給程序應用主題的人可能是該應用程序的開發人員。例如,讓應用程序的開發人員和網站設計人員一起處理站點的外觀是很常見的。在主題應用到程序上之后,主題定義中的樣式屬性會重載應用程序頁面中的目標控件的屬性值。

  另一方面,開發者獨立地構建樣式信息也很常見。例如,在獨立的文件中,使用級聯樣式表(CSS)來定義控件和標記樣式。在這種情況下,你也可以使用主題,把主題當作是一種服務器端的樣式表。通過這種方式應用樣式表的時候,主題定義中的樣式屬性會設置應用程序中的控件的默認值,但是可以通過其它操作來重新設置頁面中的控件的這些值,從而重載了主題定義。

宣告式的服務器端樣式

  當我們通過在@Page指令或配置文件的<pages/>段中設置Theme屬性來應用主題的時候,主題中的皮膚的屬性將會重載頁面中目標控件的相同屬性。下面的例子演示了頁面中的一個標簽控件,它的ForeColor被設置為藍色。在應用的主題中,標簽皮膚把ForeColor屬性設置為橙色。當你運行頁面的時候,請注意主題定義重載了本地控件屬性,所有的標簽都顯示為橙色。

<%@ 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" />


  請注意,這個標簽是橙色的(繼承自主題)而不是藍色的(控件設置)

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

<%@ 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" />


  請注意,這個標簽是藍色的(控件設置)而不是橙色的(來自StyleSheetTheme)

主題和StyleSheetTheme(樣式表主題)的優先問題

  StyleSheetTheme是在應用程序開發的時候使用的,是一種在頁面中構建樣式信息的方法,目的是為了保證應用程序的行為與外觀的改變無關。你可能需要在已經使用了StyleSheetTheme的應用程序中進一步應用主題。如果應用程序同時使用了主題和StyleSheetTheme,那么控件的屬性將按下面的次序來應用:

  · 首先應用StyleSheetTheme屬性

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

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

  下面的例子演示了上述內容。

<%@ 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" />


  請注意,頁面重載了StyleSheetTheme 的斜體屬性,但是主題的前景色重載了其它內容

Visual Web Developer的支持

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

主題和皮膚的內容

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

Themable(可應用主題的)屬性

  皮膚文件中的控件定義只能包含屬性的值,它們都被標記為Themeable(可應用主題)。每個控件都可以通過在屬性上使用ThemeableAttribute來定義一組屬性。把不可應用主題的屬性添加到皮膚文件中會導致錯誤出現。某個控件本身可能被主題排除了,例如數據源控件就不可應用主題。在默認情況下,任何控件的ID屬性是不能應用主題的。除非控件有特定的要求,否則在默認情況下,它的所有屬性都是可以應用主題的。你可以參照.NET框架組件參考文檔來確認控件的屬性是否可以應用主題。

在主題中使用CSS

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

在主題中使用圖像

  主題中也可以包含圖像,它們是皮膚文件中的控件定義引用的。皮膚文件中的圖像引用必須使用主題目錄下的圖像文件夾的相對路徑,這樣皮膚文件和圖像才能輕易地隨應用程序遷移。在運行時,圖像的路徑會被重新定位,因此,對目標頁面中的控件來說,這個引用是相對的。下面的例子演示了一個包含圖像子目錄的主題。

<%@ 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 />


定制控件集合主題

  你在皮膚文件中設置的大多數屬性都是一些簡單的值屬性,例如Font-Name、Width和 BackColor。但是,你也可以設置皮膚集合屬性。皮膚集合屬性并非應用在目標控件的集合項的屬性上,而是在使用主題或使用StyleSheetTheme合并集合的時候,完全地替代集合。

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

  TreeView.skin的內容

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


定制控件模板主題

  你還可以在皮膚文件中應用模板屬性。與集合類似,在皮膚文件中定義模板屬性也不會應用在目標控件的模板的單獨項上,而是代替整個模板的內容。這對于使用主題或StyleSheetTheme戲劇化地改變模板控件的布局時有用處的。

  Template.skin內容

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


在主題中使用數據綁定和表達式

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

  Databinding.skin內容

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

主題和配置

  你可能希望終端用戶動態地為應用程序選擇和應用主題。通過把活動主題存儲在用戶配置中,你可以根據用戶的喜好動態的應用主題。為了實現這種功能,你需要編寫代碼來應用主題,而不能使用@Page指令或Web.config中宣告式的方法。

在代碼中指定主題

  為了在代碼中應用主題,你必須在運行時設置Page(頁面)對象的Theme屬性。在請求的生命周期的早期(在PreInit事件中),你就必須給頁面應用主題。在下面的例子中,用戶從下拉列表控件中選擇主題名稱的時候,在PreInit事件中會動態地應用主題。

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


  使用ASP.NET 2.0中的配置(Profile)特性,你可以把用戶選擇的主題存儲起來,并在用戶登陸站點的時候讀取它。下面的例子演示了這種技術。用戶可以選擇自己喜歡的顏色并存儲配置文件,接下來頁面通過檢索Profile對象中的主題名稱,應用這種顏色主題。請注意,如果你登出站點,主題就存儲為默認值(無主題),但是如果你返回該站點,用戶的選擇就會保留。

  ProfileTheme_vb.aspx的內容

<%@ 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的內容

<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中使用樣式、主題和皮膚


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯系: 360901061

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

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 筠连县| 象州县| 华容县| 南阳市| 勃利县| 横山县| 平泉县| 天长市| 新巴尔虎左旗| 海晏县| 大姚县| 蓝田县| 罗源县| 浮山县| 达孜县| 扎鲁特旗| 原平市| 舞阳县| 清水河县| 遂昌县| 宁夏| 介休市| 砚山县| 保亭| 镇巴县| 东乡族自治县| 武强县| 洪泽县| 汤原县| 玉田县| 南投县| 东乡| 永善县| 桑植县| 安新县| 商都县| 海口市| 天长市| 怀集县| 星子县| 广东省|