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> |
<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> |
<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"/> |
<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> |
<ASP:Calendar runat="server" BackColor="Beige" ForeColor="Brown" BorderWidth="3" …… /> |
<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" /> |
<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> |
<style> .calstyle { font-size:12pt; font-family:Tahoma,Arial; } </style> <ASP:Calendar CssClass="calstyle" runat="server" …… /> |
<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"/> |
<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> |
<%@ 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目录中。全局主题放置在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 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" /> |
<%@ 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" /> |
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 /> |
<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> |
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> |
<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> |
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> |
<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://news.newhua.com/html/Soft_Deve/2007-1/19/0711913512566877_49_2.shtml
联系客服