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

本文說明如何使用 Windows Forms 版面配置功能，例如錨定和對齊線，來排列 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。
在 [ 屬性] 視窗中，將和 Height 屬性的值 Width 設定為 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 的執行個體會裝載到名為 elementHost3 的新 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 控制項會調整大小以填滿儲存格。
選取 elementHost2。
在 [ 屬性] 視窗中，將屬性的值 Dock 設定為 Fill 。

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

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

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

如需詳細資訊，請參閱 How to： Anchor and Dock Child Controls in a TableLayoutPanel Control 。