逐步解說：在設計階段排列 Windows Form 的 WPF 內容

本文示範如何使用 Windows Form 的配置功能 (例如錨定和對齊線)，來排列 Windows Presentation Foundation (WPF) 控制項。

必要條件

若要完成這個逐步解說，您必須具有 Visual Studio。

開啟 Visual Studio 並使用 Visual Basic 或 Visual C# 建立名稱為 ArrangeElementHost 的新 Windows Forms 應用程式專案。

注意

裝載 WPF 內容時，只支援 C# 和 Visual Basic 專案。

在將 WPF 控制項加入專案後，即可在表單上予以排列。

將新的 WPF UserControl 加入專案。使用控制項類型的預設名稱 UserControl1.xaml。如需詳細資訊，請參閱逐步解說：在設計時間在 Windows Forms 上建立新的 WPF 內容。
在 [設計] 檢視中，確定已選取 UserControl1。
在 [屬性] 視窗中，將 Width 和 Height 屬性的值設定為 200。
將 Background 屬性的值設定為 Blue。
組建專案。

您可以使用與其他 Windows Form 控制項相同的方式，在配置面板中使用 WPF 控制項。

在 Windows Form 設計工具中開啟 Form1。
在 [工具箱] 中，將 TableLayoutPanel 控制項拖曳到表單上。
在 TableLayoutPanel 控制項的智慧標籤面板上，選取 [移除最後一個資料列]。
將 TableLayoutPanel 控制項的大小調整為更寬且更高的大小。
在 [工具箱] 中，按兩下 UserControl1，在 TableLayoutPanel 控制項的第一個儲存格中建立 UserControl1 的執行個體。

UserControl1 的執行個體會裝載到名為 elementHost1 的新 ElementHost 控制項中。
在 [工具箱] 中，按兩下 UserControl1，在 TableLayoutPanel 控制項的第二個儲存格中建立另一個執行個體。
在 [文件大綱] 視窗中，選取 tableLayoutPanel1。
在 [屬性] 視窗中，將 Padding 屬性的值設定為 10, 10, 10, 10。

兩個 ElementHost 控制項的大小會調整以配合新的配置。

對齊線可讓您輕鬆對齊表單上的控制項。您也可以使用對齊線來對齊 WPF 控制項。如需詳細資訊，請參閱逐步解說：使用對齊線排列 Windows Forms 上的控制項。

將 UserControl1 的執行個體從 [工具箱] 拖曳到表單上，並將其放置到 TableLayoutPanel 控制項下方的空間。

UserControl1 的執行個體會裝載到名為 elementHost1 的新 ElementHost 控制項中。
使用對齊線，將 elementHost3 的左邊緣與 TableLayoutPanel 控制項的左邊緣對齊。
使用對齊線，將 elementHost3 的大小調整成與 TableLayoutPanel 控制項同寬。
將 elementHost3 往 TableLayoutPanel 控制項方向移動，直到中央對齊線出現在兩個控制項之間為止。
在 [屬性] 視窗中，將 Margin 屬性的值設定為 20, 20, 20, 20。
將 elementHost3 往 TableLayoutPanel 控制項反方向移動，直到中央對齊線再度出現為止。中央對齊線現在表示邊界 20。
將 elementHost3 向右移，直到其左邊緣與 elementHost1 的左邊緣對齊為止。
變更 elementHost3 的寬度，直到其右邊緣與 elementHost2 的右邊緣對齊為止。

裝載於表單上之 WPF 控制項的錨定和停駐行為，與其他 Windows Form 控制項相同。

選取 elementHost1。
在 [屬性] 視窗中，將 Anchor 屬性設定為 Top、Bottom、Left、Right。
將 TableLayoutPanel 控制項的大小調整為更大的大小。

elementHost1 控制項會調整大小以填滿儲存格。
選取 elementHost1。
在 [屬性] 視窗中，將 Dock 屬性的值設定為 Fill。

elementHost1 控制項會調整大小以填滿儲存格。
選取 TableLayoutPanel 控制項。
將其 Dock 屬性的值設定為 Top。
選取 elementHost1。
將其 Dock 屬性的值設定為 Top。

elementHost3 控制項會調整大小以填滿表單上的剩餘空間。
調整表單的大小。

這三個 ElementHost 控制項都會適當地調整大小。

如需詳細資訊，請參閱操作說明：錨定和停駐 TableLayoutPanel 控制項中的子控制項。