asp.net2.0主题、皮肤的应用

本文转载自:http://www.cnblogs.com/njypcmqj/archive/2007/03/10/670559.aspx

Asp.net2.0

和1.1相比，激动人心的变化很多。无论从外在表现上还是内在品质上都有巨大的提升。本人以一个教师授课的角度，讲解几个最为显著的变化。

主题和外观是ASP.NET 2.0 中的新增功能, 使用 ASP.NET 2.0 的“主题和外观”功能，可以将样式和布局信息分解为单独的文件组，统称为“主题”。然后，主题可应用于任何站点，影响站点中页和控件的外观。这样，通过更改主题即可轻松地维护对站点的样式更改，而无需对站点各页进行编辑。还可与其他开发人员共享主题。应用 ASP.NET 2.0的“主题和外观”功能轻松实现对网站美观的控制。

ASP.NET 提供了一些可在应用程序中对页和控件的外观或样式进行自定义的功能。控件支持 Style 对象模型，用于设置字体、边框、背景色和前景色、宽度、高度等样式属性。控件还完全支持可将样式设置与控件属性分离的级联样式表 (CSS)。可以将样式信息定义为控件属性或 CSS，也可以在名为 Theme 的单独文件组中定义此信息，以便应用于应用程序的全部或部分页。各控件样式在主题中被指定为 Skin。

“主题”，它提供了一种简易方式，可以独立于应用程序的页为站点中的控件和页定义样式设置。多个主题的优点在于，设计站点时可以不考虑样式，以后应用样式时也无需更新页或应用程序代码。此外，还可以从外部源获得自定义主题，以便将样式设置应用于应用程序。一个主题的优点在于，样式设置存储在一个位置，可以独立于应用该主题的应用程序来维护这些设置。

一. 

我们在学习使用Macromedia Dreamweaver制作网页时，为了便于协作开发和提高开发效率，以及减少后期维护的工作量，大量使用CSS来定制网页风格。

又，我们经常见到论坛或者blogs上面可以自由切换我们博客的风格，其实这在asp.net2.0中提供的皮肤功能很容易实现这些效果。

下面以一个日历控件的例子来说明：

日历控件是一个式样比较复杂的控件，如果我们在页面中定义，虽然可以达到目的但感觉很乱，且维护麻烦，不便于协作开发,如下。

asp.net2.0提供的皮肤来设置它，就显得清晰明了的多。

日历代码
 1<ASP:Calendar id="MyCalendar" runat="server"
 2
 3           BackColor="Beige"
 4
 5           ForeColor="Brown"
 6
 7           BorderWidth="3"
 8
 9           BorderStyle="Solid"
10
11           BorderColor="Black"
12
13           Height="450"
14
15           Width="450"
16
17           Font-Size="12pt"
18
19           Font-Name="Tahoma,Arial"
20
21           Font-Underline="false"
22
23           CellSpacing=2
24
25           CellPadding=2
26
27           ShowGridLines=true
28
29       >
30
31           <TitleStyle BorderColor="darkolivegreen" BorderWidth="3" BackColor="olivedrab" Height="50px" />
32
33           <DayHeaderStyle BorderColor="darkolivegreen" BorderWidth="3" BackColor="olivedrab" ForeColor="black" Height="20px" />
34
35           <WeekEndDayStyle BackColor="palegoldenrod" Width="50px" Height="50px" />
36
37           <DayStyle Width="50px" Height="50px" />
38
39           <TodayDayStyle BorderWidth="3" />
40
41           <SelectedDayStyle BorderColor="firebrick" BorderWidth="3" />
42
43           <OtherMonthDayStyle Width="50px" Height="50px" />
44
45       </ASP:Calendar>
46
47

我们如果使用

1、 首先选择网站项目名称→右键单击→添加新项

 2、 选择添加“外观文件”，输入外观文件名（皮肤文件）：

 3、 系统会建立一个app_themes文件夹，并在里面建立一个皮肤文件夹mytheme，并在里面建立一个皮肤文件mytheme.skin：

4、 根据自己页面的需要，可是添加页面的CSS文件以及不同控件的皮肤文件：

 各个文件内容如下：

 

calendar.skin
 1<asp:Calendar runat="server" BackColor="#FFFFCC" BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="FirstLetter" Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" Height="200px" ShowGridLines="True" Width="220px">
 2
 3 <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
 4
 5 <SelectorStyle BackColor="#FFCC66" />
 6
 7 <OtherMonthDayStyle ForeColor="#CC9966" />
 8
 9 <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
10
11 <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
12
13 <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
14
15 <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" />
16
17</asp:Calendar>
18
19 
20
21<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">
22
23 <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
24
25 <SelectorStyle BackColor="#CCCCCC" />
26
27 <WeekendDayStyle BackColor="#FFFFCC" />
28
29 <OtherMonthDayStyle ForeColor="#808080" />
30
31 <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
32
33 <NextPrevStyle VerticalAlign="Bottom" />
34
35 <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
36
37 <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
38
39</asp:Calendar>
40
41

 

