ASP.NET皮膚的用法...

看了一下visual web developer 中自帶的個人站點,發現aspnet2.0裏面的很多技術使用起來確實很優雅,比較典型的有 login控件和用戶系統、MasterPage、主題和皮膚、SiteMap等等。這些特性,甚至不需要教程就可以很快上手。本文要介紹的是主題和皮膚的應用。 

(一)  如何使用  

1)  在你的應用裏面添加 App_Themes 文件夾

2)  將主題相關的文件(包括.css,.skin文件、其他資源文件包括圖片、Flash等)組織到一個以主題名命名的文件夾中,將主題文件夾放於App_Themes目錄。如果有多個主題,重複上述步驟。 

Example

Css 文件(x.css

Skin 文件(x.skin) 

.column {background-image: url(images/content-shim.gif);}

.gradient 
{ background-image: url(images/content-shim-photo.gif);}

.solid 
{background-image: url(images/content-shim-none.gif);}

.header 
{

     background-image
: url(Images/header.gif);

     background-repeat
: no-repeat;

     position
: relative;

     width
: 789px;

     height
: 76px;

     margin
: 0 auto 5px auto;

}
 

 

 <asp:imagebutton runat="server" Imageurl="Images/button-login.gif" skinid="login" />

<asp:image runat="server" Imageurl="Images/button-create.gif" skinid="create" />

<asp:image runat="server" ImageUrl="Images/button-download.gif" skinid="download"/>

 

        理論上上來說,不同的主題中的樣式表和SKIN文件的結構都應該是完全相同的。

 

3)  設置你要應用主題的控件的css樣式名爲css中定義的樣式名(比如columngradient

設置你要應用主題的服務器控件的SkinIdSkin文件中定義的skinid(比如logincreate等),這樣在Skin中定義的控件屬性會自動附加到當前的控件上(內部也是使用CSS實現的)

 

4)  應用主題,有三種辦法      

       全局主題:在Web.config<system.web>中添加<pages StyleSheetTheme ="ThemeName"/>節,這樣在整個應用中都會自動應用名爲ThemeName 的主題 

       頁面主題:在ASPX文件頂部加入:<%@ Page Language="C#" StylesheetTheme=" ThemeName " %>,這樣當前頁面都會應用名爲ThemeName 的主題,或者在ASPX_CS中加(Page_Load方法)入如下代碼 Page. StyleSheetTheme = “ThemeName”;  

       角色主題:需要使用masterpage 來輔助實現 ,通過User.IsInRole(“RoleName”) 來判斷用戶是否屬於某個角色,然後決定使用何種主題(Page. StyleSheetTheme = “ThemeName”);當然,使用這種辦法還可以應用用戶選擇的主題 

       如果你仍然感覺迷惑,請查看 Quick Start

 

(二)  工作原理

    不同的主題和皮膚之間的不同主要是頁面和頁面中的控件的樣式(包括字體、段落、背景、邊框等等)、部分圖片的不同。

    傳統的完全使用CSS來表現不同的主題的方案,在處理圖片和圖片按鈕的地方往往心有餘而力不足。而在aspnet2.0裏面一切都已經變得簡單。

    主題和皮膚是 dotnet framework2.0內建支持的,服務器控件添加了SkinId屬性,Page類也添加了Theme StyleSheetTheme 屬性,其目的就是優雅的支持Skin。在應用指定了主題之後,相關的頁面會自動鏈接位於主題目錄下的css文件和skin文件,css的用法跟傳統的用法沒有什麼區別,而skin文件則以一種類似於css的方式工作,指定了SkinId的服務器控件會自動從skin文件中加載並附加匹配的屬性或樣式(最常用的是Image ImageButtonImageUrl屬性,這樣做可以使頁面在不同的主題下)---這是在服務器端完成的。由於skin文件在使用後是緩存在內存中的,所以效率不會有問題。

 

(三)  Theme StylesheetTheme 的區別

    基本上,本文前面所有的 StyleSheetTheme 都可以替換爲 Theme ,我猜想區別是使用 Theme 時位於主題文件夾中的 樣式表(CSS)文件不會被應用到主題中,但是根據我的測試,發現兩種情況下生成的頁面中,只有<link href=’’>這一節的位置不同,一個出現在<Title>標記前面,一個則是後面。 

(四)  優雅之處

a)         完全Framework內建的支持、不再需要複雜的編程,甚至不再需要編程;

b)        vs2005中有非常友好的設計時支持,也就是說,在設計的時候你就可以看到某種主題的效果;

c)        學習曲線很平緩,如果你熟悉CSS的話,則更加沒有難度。

發佈了114 篇原創文章 · 獲贊 2 · 訪問量 20萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章