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

每個ASP.NET行動控制項都提供了若干樣式屬性，使用這些屬性可以自訂控制項的呈現方式。當然你也可以使用StyleSheet控制項來定義樣式資訊，然後在同一個頁面的不同控制項上應用StyleSheet控制項定義的樣式資訊。我們在前面已經提及到你不但可以將樣式應用到不同的控制項上，還可以應用到容器控制項上，這樣就保證了所以在容器控制項中的行動控制項都具有一致性的使用者體驗。

StyleSheet控制項應該放置在頁面中，而不是容器控制項中。事實上，這是惟一一個可以放置在容器控制項外面的WEB行動控制項。對於所有的頁面和行動控制項來說，我們可以只定義一個StyleSheet控制項。在你添加完一個StyleSheet控制項後，可以通過開啟樣式編輯器來定義相應的樣式屬性。

為了在一個移動WEB頁面上建立、自訂和應用一個StyleSheet控制項，我們可以按照如下的步驟進行設定：

1、拖拽一個StyleSheet控制項到移動WEB頁面上。

2、右鍵點擊StyleSheet控制項，在彈出的菜單中選擇“模組化選項”命令。這時會出現一個“模組化選項”對話方塊，如所示。該對話方塊允許你建立和編輯多個樣式和裝置篩選條件，裝置篩選條件將以後的小節中詳細介紹。

3、單擊“編輯”按鈕，將會開啟一個“樣式編輯器”視窗，如所示。利用該視窗使得開發人員可以根據實際的需求建立多個樣式。

4、根據所要建立的樣式類型，選擇左側列表欄中對應的“樣式類型”的某個選項，然後單擊“>”按鈕。這將建立一個從“樣式類型”列表中所選類型的樣式執行個體，並將其添加到右側的“定義的樣式”列表中。在當前的樣式列表中有兩個不同的樣式類型：

（1）Pager Style type：該樣式包含Style樣式的屬性以及可應用於分頁控制項的屬性。這對一個移動WEB頁面上包含多個行動控制項的情形是非常有用的，因為行動裝置可能無法在同一屏顯示所有的行動控制項，所以需要分頁進行顯示。採用這種樣式類型，ASP.NET會自動在上述情況下建立分頁。

（2）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行動控制項用自身的樣式替代表單的樣式）。