版面配置概觀
Microsoft® Expression Blend™ 可讓您利用各種內建的版面配置面板或您所擁有的自訂面板，輕鬆地製作簡單和複雜的版面配置。版面配置面板這類元素可以控制所含元素的位置、大小、尺寸及排列方式。版面配置面板基本上可以當成容器使用。版面配置面板最大的好處是只需將元素放入其中即可使用。
版面配置面板會視隱含實作情況而調整，也就是說整個版面配置的大小會自動調整，或是隨視窗大小自動進行調整。這種方式在許多情況下很有用，包括建立可因應各種螢幕大小和解析度的使用者介面 (UI) 及滿足當地語系化需求。您也可以透過明確地實作版面配置面板而選擇使用固定大小，這表示版面配置會具有固定的 Width 和 Height 屬性，讓版面配置中的區域，即使是在調整應用程式視窗大小時，也可以維持指定的大小。
您也可以轉換版面配置面板內的元素，以設定版面配置後的呈現位置。這對於動畫方面很有用 (例如，將元素移至 [格線] 面板邊界外，再讓它快速移到適當的位置)。轉換是根據版面配置的相對位置執行，因此 [屬性] 面板中的 [轉換] 類別會將預設位置顯示為 (0,0)。在大部分的情況下，除非您要某元素根據最終版面配置相對位置移動的動畫，就不會想要對版面配置面板內的元素套用轉換。
版面配置面板
Expression Blend 中主要有五個版面配置面板，分別設計用來管理不同類型的版面配置。下表說明這些版面配置面板。
| 面板 | 描述 | |
|---|---|---|
 |
畫布 | 根據絕對的 X 座標與 Y 座標來排列子元素。畫布可讓您在執行階段時對畫面上的元素進行定位，就像空白的「畫布」一樣。如需「畫布」的詳細資訊，請參閱畫布面板。 |
 |
固定 | 排列子元素，使其停留或「固定」在面板的某個邊緣。如需「固定」的詳細資訊，請參閱固定面板。 |
 |
格線 | 在欄和列組成的極具彈性的版面配置 (也就是「格線」) 中，排列子元素。如需「格線」的詳細資訊，請參閱格線面板。 |
 |
堆疊 | 將子元素沿著一條直向或橫向線條排列 (或「堆疊」)。如需「堆疊」的詳細資訊，請參閱堆疊面板。 |
 |
換行 | 由左至右依序排列子元素，到面板最右邊空間不夠時，將內容「換行」到下一行，依此由左至右，由上而下換行。換行面板的方向也可以是垂直的，因此子元素可由上而下、由左而右地排列。如需「換行」的詳細資訊，請參閱換行面板。 |
其他版面配置容器
還有其他版面配置元素會影響所含元素的排列方式，不過這些元素不能像主要版面配置面板一樣支援更強大的 UI 設計。下表說明其他版面配置容器。
| 元素 | 描述 | |
|---|---|---|
 |
Border | 一個可以在元素四周繪製「框線」及 (或) 背景的簡單元素。Border 只能有一個子元素。您可能想要在框線內放置格線或畫布面板，以便使用多個子元素。如需 Border 的詳細資訊，請參閱其他版面配置容器。 |
 |
BulletDecorator | 一種只接受兩個子元素的元素，這兩個子元素通常是文字字串和圖像 (代表核取方塊之類的控制項)。如需 BulletDecorator 的詳細資訊，請參閱其他版面配置容器。 |
 |
Popup | Popup 是呈現於應用程式中所有其他內容之上，但卻與另一個元素相關的視窗。您可以在使用者與快顯功能表所關聯的主要 UI 進行互動時，使用快顯功能表將其他資訊與選項提供給使用者。Popup 只能有一個子元素，而且會根據目標元素自行定位。根據預設，Popup 唯一的子元素為格線面板。繪製格線面板之後，立刻就可以在 Popup 中使用多個子元素。在大部分的情況下，您不必親自建立快顯，只需使用在範本中用到快顯的控制項，例如功能表或下拉式方塊。如需 Popup 的詳細資訊，請參閱其他版面配置容器。 |
 |
