Go homepage(回首页) Upload pictures (上传图片) Write articles (发文字帖)
The author:(作者)delvpublished in(发表于) 2014/1/10 6:31:02 在ASP.NET,2.0中使用样式、主题和皮肤_[Asp.Net教程]
查看前面的例子,你会发现皮肤文件的内容就是控件如何显示的简单定义。一个皮肤文件可以包含多个控件定义,例如为每种控件类型提供一个定义。在应用主题的时候,主题中定义的控件属性自动地重载相同类型的控件的本地属性值。例如,皮肤文件中的<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/MyThemeDefault.skinRed.skinBlue.skin 你也可以根据控件类型对皮肤文件进行分组,使每个皮肤文件包含特定控件的一组皮肤定义:/WebSite1/App_Themes/MyThemeGridView.skinCalendar.skinLabel.skin 你甚至于可以根据站点的不同区域来分割皮肤文件,例如:/WebSite1/App_Themes/MyThemeHomePage.skinDataReports.skinForums.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 = "" ThenPage.Theme = Profile.FavoriteColorEnd IfEnd 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 = "" ThenDropDownList1.DataBind()End IfEnd SubProtected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)Profile.FavoriteColor = DropDownList1.SelectedValueResponse.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" />
出处: 天极开发
赞