上一篇對Blend 3開發(fā)界面進行了快速入門介紹，本篇將基于Blend 3介紹Silverlight控件。對于微軟開發(fā)工具熟悉的朋友，相信您很快就熟悉Blend的開發(fā)界面和控件。

XAML概述

Silverlight的控件繪制是由XAML語言進行支持的。什么是XAML語言？

簡單的說，XAML（Extensible Application Markup Language ）是一款基于XML的描述性語言，中文也叫做可擴展應(yīng)用程序標記語言。 該語言是由微軟開發(fā)創(chuàng)建，主要用于構(gòu)建WPF和Silverlight應(yīng)用程序用戶界面。XAML是Silverlight用戶界面設(shè)計的基礎(chǔ)，使用XAML可以定義Silverlight對象以及屬性，相對于后臺語言定義控件來說，XAML提供了非常簡潔的方式聲明控件，有時僅需一句代碼就可以完成一個控件的構(gòu)造。不僅如此，XAML還提供了一種便于擴展和定位的語法來定義和程序邏輯分離的用戶界面，而這種實現(xiàn)方式和ASP.NET中的"代碼后置"模型非常類似。這樣有效的分離了設(shè)計人員和開發(fā)人員，在同一個項目中，對其進行分工前臺程序界面設(shè)計和后臺邏輯設(shè)計，使項目到達協(xié)作開發(fā)的目的。所以說，XAML是Silverlight用戶界面設(shè)計的基礎(chǔ)，作為Silverlight設(shè)計人員，應(yīng)該對XAML語言熟練掌握，由于本系列是介紹Blend，這里對XAML語言不再進行細述，如果需要系統(tǒng)化學(xué)習(xí)XAML語言，請訪問本文后提供的參考學(xué)習(xí)資源。

對于XAML了一定的認識，下面進入本文正題，Silverlight控件入門。對于Silverlight控件，微軟進行了簡單分類，

第一類： Layout Controls（布局控件)

第二類： Item Controls （項目控件)

第三類： User Interaction Controls（用戶交互控件)

在隨后的幾篇中我將介紹這些控件，首先我將介紹

布局控件，從名字上可以看出是控制用戶界面總體格式的一類控件。通過這類控件，可以很輕松的對用戶界面進行編排，在這類控件中，也可以放置其他的項目控件和用戶交互控件，達到控制其位置的目的。如果您有HTML的設(shè)計經(jīng)驗，也可以簡單的把布局控件理解為HTML中的Table標簽。在任何一個Silverlight或者WPF項目中，都離不開布局控件，這里我將細述布局控件。

在Silverlight標準控件中，包括以下四種布局控件：

Grid控件

Canvas控件 

StackPanel控件

Border控件

由于該控件在Silverlight和WPF項目開發(fā)中占有非常重要地位，所以，我將詳細介紹Grid控件的使用和常用屬性：

Grid控件

Grid控件可以認為是Silverlight項目設(shè)計中，使用的最多的布局控件，在使用Blend或者Visual Studio 2008 SP1創(chuàng)建Silverlight項目的時候，默認控件代碼中就包含了Grid.

在我個人使用的經(jīng)驗中理解，Grid控件和HTML的Table是最近似的。設(shè)計人員可以根據(jù)需要，自定義設(shè)置行數(shù)和列數(shù)，放置不同的內(nèi)容和控件到每行每列中。Blend對Grid的設(shè)計支持非常的直接和簡單。這里我還是用上一篇創(chuàng)建的例程項目，SilverlightBlendDemo，如果你沒有該項目，可以在本文后面下載，或者按照上一篇介紹方法創(chuàng)建。

在Blend中創(chuàng)建行和列，只需要將鼠標放在界面窗口上深藍色帶上，就可以看到黃色的分割線，鼠標點擊后，行和列即可產(chǎn)生。

按照上面說的方法，我將創(chuàng)建一個2行2列的效果如下：

創(chuàng)建完成后，會以藍色現(xiàn)條顯示在設(shè)計界面，而XAML代碼則會自動生成，

