版面配置概觀

Microsoft Expression Blend 可讓您利用各種內建的版面配置面板或您所擁有的自訂面板，輕鬆地製作簡單和複雜的頁面版面配置。版面配置面板這類元素可以控制所含其他元素的位置、大小、尺寸及排列方式；基本上此面板的使用方式是作為容器使用；它還有一個很有用的用途，就是可將所包含的元素進行分組。

注意事項：
只有 Microsoft Silverlight 1.0 專案才能使用 [畫布] 版面配置面板。另外，只有 Silverlight 2 專案能夠使用 [格線]、[畫布]、[StackPanel]、[ScrollViewer] 和 [框線] 版面配置面板。

若您用不明確定義的方式實作版面配置面板，它可隨情況而自行調整。這表示整個版面配置的大小會自動調整，或是隨視窗大小自動進行調整。這種方式在許多情況下很有用，包括建立可因應各種螢幕大小和解析度的使用者介面 (UI) 及滿足當地語系化需求。您也可以透過明確地實作版面配置面板，而決定使用固定大小，這表示版面配置會具有固定的Width和Height屬性，讓版面配置中的區域，即使是在調整應用程式視窗大小時，也可以維持其指定的大小。

注意事項：
當您將物件的 Width 或 Height 屬性從固定值變更成 Auto 時，屬性會設為最小預設值。

您也可以轉換版面配置面板中的元素，以設定版面配置後的呈現位置。這對於動畫方面很有用 (例如，將元素移至 [格線] 面板邊界外，再讓它快速移到適當的位置)。轉換會根據版面配置位置的相對位置執行。因此，[屬性] 面板的 [轉換] 類別會將預設位置顯示為 (0,0)。在大部分的情況下，除了可讓某個元素根據最終版面配置相對位置移動的動畫之外，您不會想對版面配置面板中的元素套用轉換。

版面配置面板

Expression Blend 有五個主要的版面配置面板，分別用以管理不同類型的版面配置。下表說明這些版面配置面板。

面板	名稱	描述
	格線	在欄和列組成的極具彈性的版面配置 (也就是「格線」) 中，排列子元素。如需詳細資訊，請參閱格線面板。
	畫布	根據絕對的 X 座標與 Y 座標來排列子元素。[畫布] 可讓您在執行階段時對畫面上的元素進行定位，就像空白的「畫布」一樣。如需詳細資訊，請參閱畫布面板。
	堆疊	以將子元素沿著一條直向或橫向線條排列 (或「堆疊」)。如需詳細資訊，請參閱堆疊面板。
	換行	由左至右依序排列子元素，當面板最右側空間不夠時，將內容「換行」到下一行，依此由左至右，由上而下進行換行。換行面板的方向也可以是垂直的，因此子元素可由上而下、由左而右地排列。如需詳細資訊，請參閱換行面板。
	固定	排列子元素而使其停留或「固定」在面板的某個邊緣。如需詳細資訊，請參閱固定面板。

回到頁首

其他版面配置容器

其他版面配置容器也會影響其包含的元素排列方式。不過，這些容器並未進行最佳化，不能像主要版面配置面板一樣支援更強大的 UI 設計。下表說明其他版面配置容器。

