在該章節(jié)中我們將向讀者展示Asp.net 2.0的另一個重要的特性——Themes（主題）。我們的示例代碼任然采用的是Visual Studio 2005中提供的“個人網(wǎng)站初學(xué)者工具包”。如果讀者不知道如何創(chuàng)建請參閱前面一節(jié)《Master Page銳利體驗》。

2． Themes（主題）

2.1 ASP.NET 2.0Themes 基本概念

用過論壇的朋友，都知道可以通過選擇論壇的主題來改變論壇的外觀界面，來達到不同的用戶來定制自己喜歡的外觀。而在之前Asp.net的版本中，或者之前的Asp等其他的Web編程語言中來實現(xiàn)這個功能需要寫太多的代碼。在Asp.net 2.0中，只需要簡單的幾句代碼或者說幾個屬性的設(shè)置就可以達到這種效果，這就是ASP.NET 2.0 Themes特性！

Themes文件放在asp.net 站點下的App_Themes 目錄下面，與你的程序代碼是分開，所以不用擔(dān)心程序員和美工之間花太多的時間溝通。這也是.net的Code behind的精神吧！

我們可以看到在Microsoft的示例代碼中的App_Themes文件夾下面，有兩個themes一個是White、一個是Black。在這個兩個Themes下面還有我們熟悉.CSS和.Skin文件。.Skin文件就是.net 2.0中新增加的一個定義控件樣式的文件。

讀者可以這樣來理解：.CSS是定義html控件樣式，而.Skin是定義服務(wù)器端的控件樣式。

我們下面來看如何定義White下面的Default.Skin文件。

1〈asp:imagebuttonrunat="server"Imageurl="  
Images/button-login.gif"skinid="login"/〉  
2  
3〈asp:imagerunat="server"Imageurl="  
Images/button-create.gif"skinid="create"/〉  
4〈asp:imagerunat="server"ImageUrl="  
Images/button-download.gif"skinid="download"/〉  
5〈asp:imagerunat="Server"ImageUrl="  
images/button-dwn_res.gif"skinid="dwn_res"/〉  
6  
7〈asp:imagerunat="Server"ImageUrl="  
images/button-gallery.jpg"skinid="gallery"/〉  
8〈asp:imagebuttonrunat="server"imageurl="  
Images/button-tog8.jpg"skinid="tog8"/〉  
9〈asp:imagebuttonrunat="server"imageurl="  
Images/button-tog24.jpg"skinid="tog24"/〉  
10  
11〈asp:ImageButtonrunat="server"ImageUrl="  
Images/button-first.jpg"skinid="first"/〉  
12〈asp:ImageButtonrunat="server"ImageUrl="  
images/button-prev.jpg"skinid="prev"/〉  
13〈asp:ImageButtonrunat="server"ImageUrl="  
images/button-next.jpg"skinid="next"/〉  
14〈asp:ImageButtonrunat="server"ImageUrl="  
Images/button-last.jpg"skinid="last"/〉  
15  
16〈asp:imagerunat="Server"ImageUrl="  
images/album-l1.gif"skinid="b01"/〉  
17〈asp:imagerunat="Server"ImageUrl="  
images/album-mtl.gif"skinid="b02"/〉  
18〈asp:imagerunat="Server"ImageUrl="  
images/album-mtr.gif"skinid="b03"/〉  
19〈asp:imagerunat="Server"ImageUrl="  
images/album-r1.gif"skinid="b04"/〉  
20〈asp:imagerunat="Server"ImageUrl="  
images/album-l2.gif"skinid="b05"/〉  
21〈asp:imagerunat="Server"ImageUrl="  
images/album-r2.gif"skinid="b06"/〉  
22〈asp:imagerunat="Server"ImageUrl="  
images/album-l3.gif"skinid="b07"/〉  
23〈asp:imagerunat="Server"ImageUrl="  
images/album-r3.gif"skinid="b08"/〉  
24〈asp:imagerunat="Server"ImageUrl="  
images/album-l4.gif"skinid="b09"/〉  
25〈asp:imagerunat="Server"ImageUrl="  
images/album-mbl.gif"skinid="b10"/〉  
26〈asp:imagerunat="Server"ImageUrl="  
images/album-mbr.gif"skinid="b11"/〉  
27〈asp:imagerunat="Server"ImageUrl="  
images/album-r4.gif"skinid="b12"/〉  
28  
29  
30〈asp:ImageButtonRunat="server"ImageUrl="  
images/button-add.gif"skinid="add"/〉  
31  
32〈asp:gridviewrunat="server"backcolor="#606060"〉  
33〈AlternatingRowStylebackcolor="#656565"/〉  
34〈/asp:gridview〉  
35〈asp:imagerunat="Server"ImageUrl="  
Images/button-edit.gif"skinid="edit"/〉  
36〈asp:ImageButtonRunat="server"ImageUrl="  
Images/button-rename.gif"SkinID="rename"/〉  
37〈asp:ImageButtonRunat="server"ImageUrl="  
Images/button-delete.gif"SkinID="delete"/〉  
38〈asp:ImageButtonRunat="server"ImageUrl="  
Images/button-save.gif"SkinID="save"/〉  
39〈asp:ImageButtonRunat="server"ImageUrl="  
Images/button-cancel.gif"SkinID="cancel"/〉 

