ASP.NET 2.0移動開發樣式使用

每個ASP.NET移動控件都提供了若干樣式屬性,使用這些屬性可以自定義控件的呈現方式。當然你也可以使用StyleSheet控件來定義樣式信息,然後在同一個頁面的不同控件上應用StyleSheet控件定義的樣式信息.我們在前面已經提及到你不但可以將樣式應用到不同的控件上,還可以應用到容器控件上,這樣就保證了所以在容器控件中的移動控件都具有一致性的用戶體驗。     StyleSheet控件應該放置在頁面中,而不是容器控件中.事實上,這是惟一一個可以放置在容器控件外面的WEB移動控件.對於所有的頁面和移動控件來說,我們可以只定義一個StyleSheet控件.在你添加完一個StyleSheet控件後,可以通過打開樣式編輯器來定義相應的樣式屬性.   爲了在一個移動WEB頁面上創建、自定義和應用一個StyleSheet控件,我們可以按照如下的步驟進行設置:   1. 拖拽一個StyleSheet控件到移動WEB頁面上。   2. 右鍵點擊StyleSheet控件,在彈出的菜單中選擇"模塊化選項"命令。這時會出現一個"模塊化選項"對話框,如下圖所示。該對話框允許你創建和編輯多個樣式和設備篩選器。

  3. 單擊"編輯"按鈕,將會打開一個"樣式編輯器"窗口,如下圖所示。利用該窗口使得開發人員可以根據實際的需求創建多個樣式。

點擊放大此圖片

  4. 根據所要創建的樣式類型,選擇左側列表欄中對應的"樣式類型"的某個選項,然後單擊">"按鈕。這將創建一個從"樣式類型"列表中所選類型的樣式實例,並將其添加到右側的"定義的樣式"列表中。在當前的樣式列表中有兩個不同的樣式類型:   ⑴ Pager Style type: 該樣式包含Style樣式的屬性以及可應用於分頁控件的屬性。這對一個移動WEB頁面上包含多個移動控件的情形是非常有用的,因爲移動設備可能無法在同一屏顯示所有的移動控件,所以需要分頁進行顯示。採用這種樣式類型,ASP.NET會自動在上述情況下創建分頁。   ⑵ Style: 該樣式包含移動控件常用的外觀屬性。   5. 在"定義的樣式"列表欄中右鍵點選已經定義好的的樣式實例,這時會彈出一個"重命名"菜單,你可以爲該樣式命名一個有意義的名稱。本例中設置了兩個樣式,分別爲Pager Style類型的"GrayBackground"樣式和Style類型的"RedBackground"樣式。   6. 當所有的樣式都定義好後,單擊"確定"按鈕就完成了整個的定義過程。   從上圖你可以看出這裏的樣式屬性遠比傳統的ASP.NET程序的樣式屬性要少很多,這主要是受到移動設備的硬件限制,尤其是一些只支持WML的設備。儘管如此,在ASP.NET移動WEB程序中還是保留一些常用的樣式屬性。例如你可以設置背景顏色、字體顏色、字體大小和字體類型等屬性。雖然存在一些缺憾,但是我們可以在移動WEB頁面上方便地使用StyleSheet控件,使程序具有一致性的用戶體驗。   當你定義完樣式後,我們就可以將這些樣式應用到具體的移動控件上了。這個過程是非常容易的,你只需點選該移動控件對應屬性窗體上的StyleReference屬性,然後在下拉列表中選擇合適的樣式即可。如下圖所示,我們將GrayBackground樣式應用到整個WEB Form控件上,而將RedBackground樣式應用到Label控件上。這就是爲什麼所有在Form控件內的移動控件的背景顏色都是灰色,唯獨Label控件的背景顏色爲紅色的原因 (Label移動控件用自身的樣式替代窗體的樣式),最後的顯示效果如下:
點擊放大此圖片
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章