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＞ |
上一页 [1] [2] [3] [4] [5] [6] 下一页
【责编:Peng】
相关文章编辑推荐
相关产品和培训
文章评论
认证培训 专题推荐
今日更新 社区讨论 博客论点 频道精选
您现在的位置： 
佚名
2007-1-20