ScrollViewer | 讓您能夠捲動其中的子元素。由於它只能有一個子元素，因此在大部分的情況下，您會在其中放置版面配置面板，例如堆疊面板、畫布面板或格線面板。其他控制項 (例如清單方塊) 的範本內會使用 ScrollViewer 支援內容的捲動。當 ScrollViewer 的內容太大時，可以允許對此內容進行裁剪。您也可以控制要停用、隱藏、顯示或只在需要時自動顯示捲軸。如需 ScrollViewer 的詳細資訊，請參閱其他版面配置容器。 |
 |
UniformGrid | 在相等 (或「一致」) 大小的格線區域內排列子元素。UniformGrid 不是一種 [格線] 面板；更準確地說，應該是一種並排的版面配置元素，因為它會根據您指定的列數與欄數，在各元素間建立相等的間距。當您將子元素新增至 UniformGrid 時，會從區域的左上角開始填入元素，一直填入到右下角，直到 UniformGrid 填滿為止。這對於影像清單之類的控制項而言很實用。如需 UniformGrid 的詳細資訊，請參閱其他版面配置容器。 |
 |
Viewbox | 和縮放控制項一樣，可縮放所有子元素。因為檢視方塊只接受一個子元素，所以您通常會將畫布或格線面板放入其中，以便將縮放效果運用在多個子元素。如需 Viewbox 的詳細資訊，請參閱其他版面配置容器。 |
根版面配置容器
在 [互動] 面板的 [物件與時間軸] 下，您會看到一個標示為 LayoutRoot 的元素。此元素代表 Expression Blend 文件中的根版面配置面板。根據預設，版面配置的根元素為格線面板。在絕大多數情況下，將格線面板當成最上層的頁面版面配置應已足夠。不過，您還是可以用滑鼠右鍵按一下版面配置根元素，指向「變更版面配置類型」，然後選取不同的版面配置面板，將版面配置根元素變更為另一種版面配置面板。也可以選擇畫布面板取代格線面板做為預設 [LayoutRoot]，方法是清除 [選項] 對話方塊 (在 [工具] 功能表上) 的 [專案] 區段中之 [使用格線面板作為新項目的預設版面配置] 核取方塊。
圖層
圖層提供快速又簡單的方式來建立頁面層級版面配置容器以組織內容。在從其他應用程式 (如：Microsoft® Expression® Design) 匯入內容時，圖層特別有用。從 Expression Design 匯入的圖案在各個匯入的圖層使用畫布面板。
您可以使用 [工具] 功能表上的 [建立新圖層] 命令建立新的圖層。Expression Blend 會根據目前文件的 LayoutRoot 建立新圖層。
圖層的概念圖。
使用子元素
Expression Blend 會嘗試將子元素新增至文件內的根 (或最上層) 面板，但如果物件樹狀結構中另有一個「使用中」的版面配置容器，則子元素會新增至該容器中。您可以按兩下要成為焦點的面板或控制項，讓該元素變成使用中狀態。面板周圍的黃色反白顯示，表示該面板現在是使用中元素。黃色反白會同時顯示在畫板中與 [互動] 面板的 [物件與時間軸] 下。當您建立新圖層然後立即繪製子元素時，這些元素會被繪製到剛建立的面板，因此不需要將該面板設為使用中元素。
 |
物件檢視中 ([互動] 面板的 [物件與時間軸] 下) 的使用中元素。 |
 |
畫板上的使用中元素。 |
使用 Expression Blend，也可以輕易在面板間拖曳子元素，讓這些子元素重新隸屬於不同的版面配置容器中。下圖顯示從根版面配置格線面板，移至另一個格線面板的橘色橢圓形。
將物件的父項從根 [格線] 面板，重設為另一個 [格線] 面板。
複雜版面配置
當配置頁面的版面時，您需要的彈性往往會超過單一版面配置面板所能提供的彈性。建立複雜版面配置的其中一種方法，就是將某個版面配置面板當成其他版面配置面板的容器。例如，您可以在 LayoutRoot (預設為格線面板) 內使用固定面板，將頁面分成多個區域，每個區域各含有一或多個控制項。
如需版面配置的詳細程式設計資訊，請參閱 Windows 軟體開發套件 (SDK) 的＜.NET 程式開發＞(英文) 一節。