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

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

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

Grid控件

Canvas控件

StackPanel控件

Border控件

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

Grid控件

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

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

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

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

創建完成后，會以藍色現條顯示在設計界面，而XAML代碼則會自動生成，

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

-Canvas界面設計模式，該設計模式是默認設計模式，

-Grid界面設計模式

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

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

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

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

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

代碼則自動改變為 Width ="Auto" ：

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

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

然后在設計界面進行簡單的繪制，創建四個TextBlock控件：

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

這里我們可以看出，Blend已經自動將控件繪制到相對應的列和行中。通過該屬性設置，可以輕松的控制控件在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的設計人員，應該知道Margin的作用，主要是控制控件內部對應布局控件的邊距的。該屬性的賦值方法在CSS中有詳解，這里不再贅述，簡單的賦值，Margin = "0,1,2,3",表示：

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

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

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

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

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

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

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

左邊/頂端對齊

中間對齊

右邊/下端對齊

拉伸

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

< 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數值。

在屬性欄可以修改其數值：

而對于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" />

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

第一種，絕對數值尺寸設置；

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

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

第二種，自動數值尺寸設置；

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

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

第三種，比例數值尺寸設置；

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

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

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

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

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

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

Expression Blend實例中文教程(3) - 布局控件快速入門Grid