元素	名稱	描述
	Border	一種可以在元素四周繪製框線及 (或) 背景的簡單元素。Border 只能有一個子元素。您可能想要在框線內放置格線或畫布面板，以便使用多個子元素。如需有關 Border 的詳細資訊，請參閱其他版面配置容器。
	BulletDecorator	一種只接受兩個子元素的元素，這兩個子元素通常是文字字串和字符 (代表核取方塊之類的控制項)。如需有關 BulletDecorator 的詳細資訊，請參閱其他版面配置容器。
	Popup	是呈現於應用程式中所有其他內容之上，但與另一個元素相關的視窗。您可以在使用者與快顯功能表所關聯的主要 UI 進行互動時，使用快顯功能表將其他資訊與選項提供給使用者。[Popup] 只能有一個子元素，而且會根據目標元素自行定位。根據預設，[Popup] 唯一的子元素為格線面板。繪製格線面板之後，立刻就可以在 [Popup] 中使用多個子元素。在大部分的情況下，您無須自行直接建立快顯功能表。相反地，您可以使用範本中具有快顯功能表的控制項，例如功能表或下拉式方塊。如需有關 [Popup] 的詳細資訊，請參閱其他版面配置容器。
	ScrollViewer	一種可讓您捲動其內含之子元素的元素。它只接受一個子元素。因此，您通常會在這個元素中使用一個版面配置面板，例如堆疊面板、畫布面板或格線面板。其他控制項 (例如清單方塊) 的範本會使用 [ScrollViewer] 支援內容的捲動。當 [ScrollViewer] 的內容太大時，可以對內容進行裁剪。您也可以控制是否要停用、隱藏、顯示或只在需要時自動顯示捲軸。如需有關 [ScrollViewer] 的詳細資訊，請參閱其他版面配置容器。
	UniformGrid	在相等 (或一致) 大小的格線區域內排列子元素。[UniformGrid] 不是一種格線面板；更準確地說，應該是一種並排的版面配置元素，因為它會根據您指定的列數與欄數，在其所包含的各元素間建立相等的間距。當您將子元素新增至 [UniformGrid] 時，會從區域的左上角開始放置元素，一直填入到右下角，直到填滿格線為止。這對於影像清單之類的控制項而言很實用。如需有關 [UniformGrid] 的詳細資訊，請參閱其他版面配置容器。
	Viewbox	和縮放控制項一樣，可縮放所有子元素。因為檢視方塊只接受一個子元素，所以您通常會將畫布面板或格線面板放入其中，以便將縮放效果運用在多項子元素。如需有關 [Viewbox] 的詳細資訊，請參閱其他版面配置容器。

回到頁首

根版面配置容器

在 [互動] 面板的 [物件與時間軸] 下，會看到一個標示為 [LayoutRoot] 的元素。此元素代表 Expression Blend 文件中的根版面配置面板。根據預設，版面配置的根元素為格線面板。在大多數情況下，將格線面板當成最上層的頁面版面配置應已足夠。不過，您還是可利用滑鼠右鍵按一下版面配置根元素，指向 [變更版面配置類型]，然後選取不同的版面配置面板，將版面配置根元素變更為另一種版面配置面板。也可以選擇畫布面板取代格線面板做為預設 [LayoutRoot]，方法是清除 [選項] 對話方塊 (在 [工具] 功能表上) 的 [專案] 區段中之 [使用格線面板作為新項目的預設版面配置] 核取方塊。

回到頁首

圖層

圖層提供快速又簡單的方式來建立頁面層級版面配置容器以組織內容。從其他程式 (例如 Microsoft Expression Design 2) 匯入內容時，圖層特別有用。從 Expression Design 2 匯入的作品在各個匯入的圖層使用畫布面板。

您可以使用 [工具] 功能表上的 [建立新圖層] 命令建立新圖層。Expression Blend 會根據目前指定文件的 [LayoutRoot] 建立新圖層。

圖層的概念圖

回到頁首

使用子元素的方法

Expression Blend 會嘗試將子元素新增至文件內的根 (或最上層) 面板。不過，如果物件樹狀目錄中另有一個使用中的版面配置容器，則子元素會新增至該容器中。您可以按兩下版面配置面板，讓元素變成使用中狀態。面板周圍的黃色反白顯示，表示該面板現在是使用中元素。黃色反白顯示會同時顯示在畫板中與 [互動] 面板的 [物件與時間軸] 之下。當您建立新面板然後立即在該面板的框線內繪製子元素時，請注意子元素會置入剛建立的面板中。這是因為新建立的面板會自動變成使用中的元素。

magGlass 元素是目前使用中的元素，其中將新增新的子物件。

使用 Expression Blend 也可輕易在面板之間拖曳子元素，讓這些子元素「重新隸屬於」不同的版面配置容器中。下圖顯示一個橘色橢圓形如何從根版面配置格線面板，移至另一個格線面板。如果面板能夠接受子元素，面板周圍就會出現虛線週框方塊及文字提示。先按住 ALT 鍵再放開滑鼠按鈕，即完成重新隸屬的動作。

將物件的父項從根 [格線] 面板，重設為另一個 [格線] 面板。

回到頁首

複雜版面配置

當配置頁面的版面時，您需要的彈性往往會超過單一版面配置面板所能提供的彈性。建立複雜版面配置的其中一種方法，就是將某個版面配置面板當成其他版面配置面板的容器。例如，您可以使用 [LayoutRoot] 中的固定面板 (預設是格線面板)。如此會將頁面分成區域集合，而每個區域通常包含一或多個控制項。

如需有關版面配置的詳細程式設計資訊，請參閱 Windows 軟體開發套件 (SDK) 的 .NET 開發一節 (英文)。

回到頁首