在ASP.NET 2.0中使用样式、主题和皮肤 _asp.net如何通过主题来修改日历的样式-程序员宅基地

技术标签: calendar  server  themes  textbox  asp.net  asp  

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

 

本文来自程序员宅基地,转载请标明出处:http://blog.csdn.net/lockepeak/archive/2008/05/09/2424096.aspx

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/pllmfzc/article/details/6528223

智能推荐

JWT(Json Web Token)实现无状态登录_无状态token登录-程序员宅基地

文章浏览阅读685次。1.1.什么是有状态?有状态服务,即服务端需要记录每次会话的客户端信息,从而识别客户端身份,根据用户身份进行请求的处理,典型的设计如tomcat中的session。例如登录:用户登录后,我们把登录者的信息保存在服务端session中,并且给用户一个cookie值,记录对应的session。然后下次请求,用户携带cookie值来,我们就能识别到对应session,从而找到用户的信息。缺点是什么?服务端保存大量数据,增加服务端压力 服务端保存用户状态,无法进行水平扩展 客户端请求依赖服务.._无状态token登录

SDUT OJ逆置正整数-程序员宅基地

文章浏览阅读293次。SDUT OnlineJudge#include<iostream>using namespace std;int main(){int a,b,c,d;cin>>a;b=a%10;c=a/10%10;d=a/100%10;int key[3];key[0]=b;key[1]=c;key[2]=d;for(int i = 0;i<3;i++){ if(key[i]!=0) { cout<<key[i.

年终奖盲区_年终奖盲区表-程序员宅基地

文章浏览阅读2.2k次。年终奖采用的平均每月的收入来评定缴税级数的,速算扣除数也按照月份计算出来,但是最终减去的也是一个月的速算扣除数。为什么这么做呢,这样的收的税更多啊,年终也是一个月的收入,凭什么减去12*速算扣除数了?这个霸道(不要脸)的说法,我们只能合理避免的这些跨级的区域了,那具体是那些区域呢?可以参考下面的表格:年终奖一列标红的一对便是盲区的上下线,发放年终奖的数额一定一定要避免这个区域,不然公司多花了钱..._年终奖盲区表

matlab 提取struct结构体中某个字段所有变量的值_matlab读取struct类型数据中的值-程序员宅基地

文章浏览阅读7.5k次,点赞5次,收藏19次。matlab结构体struct字段变量值提取_matlab读取struct类型数据中的值

Android fragment的用法_android reader fragment-程序员宅基地

文章浏览阅读4.8k次。1,什么情况下使用fragment通常用来作为一个activity的用户界面的一部分例如, 一个新闻应用可以在屏幕左侧使用一个fragment来展示一个文章的列表,然后在屏幕右侧使用另一个fragment来展示一篇文章 – 2个fragment并排显示在相同的一个activity中,并且每一个fragment拥有它自己的一套生命周期回调方法,并且处理它们自己的用户输_android reader fragment

FFT of waveIn audio signals-程序员宅基地

文章浏览阅读2.8k次。FFT of waveIn audio signalsBy Aqiruse An article on using the Fast Fourier Transform on audio signals. IntroductionThe Fast Fourier Transform (FFT) allows users to view the spectrum content of _fft of wavein audio signals

随便推点

Awesome Mac:收集的非常全面好用的Mac应用程序、软件以及工具_awesomemac-程序员宅基地

文章浏览阅读5.9k次。https://jaywcjlove.github.io/awesome-mac/ 这个仓库主要是收集非常好用的Mac应用程序、软件以及工具,主要面向开发者和设计师。有这个想法是因为我最近发了一篇较为火爆的涨粉儿微信公众号文章《工具武装的前端开发工程师》,于是建了这么一个仓库,持续更新作为补充,搜集更多好用的软件工具。请Star、Pull Request或者使劲搓它 issu_awesomemac

java前端技术---jquery基础详解_简介java中jquery技术-程序员宅基地

文章浏览阅读616次。一.jquery简介 jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互 jQuery 的功能概括1、html 的元素选取2、html的元素操作3、html dom遍历和修改4、js特效和动画效果5、css操作6、html事件操作7、ajax_简介java中jquery技术

Ant Design Table换滚动条的样式_ant design ::-webkit-scrollbar-corner-程序员宅基地

文章浏览阅读1.6w次,点赞5次,收藏19次。我修改的是表格的固定列滚动而产生的滚动条引用Table的组件的css文件中加入下面的样式:.ant-table-body{ &amp;amp;::-webkit-scrollbar { height: 5px; } &amp;amp;::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box..._ant design ::-webkit-scrollbar-corner

javaWeb毕设分享 健身俱乐部会员管理系统【源码+论文】-程序员宅基地

文章浏览阅读269次。基于JSP的健身俱乐部会员管理系统项目分享:见文末!

论文开题报告怎么写?_开题报告研究难点-程序员宅基地

文章浏览阅读1.8k次,点赞2次,收藏15次。同学们,是不是又到了一年一度写开题报告的时候呀?是不是还在为不知道论文的开题报告怎么写而苦恼?Take it easy!我带着倾尽我所有开题报告写作经验总结出来的最强保姆级开题报告解说来啦,一定让你脱胎换骨,顺利拿下开题报告这个高塔,你确定还不赶快点赞收藏学起来吗?_开题报告研究难点

原生JS 与 VUE获取父级、子级、兄弟节点的方法 及一些DOM对象的获取_获取子节点的路径 vue-程序员宅基地

文章浏览阅读6k次,点赞4次,收藏17次。原生先获取对象var a = document.getElementById("dom");vue先添加ref <div class="" ref="divBox">获取对象let a = this.$refs.divBox获取父、子、兄弟节点方法var b = a.childNodes; 获取a的全部子节点 var c = a.parentNode; 获取a的父节点var d = a.nextSbiling; 获取a的下一个兄弟节点 var e = a.previ_获取子节点的路径 vue

推荐文章

热门文章

相关标签