在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

智能推荐

物联网开发技术栈_物联网技术java技术栈-程序员宅基地

文章浏览阅读2.2k次,点赞2次,收藏10次。物联网开发技术栈 内容简介作为互联网技术的进化,物联网开发并非孤立的技术栈,而是向上承接了互联网,向下统领了嵌入式硬件开发的一个承上启下的全栈开发技术。虽然我们并不能预测物联网技术栈最终的样子:统一的开发语言是 JavaScript 还是 Python 亦或者其他编程语言;HTTP、WebSockets、MQTT、CoAP 等协议谁会是最后的赢家,并且随着物联网的不断进化,甚至我们..._物联网技术java技术栈

《Git学习笔记:Git入门 & 常用命令》-程序员宅基地

文章浏览阅读674次,点赞10次,收藏11次。Git是一个分布式版本控制工具,通常用来对软件开发过程中的源代码文件进行管理,通过Git仓库来存储和管理这些文件,Git仓库分为两种:指的是存储在各个开发人员自己本机电脑上的Git仓库指的是远程服务器上的Git仓库commit:提交,将本地文件和版本信息保存到本地仓库push:推送(上传),将本地仓库文件和版本信息上传到远程仓库pull:拉取(下载),将远程仓库文件和版本信息下载到本地仓库。

CPU热点分析——pprof (gperftools)使用_gperftools pprof-程序员宅基地

文章浏览阅读4.6k次。pprof (gperftools)使用谷歌的工具集,可查看CPU采样结果。pprof (google-perftool),用于来分析程序,必须保证程序能正常退出。使用步骤:1.准备工具,先安装工具包libunwind-1.1.tar.gzgperftools-2.1.tar.gz解压后 configure到系统默认路径即可,之后直接-lprofiler 2.再安装图形工具sudo yum ins..._gperftools pprof

JavaScript BOM-程序员宅基地

文章浏览阅读118次。JavaScript BOM:Navigator、History、Location

MongoDB数据库 —— 图形化工具_mongodb数据库图形化工具-程序员宅基地

文章浏览阅读6.2k次,点赞16次,收藏66次。在前面通过使用MongoDB在命令窗口操作数据库,而MySQL数据库也同样可以在命令窗口使用sql语句操作数据库,在安装数据库的时候提到可以安装这个图形化工具的,为了节省安装时间和卡顿选择后续安装MongoDB图形化工具,在MySQL数据中同样也有这个MySQL workbench 图形化工具可以选择进行安装;那么本篇就来安装MongoDB的图形化工具 — MongoDBCompass。_mongodb数据库图形化工具

ChatGPT带给智慧城市的启示——未来城市演进路径的探讨-程序员宅基地

文章浏览阅读1.4k次,点赞13次,收藏10次。未来城市的大模型包括城市总体规划、城市交通运输管理、城市公共安全和应急管理、经济发展和产业园区发展、社区发展、资源承载调控、污染调控、社会资源优化调控、基础设施调控、人口研究等模型。其对城市要素、关键指标、函数、流程、模型、平台、技术、资金、人才、市场、自然环境等内外部因素进行仿真建模。采用物联网、云计算、大数据、数字孪生和人工智能等技术来获取地、物、人、组织、环境、社会、经济、业务逻辑和运营规律等相关数据。、物联网、大数据、云计算、数字孪生、元宇宙、可穿戴生理传感器、分布式新能源等各类新技术。

随便推点

从零开始开发Shopify主题:(4)调用自定义配置_shopify自定义主题-程序员宅基地

文章浏览阅读3.6k次。在上一篇文章中,我们知道了如何使用配置文件自定义主题,以允许商店所有者自己更改Shopify主题。 如上所述,这些设置会在用户单击管理面板的在线商店>主题部分中的自定义主题按钮时显示,并在主题开发文件的config / settings_schema.json文件中定义。在这篇文章中,我们将了解如何访问这些设置并在开发主题时调用它们。调用配置要调用模板中的配置信息,需要使用li..._shopify自定义主题

git本地分支与远程分支关联及遇到的问题解决方案_本地分支 '(no branch)' (远程分支 = '(no branch)') 是无效的。引用名-程序员宅基地

文章浏览阅读2.6k次。1.查看本地分支git branch绿色表示当前分支#######################################################2.查看远程分支git branch -a#######################################################3.切换分支git checkout branch_name..._本地分支 '(no branch)' (远程分支 = '(no branch)') 是无效的。引用名称必须遵循

java连接mysql出现The server time zone value '�й���׼ʱ��' is unrecognized的解决方法_java.lang.runtimeexception: the server time zone v-程序员宅基地

文章浏览阅读2.2w次,点赞18次,收藏28次。java连接mysql出现The server time zone value '�й���׼ʱ��' is unrecognized的解决方法在Idea中连接数据库是抛出The server time zone value ‘�й���׼ʱ��’ is unrecogni错误 原因是因为使用了Mysql Connector/J 6.x以上的版本,然后就报了时区的错误。解决办法在配置url中添..._java.lang.runtimeexception: the server time zone value '嚙請對蕭嚙踝蕭

鸿蒙原生应用元服务实战-Serverless华为账户认证登录需尽快适配-程序员宅基地

文章浏览阅读671次,点赞11次,收藏9次。并且在这个固定的serverless服务中去增加这个,应该不是应用元服务开发者有这个加入权限的,应该是要统一解决,类似实现和手机注册验证一样的,直接可以使用或者少量代码配置即可使用。另外就是如果是新的元服务应用,使用的serverless,如果不支持华为账户功能,就没法上架,这个也是比较麻烦的,前面已经使用serverless开发基本完成或者已经完成的,得用其他方式去实现才行吧。对于已经上架的应用和元服务、升级也没法进行。3月1日的时间是快到了。

使用XAMPP可视化管理Mysql,使用JDBC访问数据库执行插入、查询、删除等操作_xammp进入可视化界面-程序员宅基地

文章浏览阅读5.7k次,点赞2次,收藏8次。准备工作:安装XAMPP,登陆apache,mysql,并通过phpadmin来创建数据库,新建一个表,插入一些数据:http://localhost/phpmyadmin,最好设置密码,不然后面连接数据库的时候可能会无法访问设置密码方式:修改密码--->一定要使用生成的密码来登陆,包括后面的数据库url也是。我简历的数据如下:这时候就可以在eclipse中编程开发_xammp进入可视化界面

(转) spring 的jar各包作用-程序员宅基地

文章浏览阅读119次。转自:http://blog.csdn.net/cailiang517502214/article/details/4797642spring.jar是包含有完整发布的单个jar包,spring.jar中包含除了spring-mock.jar里所包含的内容外其它所有jar包的内容,因为只有在开发环境下才会用到spring-mock.jar来进行辅助测试,正式应用系统中是用不得这些类的。...

推荐文章

热门文章

相关标签