在上面的代碼中的屬性和控件的屬性意思相同，我們就不一一介紹了。在這里要提到的是“SkinID”。讀者希望應(yīng)用哪個Skin的話，只需要設(shè)置控件的SkinID與.Skin文件中的SkinID的名字相同即可。

#p#

2.2 如何創(chuàng)建ASP.NET 2.0 Themes中的.Skin文件

讀者自己創(chuàng)建master page 時，只需要點Project ，右鍵選擇“添加新項”，選擇外觀文件，就可以添加一個.Skin文件了。如果在你的程序文件中沒有App_Themes文件，當(dāng)讀者添加該文件的時候，系統(tǒng)自動會增加這個目錄，并且把新增的文件放在該目錄下。

創(chuàng)建.Skin文件

2.3 使用Themes

如何使用Themes 是讀者最關(guān)心的問題。下面我們來介紹如何在程序中應(yīng)用你已經(jīng)創(chuàng)建好了的Themes。在前臺有兩種方式來應(yīng)用Themes。

1、即在Page或者Master指令中通過Themes屬性來設(shè)置讀者需要應(yīng)用的Themes的名稱（其實通過設(shè)置StyleSheetTheme屬性也是可以達到效果的，它們之間的差異我們在后面再講）。

2、通過在設(shè)置Web.Config中的配置也可以達到效果的。（示例代碼是采用該種方式）

它們的生成順序是：

1、Web.config中的設(shè)置

2、指令中的設(shè)置（將覆蓋Web.config中的設(shè)置）

我們先看如何在Page或者Master指令中設(shè)置，其實很簡單：

〈%@ Page Language="C#" MasterPageFile=  
"~/Default.master" Title="此處是您的姓名 | 主頁" 
 
CodeFile="Default.aspx.cs"   
Inherits="Default_aspx"   Theme="Black"%〉  

該頁面就會應(yīng)用Black下面的設(shè)置了。

〈pages Theme="black"/〉  

上面為在Web.config中設(shè)置Themes。但是該句必須放在配置節(jié)中。 但是，我們在使用的時候發(fā)現(xiàn)沒有辦法修改控件的樣式了。這是怎么會事呢？要如何設(shè)置才能達到，既能應(yīng)用Themes又能有一些訂制呢？這就是我們前面說到的,使用StyleSheetTheme來設(shè)置Themes的話，讀者就可以，自己訂制一些自己的需要的樣式了。

前面我們講到的都是在配置層面如何應(yīng)用Themes。在代碼層面其實也很簡單：

1this.Page.Theme = "";  
2this.Page.StyleSheetTheme = "";  

我們來看一下控件應(yīng)用style屬性的順序：

1、StyleSheetTheme引用的樣式

2、代碼設(shè)定的控件屬性(將覆蓋StyleSheetTheme)

3、Theme引用的樣式(將覆蓋前面2個)

我們可以看到應(yīng)用Themes是如此的容易，而且程序員與美工之間不需要復(fù)雜的溝通了。下面是我們的示例代碼使用White和Black產(chǎn)生的不同的效果圖：

使用White的效果

使用Black的效果

很簡單的修改了Thems的配置，我們仿佛得到了兩個不同的站點。

2.4 結(jié)束語

上面我們?yōu)樽x者展示了如何使用.net 2.0中的一個重要的新特性：Themes。讀者可以很容易的就得到論壇或者blog的效果了。

【編輯推薦】

1. ASP.NET環(huán)境下的Shell函數(shù)
2. 在ASP.NET中向數(shù)據(jù)庫批量插入數(shù)據(jù)
3. ASP.NET用Post方式向網(wǎng)頁發(fā)送數(shù)據(jù)
4. ASP.NET 2.0部署WEB應(yīng)用程序淺析
5. ASP.NET中的HttpWorkerRequest對像
6. 介紹ASP.NET MVC框架