這樣看來Grid設(shè)計相當簡單，在布局設(shè)計過程中，為了方便那些沒有設(shè)計經(jīng)驗的開發(fā)人員，Blend提供了兩個布局設(shè)計模式：

- Canvas界面設(shè)計模式，該設(shè)計模式是默認設(shè)計模式，

- Grid界面設(shè)計模式

點擊該按鈕，會自動切換界面設(shè)計模式

在上圖中可以看到，在Grid Layout Mode下，每行和每列前都會顯示一個“鎖”狀圖標，默認是非鎖定狀態(tài)，點擊后，會鎖定該行或者列，從代碼中可以看出明顯變化。

當我點擊鎖定一列，代碼將變化為：

這里可以看到ColumnDefinition的寬度變成了固定數(shù)字，后面不再有“*”號，這樣也就表明，該列不再根據(jù)內(nèi)容的改變而改變，一直以固定寬度顯示。相反，如果在數(shù)值后，有“*”號，該行或者列寬度將會跟著內(nèi)容的改變而改變。

再次點擊鎖定的列，會顯示自動獲取寬度狀態(tài)圖標：

代碼則自動改變?yōu)?SPAN style="COLOR: #ff0000">Width="Auto"：

根據(jù)上文所述，Grid如同HTML中的Table，也就是說我們可以按照使用Table的方法，設(shè)置Grid的內(nèi)容。

例如，我想放置四個TextBlock控件在Grid中，首先點擊左邊工具欄菜單

然后在設(shè)計界面進行簡單的繪制，創(chuàng)建四個TextBlock控件：

選中任一個TextBlock控件，在右邊“properties”屬性欄則會顯示出該控件的所有屬性，這里我們將關(guān)注Layout欄屬性

這里我們可以看出，Blend已經(jīng)自動將控件繪制到相對應(yīng)的列和行中。通過該屬性設(shè)置，可以輕松的控制控件在Grid中的位置。這里我們看一下后臺代碼：

在以上代碼中可以看到，Blend省略了一些布局代碼，如果在布局控件中，如果控件不填寫Grid.Column,Grid.Row,則默認值為0.所以說，第一個TextBlock的位置被默認為：

<TextBlock Margin="46,71,73,90" Text="第0行，第0列" Grid.Row="0" Grid.Column="0" TextWrapping="Wrap" FontSize="18.667"/>

第二個Textblock位置則為：

<TextBlock Margin="40,71,57,90"  Grid.Row="0" Grid.Column="1" Text="第0行，第1列" TextWrapping="Wrap" FontSize="18.667"/>
第三個TextBlock位置則為：

<TextBlock Margin="46,73,73,110" Grid.Row="1" Grid.Column="0" Text="第1行，第0列" TextWrapping="Wrap" FontSize="18.667"/>

第四個TextBlock位置代碼不變，是完整的。

也就是說，從Xaml代碼部分，我們可以通過Grid.Column,Grid.Row兩個屬性控制控件的位置。

對于Grid的布局，上面的方法是最通用而且最簡單的。 但是在項目中，我們還會使用一些常見屬性，配合Grid控制布局，例如Margin，Horizontal Alignment，Vertical Alignment以及Group方法等。

熟悉CSS的設(shè)計人員，應(yīng)該知道Margin的作用，主要是控制控件內(nèi)部對應(yīng)布局控件的邊距的。該屬性的賦值方法在CSS中有詳解，這里不再贅述，簡單的賦值，Margin = "0,1,2,3",表示：

對布局控件左邊的距離為0

對布局控件的頂端距離為1

對布局控件的右邊距離為2

對布局控件的下端距離為3

其中0，1，2，3是隨意設(shè)置的數(shù)值，這樣就控制了控件在布局控件中的具體位置。

對于Horizontal Alignment，Vertical Alignment屬性，也是CSS中出現(xiàn)過的屬性，簡單的說是對齊屬性，水平對齊和垂直對齊。

這兩個屬性默認有四個值：

左邊/頂端對齊

