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

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

在Silverlight標(biāo)準(zhǔn)控件中，包括以下四種布局控件：

Grid控件

Canvas控件

StackPanel控件

Border控件

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

Grid控件

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

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

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

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

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

這樣看來(lái)Grid設(shè)計(jì)相當(dāng)簡(jiǎn)單，在布局設(shè)計(jì)過(guò)程中，為了方便那些沒(méi)有設(shè)計(jì)經(jīng)驗(yàn)的開(kāi)發(fā)人員，Blend提供了兩個(gè)布局設(shè)計(jì)模式：

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

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

點(diǎn)擊該按鈕，會(huì)自動(dòng)切換界面設(shè)計(jì)模式

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

當(dāng)我點(diǎn)擊鎖定一列，代碼將變化為：

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

再次點(diǎn)擊鎖定的列，會(huì)顯示自動(dòng)獲取寬度狀態(tài)圖標(biāo)：

代碼則自動(dòng)改變?yōu)? Width ="Auto" ：

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

例如，我想放置四個(gè)TextBlock控件在Grid中，首先點(diǎn)擊左邊工具欄菜單

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

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

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

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

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

第二個(gè)Textblock位置則為：

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

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

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

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

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

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

對(duì)布局控件左邊的距離為0

對(duì)布局控件的頂端距離為1

對(duì)布局控件的右邊距離為2

對(duì)布局控件的下端距離為3

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

對(duì)于Horizontal Alignment，Vertical Alignment屬性，也是CSS中出現(xiàn)過(guò)的屬性，簡(jiǎn)單的說(shuō)是對(duì)齊屬性，水平對(duì)齊和垂直對(duì)齊。

這兩個(gè)屬性默認(rèn)有四個(gè)值：

左邊/頂端對(duì)齊

中間對(duì)齊

右邊/下端對(duì)齊

拉伸

在上例的代碼中，我們可以看到Margin屬性都在改變，相對(duì)Grid對(duì)應(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，是點(diǎn)擊以下圖標(biāo)，然后在Properties屬性欄目中可以修改Margin數(shù)值。

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

而對(duì)于Horizontal Alignment，Vertical Alignment屬性，同樣可以通過(guò)屬性欄進(jìn)行修改，

修改后，在Xaml代碼中也會(huì)自動(dòng)更新修改：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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