图像和主题

您可以在主题中包含图像。处理某些控件（例如Menu、TreeView或BulletedList控件）时，在主题中添加图像会很有用。

例如，列表10包含用于BulletedList控件的外观。该外观包含对OrangeTheme文件夹的BulletImages子文件夹中名为OrangeBullet的图像的引用。

列表10：BulletedList.Skin

<asp:BulletedListBulletStyle="CustomImage"BulletImageUrl="BulletImages/OrangeBullet.gif"Runat="Server"/>


列表11中的页面使用BulletedList外观来显示Titles数据库表中的书目的项目符号列表。


列表11：ShowBulletedList.aspx
<%@PageTheme="OrangeTheme"%><html><headrunat="server"><title>ShowBulletedList</title></head><body><formid="form1"runat="server"><asp:BulletedListID="BulletedTitles"DataSourceID="TitleSource"DataTextField="Title"Runat="Server"/><asp:SqlDataSourceID="TitleSource"ConnectionString="Server=localhost;Trusted_Connection=true;Database=Pubs"SelectCommand="SELECTTitleFROMTitles"Runat="Server"/></form></body></html>


打开列表11中的页面时，BulletedList控件将从Titles数据库表中检索标题列表，并显示该列表。请注意，BulletList外观将OrangeBullet图像应用到了BulletedList控件中（请参见图5）。

图5:应用包含图像的主题 

 
返回页首 

级联样式表和主题


您还可以在主题中使用级联样式表。如果您将级联样式表添加到主题文件夹中，那么当您将该主题应用于某个页面时，级联样式表将自动应用于该页面。如果Themes文件夹的内容被编译为某一类，则Themes文件夹中存在的任何级联样式表都将被添加到该类中。


例如，假设您要为页面中的所有超链接创建悬停效果。您可以使用列表12中的级联样式表，以便当鼠标悬停在超链接上时使超链接的颜色更改为橙色。


列表12：Hover.css
A:hover{color:orange;}


如果将列表12中的级联样式表添加到OrangeTheme文件夹中，那么当OrangeTheme应用于某个页面时，样式表将自动应用于该页面。使样式表自动应用于页面的一个要求是该页面必须包含服务器端<headrunat="Server"/>标记。此标记用于使链接呈现样式表中的样式。


由于列表13中的页面包含<headrunat="Server"/>标记，并且应用了OrangeTheme，因此该页面将自动链接到Hover.css样式表。


列表13：Menu.aspx
<%@PageTheme="OrangeTheme"%><html><headrunat="server"><title>Menu</title></head><body><formid="form1"runat="server"><ahref="Home.aspx">Home</a><br/><ahref="Products.aspx">Products</a><br/><ahref="Services.aspx">Services</a></form></body></html>


如果打开列表13中的页面并将鼠标悬停在某个超链接上，该超链接将变为橙色（请参见图6）。

图6：在主题中使用级联样式表 

 


可以在一个主题中包含多个级联样式表。如果您添加了多个级联样式表，则服务器端<headrunat="Server"/>标记将自动生成每个样式表的链接。
返回页首 

动态加载主题


假设您要动态更改网站的外观。您可能会希望用户在与您的Web应用程序进行交互时，可以自定义Web应用程序的颜色和总体外观。通过利用动态加载主题操作，您可以将此功能提供给ASP.NET2.0应用程序的用户。


通过修改Page对象的theme属性值，您可以在运行时修改页面使用的主题。您可以将任一有效主题的名称指派给此属性。您必须了解使用theme属性时的一个限制。即theme属性只能在PagePreInit事件发生过程中或发生之前设置。


在页面的PreInit方法的处理程序中，设置页面的Theme属性。


下面的代码示例演示如何根据查询字符串中传递的值按条件设置页面主题。


ProtectedvoidPage_PreInit(objectsender,EventArgse)
{
switch(Request.QueryString["theme"])
{
case"Blue":
Page.Theme="BlueTheme";
break;
case"Pink":
Page.Theme="PinkTheme";
break;
}
}


例如，假设您在Themes文件夹中创建了两个新的主题文件夹，名为RedTheme和YellowTheme。您可以将列表14中的外观添加到RedTheme文件夹中，将列表15中的外观添加到YellowTheme文件夹中（这些外观将把DropDownList控件的BackColor更改为红色或黄色）。


列表14：RedTheme/DropDownList.Skin
<asp:DropDownListBackColor="Red"Runat="Server"/>


列表15：YellowTheme/DropDownList.Skin
<asp:DropDownListBackColor="Yellow"Runat="Server"/>


列表16中的页面将根据用户在DropDownList控件中的选择动态加载RedTheme或YellowTheme主题（请参见图7）。请注意，“请求”集合用于在PreInit事件处理程序中检索用户的选择。由于PreInit事件在页面执行周期中引发过早，以至于无法使用dropThemeDropDownList控件的任何属性，因此您必须使用“请求”集合。

图7：动态加载主题 

 


 


列表16：DynamicTheme.aspx(C#)
<%@PageLanguage="C#"%><scriptrunat="server">voidPage_PreInit(objectsender,EventArgse){Page.Theme=Request["dropTheme"];}</script><html><headrunat="server"><title>DynamicTheme</title></head><body><formid="form1"runat="server"><asp:DropDownListid="dropTheme"AutoPostBack="true"Runat="Server"><asp:ListItemText="YellowTheme"/><asp:ListItemText="RedTheme"/></asp:DropDownList></form></body></html>


以编程方式应用控件外观


在页面的PreInit方法的处理程序中，设置控件的SkinID属性。


下面的代码示例演示如何设置Calendar控件的SkinID属性。
voidPage_PreInit(objectsender,EventArgse)
{
Calendar1.SkinID="MySkin";
}


返回页首 


结论


在本文中，我们学习了ASP.NET2.0主题的基础知识和高级应用。主题是一项强大的ASP.NETFramework新增功能。通过利用主题功能，可以显著减少您需要添加到各个ASP.NET页面的内容量。使用主题功能可以一次定义控件的外观，并可以将该外观应用于整个Web应用程序。因此，使用主题功能可以轻松创建具有一致的并可维护的外观设计的网站。


返回页首 


参考资料


• 


ASP.NETUnleashed


• 


ASP.NETv.2.0-TheBetaVersion


• 


ASP.NET2.0BetaPreview


• 


IntroducingMicrosoftASP.NET2.0


作者简介


StephenWalther编写了有关ASP.NET的畅销书ASP.NETUnleashed。此外，他还是ASP.NETCommunityStarterKit（Microsoft开发的ASP.NET示例应用程序）的体系结构设计师和主要开发人员。他还通过自己的公司Superexpert(http://www.superexpert.com/)为美国的公司（包括NASA和Microsoft）提供ASP.NET培训。