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

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

先决条件

需要 Visual Studio 才能完成本演练。

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

注释

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

向项目添加 WPF 控件后，可以在窗体上排列它。

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

可以在布局面板中使用 WPF 控件，就像使用其他 Windows 窗体控件一样。

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

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

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

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

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

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

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

选择 elementHost1。
在属性窗口中，将 Anchor 属性设置为 顶部、底部、左、右。
将 TableLayoutPanel 控件的大小调整为更大。

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

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

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

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

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