看了一篇关于主题和皮肤应用的贴子，但关于Theme和StyleSheetTheme的关系讲得不是太清楚，另外代码是带行号的。。。（我粘到VS2005中好麻烦），所以引用过来，修改一下，并附上我完成的一个例子
原文地址：http://www.cnblogs.com/njypcmqj/archive/2007/03/10/670559.html
例子下载：http://www.cnblogs.com/Files/reonlyrun/TestTheme.rar
Asp.net2.0和1.1相比，激动人心的变化很多。无论从外在表现上还是内在品质上都有巨大的提升。本人以一个教师授课的角度，讲解几个最为显著的变化。
一. ASP.NET 2.0主题皮肤（theme skin）的使用
我们在学习使用Macromedia Dreamweaver制作网页时，为了便于协作开发和提高开发效率，以及减少后期维护的工作量，大量使用CSS来定制网页风格。
又，我们经常见到论坛或者blogs上面可以自由切换我们博客的风格，其实这在asp.net2.0中提供的皮肤功能很容易实现这些效果。
下面以一个日历控件的例子来说明：
日历控件是一个式样比较复杂的控件，如果我们在页面中定义，虽然可以达到目的但感觉很乱，且维护麻烦，不便于协作开发,如下。
BackColor ="Beige"
ForeColor ="Brown"
BorderWidth ="3"
BorderStyle ="Solid"
BorderColor ="Black"
Height ="450"
Width ="450"
Font-Size ="12pt"
Font-Names ="Tahoma,Arial"
Font-Underline ="false"
CellSpacing =2
ShowGridLines =true
>
< 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 >
我们如果使用Asp.NET2.0提供的皮肤来设置它，就显得清晰明了的多。
1、首先选择网站项目名称→右键单击→添加新项
2、选择添加“外观文件”，输入外观文件名（皮肤文件）：
3、系统会建立一个app_themes文件夹，并在里面建立一个皮肤文件夹mytheme，并在里面建立一个皮肤文件mytheme.skin：
4、根据自己页面的需要，可是添加页面的CSS文件以及不同控件的皮肤文件：
各个文件内容如下：
Calendar.skin:
BackColor ="#FFFFCC"
BorderColor ="#FFCC66"
BorderWidth ="1px"
DayNameFormat ="FirstLetter"
Font-Names ="Verdana"
Font-Size ="8pt"
ForeColor ="#663399"
Height ="200px"
ShowGridLines ="True"
Width ="220px" >
< SelectedDayStyle BackColor ="#CCCCFF" Font-Bold ="True" />
< SelectorStyle BackColor ="#FFCC66" />
< OtherMonthDayStyle ForeColor ="#CC9966" />
< TodayDayStyle BackColor ="#FFCC66" ForeColor ="White" />
< NextPrevStyle Font-Size ="9pt" ForeColor ="#FFFFCC" />
< DayHeaderStyle BackColor ="#FFCC66" Font-Bold ="True" Height ="1px" />
< TitleStyle BackColor ="#990000" Font-Bold ="True" Font-Size ="9pt" ForeColor ="#FFFFCC" />
</ asp:Calendar >
< asp:Calendar SkinID ="Simple" runat ="server"
BackColor ="White"
BorderColor ="#999999"
CellPadding ="4"
DayNameFormat ="FirstLetter"
Font-Names ="Verdana"
Font-Size ="8pt"
ForeColor ="Black"
Height ="180px"
Width ="200px" >
< SelectedDayStyle BackColor ="#666666" Font-Bold ="True" ForeColor ="White" />
< SelectorStyle BackColor ="#CCCCCC" />
< WeekendDayStyle BackColor ="#FFFFCC" />
< OtherMonthDayStyle ForeColor ="#808080" />
< TodayDayStyle BackColor ="#CCCCCC" ForeColor ="Black" />
< NextPrevStyle VerticalAlign ="Bottom" />
< DayHeaderStyle BackColor ="#CCCCCC" Font-Bold ="True" Font-Size ="7pt" />
< TitleStyle BackColor ="#999999" BorderColor ="Black" Font-Bold ="True" />
</ asp:Calendar >
Label.skin:
font-bold ="true"
forecolor ="orange" />
< asp:label runat ="server" SkinID ="Blue"
font-bold ="true"
forecolor ="blue" />
Default.css:
margin-top : 0px ;
margin-right : 15px ;
margin-bottom : 10px ;
margin-left : 15px ;
font-family : Verdana, Arial, Helvetica, sans-serif ;
font-size : 10pt ;
color : #000000 ;
}
A:hover {
color : #0066ff ;
background-color : Transparent ;
}
A:active {
color : #333366 ;
text-decoration : none ;
background-color : Transparent ;
}
A:link {
color : #333366 ;
text-decoration : none ;
background-color : Transparent ;
}
A:visited {
color : #333366 ;
text-decoration : none ;
background-color : Transparent ;
}
然后在Aspx页面中把页面与皮肤关联即可：
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > 无标题页 </ title >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< asp:Label ID ="Label1" runat ="server" Text ="Label" ></ asp:Label >
< asp:Calendar ID ="Calendar1" runat ="server" ></ asp:Calendar >
</ div >
</ form >
</ body >
</ html >
我们主要关注的是第一行的Theme="myTheme"。
注意：
1、如果主题是通过设置 @Page 指令或配置的 <pages/> 节的 Theme 属性 (attribute) 应用的，则主题中的外观属性 (property) 将重写页中目标控件的同名属性 (property)。
2、通过将 @Page 指令或配置的 <pages/> 节的 StyleSheetTheme 属性设置为主题的名称，可以将主题定义作为服务器端样式来应用。主题属性用作 StyleSheetTheme 时，可能被页中的控件重写。
3、 StyleSheetTheme 应在应用程序开发过程中应用，它作为从页中提取样式信息的手段，使应用程序的行为可独立于应用程序的外观进行维护。对应用程序应用 StyleSheetTheme 后，您可能还希望应用 Theme。如果对应用程序既应用 Theme 又应用 StyleSheetTheme，则按以下顺序应用控件的属性：
- 首先应用 StyleSheetTheme 属性
- 应用页中的控件属性（重写 StyleSheetTheme）
- 最后应用 Theme 属性（重写控件属性和 StyleSheetTheme）
4、在皮肤文件里面可以针对同一个控件设置多个皮肤风格，使用skinid来区分不同风格，并在aspx页面文件的控件中使用skinid来引用不同皮肤风格：
< asp:Label ID ="Label2" runat ="server" Text ="Label" ></ asp:Label >
< asp:Label ID ="Label3" runat ="server" Text ="Label" SkinID ="Blue" ></ asp:Label >
其中Label3使用Blue皮肤，其他使用默认的皮肤。
二. 动态加载皮肤
这也是Asp.NET2.0极大提升页面效果的画龙点睛之处：
我们在App_Themes中配置置了ThemeA皮肤和ThemeB皮肤，我们就可以动态修改皮肤了：
ThemeA里的Label.skin:
font-bold ="true"
forecolor ="orange" />
ThemeB里的Label.skin:
font-bold ="true"
forecolor ="blue" />
CodeTheme.aspx:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > CodeTheme </ title >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< a href ="CodeTheme.aspx?Theme=ThemeA" > Theme A </ a >
< a href ="CodeTheme.aspx?Theme=ThemeB" > Theme B </ a >
< asp:Label ID ="Label1" runat ="server" Text ="Label" ></ asp:Label >
</ div >
</ form >
</ body >
</ html >
CodeTheme.aspx.cs:
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Default4 : System.Web.UI.Page
{
protected void Page_PreInit()
{
Page.Theme = Request.QueryString[ " Theme " ];
}
protected void Page_Load( object sender, EventArgs e)
{
}
}
三、为应用程序指定和禁用主题
每个应用程序中都包括多个页面，并且为了保证和谐统一的用户界面，我们可以让所有页面使用同一主题。如果为在每个页头都设置相同的Theme属性值，那么非常麻烦。为了快速地为整个应用程序的所有页面设置相同的主题，可以设置Web.Config文件的<pages>配置节内容。
<!--
注意: 除了手动编辑此文件以外，您还可以使用
Web 管理工具来配置应用程序的设置。可以使用 Visual Studio 中的
“网站”->“Asp.Net 配置”选项。
设置和注释的完整列表在
machine.config.comments 中，该文件通常位于
/Windows/Microsoft.Net/Framework/v2.x/Config 中
-->
< configuration >
< appSettings />
< connectionStrings />
< system .web >
<!--
设置 compilation debug="true" 将调试符号插入
已编译的页面中。但由于这会
影响性能，因此只在开发过程中将此值
设置为 true。
-->
< compilation debug ="true" />
<!--
通过 <authentication> 节可以配置 ASP.NET 使用的
安全身份验证模式，
以标识传入的用户。
-->
< authentication mode ="Windows" />
<!--
如果在执行请求的过程中出现未处理的错误，
则通过 <customErrors> 节可以配置相应的处理步骤。具体说来，
开发人员通过该节可以配置
要显示的 html 错误页
以代替错误堆栈跟踪。
<customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm">
<error statusCode="403" redirect="NoAccess.htm" />
<error statusCode="404" redirect="FileNotFound.htm" />
</customErrors>
-->
< pages theme ="FirstTheme" />
</ system.web >
</ configuration >
1442
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
