演练：设计时在 Windows 窗体上排列 WPF 内容

本文演示如何使用 Windows 窗体布局功能（例如锚定和对齐线）排列 Windows Presentation Foundation (WPF) 控件。

先决条件

若要完成本演练，必须具有 Visual Studio。

打开 Visual Studio，用 Visual Basic 或 Visual C# 创建名为 ArrangeElementHost 的新 Windows 窗体应用程序项目。

注意

承载 WPF 内容时，仅支持 C# 和 Visual Basic 项目。

将 WPF 控件添加到项目后，就可以在窗体上对其进行排列。

将新的 WPF UserControl 添加到项目。使用控件类型的默认名称，UserControl1.xaml。有关详细信息，请参阅演练：设计时在 Windows 窗体上创建新的 WPF 内容。
在设计视图中，请确保已选中 UserControl1。
在“属性”窗口中，将 Width 和 Height 属性的值设置为 200。
将 Background 属性的值设置为“蓝色”。
生成项目。

在布局面板中使用 WPF 控件与使用其他 Windows 窗体控件的方式可以相同。

在 Windows 窗体设计器中打开 Form1。
在“工具箱”中，将 TableLayoutPanel 控件拖到窗体上。
在 TableLayoutPanel 控件的智能标记面板上，选择“移除最后一行”。
将 TableLayoutPanel 控件的大小调整为更大的宽度和高度。
在“工具箱”中，双击 UserControl1 在 TableLayoutPanel 控件的第一个单元格中创建 UserControl1 的实例。

UserControl1 的实例承载在名为 elementHost1 的新 ElementHost 控件中。
在“工具箱”中，双击 UserControl1 在 TableLayoutPanel 控件的第二个单元格中创建另一个实例。
在“文档大纲”窗口中，选择 tableLayoutPanel1。
在“属性”窗口中，将 Padding 属性的值设置为“10、10、10、10”。

调整两个 ElementHost 控件的大小以适应新的布局。

使用对齐线能够轻松对齐窗体上的控件。还可以使用对齐线对齐 WPF 控件。有关详细信息，请参阅演练：使用对齐线在 Windows 窗体上排列控件。

从“工具箱”中，将 UserControl1 的实例拖到窗体上，并将其放在 TableLayoutPanel 控件下的空间中。

UserControl1 的实例承载在名为 elementHost3 的新 ElementHost 控件中。
使用对齐线，将 elementHost3 的左边缘与 TableLayoutPanel 控件的左边缘对齐。
使用对齐线，将 elementHost3 按与 TableLayoutPanel 控件相同的宽度排列。
朝着 TableLayoutPanel 控件移动 elementHost3，直到控件间显示居中对齐线。
在“属性”窗口中，将 Margin 属性的值设置为“20、20、20、20”。
向远离 TableLayoutPanel 控件的方向移动 elementHost3，直到再次显示居中对齐线。现在，居中对齐线指示边距为 20。
向右移动 elementHost3，直到其左边缘与 elementHost1 的左边缘对齐。
更改 elementHost3 的宽度，直到其右边缘与 elementHost2 的右边缘对齐。

窗体上承载的 WPF 控件具有与其他 Windows 窗体控件相同的锚定和停靠行为。

选择elementHost1。
在“属性”窗口中，将 Anchor 属性的值设置为“上、下、左、右”。
将 TableLayoutPanel 控件的大小调整为更大。

调整 elementHost1 控件大小，以填充单元格。
选择 elementHost2。
在属性窗口中，将 Dock 属性的值设置为 Fill。

调整 elementHost2 控件大小，以填充单元格。
选择 TableLayoutPanel 控件。
将其 Dock 属性的值设置为 Top。
选择elementHost3。
将其 Dock 属性的值设置为 Fill。

调整 elementHost3 控件大小，以填充窗体上的剩余空间。
调整窗体大小。

所有三个 ElementHost 控件将相应地调整大小。

有关详细信息，请参阅如何：在 TableLayoutPanel 控件中锚定和停靠子控件。