label.skin
1<asp:label runat="server" font-bold="true" forecolor="orange" />
2
3<asp:label runat="server" SkinID="Blue" font-bold="true" forecolor="blue" />
4
5

 

default.css
 1body {}{
 2
 3    margin-top: 0px;
 4
 5    margin-right: 15px;
 6
 7    margin-bottom: 10px;
 8
 9    margin-left: 15px;
10
11    font-family: Verdana, Arial, Helvetica, sans-serif;
12
13    font-size: 10pt;
14
15    color: #000000;
16
17}
18
19 
20
21A:hover {}{
22
23    COLOR: #0066ff;
24
25     background-color:Transparent;
26
27}
28
29A:active {}{
30
31    COLOR:#333366; TEXT-DECORATION: none;
32
33     background-color:Transparent;
34
35}
36
37A:link {}{
38
39    COLOR:#333366; TEXT-DECORATION:none;
40
41     background-color:Transparent;
42
43}
44
45A:visited {}{
46
47    COLOR:#333366; TEXT-DECORATION: none;
48
49    
50
51 background-color:Transparent;
52
53}
54
55

（以上代码示例只是部分）

然后在aspx页面中把页面与皮肤关联即可：

 

default.aspx
 1<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" Theme="myTheme"%>
 2
 3 
 4
 5<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 6
 7 
 8
 9<html xmlns="http://www.w3.org/1999/xhtml" >
10
11<head runat="server">
12
13    <title>测试</title>
14
15</head>
16
17<body>
18
19    <form id="form1" runat="server">
20
21    <div>
22
23        <asp:Button ID="Button1" runat="server" Text="Button" />
24
25        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
26
27        <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
28
29      
30
31    </div>
32
33    </form>
34
35</body>
36
37</html>
38
39

 

我们主要关注的是第一行的Theme="myTheme"，需要注意的是：

1、          如果使用Theme="myTheme"设置皮肤，则在网页中对控件属性的设置就不会起作用。若既想使用皮肤设置网页风格，又想单独设置个别控件风格，则可以使用StyleSheetTheme="myTheme"来关联皮肤。

2、          在皮肤文件里面可以针对同一个控件设置多个皮肤风格，使用skinid来区分不同风格，并在aspx页面文件的控件中使用skinid来引用不同皮肤风格：

 

label
1<asp:Label ID="Label1" runat="server" Text="Hello 1" /><br />
2
3      <asp:Label ID="Label2" runat="server" Text="Hello 2" SkinID="Blue" /><br />
4
5      <asp:Label ID="Label3" runat="server" Text="Hello 3" /><br />
6

其中label2使用blue皮肤，其他使用默认的皮肤。

二. 动态加载皮肤

这也是asp.net2.0极大提升页面效果的画龙点睛之处：

我们在app_themes中配置置了themea皮肤和themeb皮肤，我们就可以动态修改皮肤了：

 

codetheme.aspx
 1<%@ Page Language="VB" %>
 2
 3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 4
 5<script runat="server">
 6
 7    
 8
 9 Protected Sub Page_PreInit()
10
11 
12
13    Page.Theme = Server.HtmlEncode(Request.QueryString("Theme"))
14
15 End Sub
16
17 
18
19</script>
20
21<html xmlns="http://www.w3.org/1999/xhtml">
22
23<head id="Head1" runat="server">
24
25 <title>测试</title>
26
27</head>
28
29<body>
30
31 <form id="form1" runat="server">
32
33    <div>
34
35      <h2>使用代码设置皮肤</h2> 
36
37      <a href="CodeTheme.aspx?Theme=ThemeA">Theme A</a> 
38
39      <a href="CodeTheme.aspx?Theme=ThemeB">Theme B</a>
40
41    </div>
42
43 </form>
44
45</body>
46
47</html>
48
49

 

需要注意的是theme必须在page被请求的最早期就应用上，所以必须在Page_PreInit事件中设置皮肤，不能在page_load事件中设置。

 

三、为应用程序指定和禁用主题

每个应用程序中都包括多个页面，并且为了保证和谐统一的用户界面，我们可以让所有页面使用同一主题。如果为在每个页头都设置相同的Theme属性值，那么非常麻烦。为了快速地为整个应用程序的所有页面设置相同的主题，可以设置Web.config文件的<pages>配置节内容。

web.config
1<configuration>
2  <system.web>
3    <pages Theme="mytheme" />
4  </system.web>
5</configuration>
6

如果某个页面不想使用web.config中设置的主题，我就可以禁用页面主题，实现方法如下：
 

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" EnableTheming="false"%>

 ASP.NET 2.0主题皮肤（theme skin）的使用