中間對齊

右邊/下端對齊

拉伸

在上例的代碼中，我們可以看到Margin屬性都在改變，相對Grid對應(yīng)行和列的位置都有不同，你可以嘗試修改一下，相關(guān)數(shù)值，查看其位置更改情況。

<TextBlock Margin="46,71,73,90" Text="第0行，第0列" Grid.Row="0" Grid.Column="0" TextWrapping="Wrap" FontSize="18.667"/>

<TextBlock Margin="40,71,57,90"  Grid.Row="0" Grid.Column="1" Text="第0行，第1列" TextWrapping="Wrap" FontSize="18.667"/>

<TextBlock Margin="46,73,73,110" Grid.Row="1" Grid.Column="0" Text="第1行，第0列" TextWrapping="Wrap" FontSize="18.667"/>

<TextBlock Margin="40,73,79,110" Grid.Column="1" Grid.Row="1" Text="第1行，第1列" TextWrapping="Wrap" FontSize="18.667"/>

在Blend中控制Margin，是點擊以下圖標，然后在Properties屬性欄目中可以修改Margin數(shù)值。

在屬性欄可以修改其數(shù)值：

而對于Horizontal Alignment，Vertical Alignment屬性，同樣可以通過屬性欄進行修改，

修改后，在Xaml代碼中也會自動更新修改：

<TextBlock Margin="40,73,79,110" Grid.Column="1" Grid.Row="1" Text="第1行，第1列" TextWrapping="Wrap" FontSize="18.667" HorizontalAlignment="Left"/>

在開發(fā)過程中，經(jīng)常會面對不同分辨率的情況下，項目布局應(yīng)該隨之改變，自適應(yīng)客戶端的終端。Grid控件支持，設(shè)置“Auto”自動屬性，該Grid將隨著內(nèi)部控件內(nèi)容的增加而改變，這樣有利于動態(tài)適應(yīng)控件尺寸。說到這里，有些人可能對布局控件的尺寸設(shè)計有一些困惑，這里我詳細描述一下，Grid的尺寸設(shè)置策略。默認情況下，Grid支持三種尺寸設(shè)置策略，

第一種，絕對數(shù)值尺寸設(shè)置；

該設(shè)置是最簡單的，但是是最不靈活的。例如上面例程代碼中，可以直接設(shè)置列寬度為絕對數(shù)值：

         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="100"/>
             <ColumnDefinition Width="50"/>
         </Grid.ColumnDefinitions>

第二種，自動數(shù)值尺寸設(shè)置；

該設(shè)置對寬度和高度賦值“Auto”，該Grid尺寸將會隨著內(nèi)部內(nèi)容的增加而增加，這個設(shè)置方法是最常用的一種；

         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="Auto"/>
         </Grid.ColumnDefinitions>

第三種，比例數(shù)值尺寸設(shè)置；

該設(shè)置對寬度和高度賦值"*"，或者"2*",Grid將按照設(shè)置的比例倍數(shù)進行分割布局；

         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="*"/>
             <ColumnDefinition Width="3*"/>
         </Grid.ColumnDefinitions>

以上設(shè)置，將把Grid劃分為兩列，第二列寬度永遠是第一列寬度的3倍。第一列永遠是第二列的1/3寬度。

在實際項目中，如果需要復(fù)雜的項目布局，可以將以上三種尺寸設(shè)置方法綜合應(yīng)用，達到最靈活的應(yīng)用效果。

另外需要留意的是Grid支持無限的嵌入，也就是可以嵌套無限個布局控件，這樣也提供了非常靈活的布局方式，在Grid中嵌套不同控件。Silverlight和WPF項目設(shè)計中，可以使用Group功能，將控件嵌套在同一個布局下，方便開發(fā)中控件的布局控制。

以上對Grid的描述，是Grid控件在開發(fā)中常用的功能和屬性，如果想要靈活運用，還需要更多的實踐，大家可以按照本文介紹的步驟和方法，多練習(xí)幾次，就能熟練掌握Grid布局控件。