演练：设计时在 Windows 窗体上排列 WPF 内容
本演练演示如何使用 Windows 窗体布局功能（例如锚定和对齐线）来排列 Windows Presentation Foundation (WPF) 控件。
在本演练中，您将执行下列任务：
创建项目。
创建 WPF 控件。
在布局面板中承载 WPF 控件。
使用对齐线对齐 WPF 控件。
锚定和停靠 WPF 控件。
提示
显示的对话框和菜单命令可能会与“帮助”中的描述不同，具体取决于您现用的设置或版本。 若要更改设置，请在“工具”菜单上选择“导入和导出设置”。 有关更多信息，请参见 使用设置。
系统必备
您需要以下组件来完成本演练：
- Visual Studio 2010.
创建项目
第一步是创建 Windows 窗体项目。
提示
当承载 WPF 内容时，仅支持 C# 和 Visual Basic 项目。
创建项目
- 使用 Visual Basic 或 Visual C# 创建一个名为 ArrangeElementHost 的新 Windows 窗体应用程序项目。 有关更多信息，请参见如何：创建新的 Windows 窗体应用程序项目。
创建 WPF 控件
将 WPF 控件添加到项目后，可以在窗体上对它进行排列。
创建 WPF 控件
向项目添加新的 WPF UserControl。 使用该控件类型的默认名称 UserControl1.xaml。 有关更多信息，请参见演练：设计时在 Windows 窗体上创建新的 WPF 内容。
在“设计”视图中，确保选中 UserControl1。 有关更多信息，请参见如何：在设计图面上选择和移动元素。
将 Background 属性的值设置为 Blue。
生成项目。
在布局面板中承载 WPF 控件
可以按照与其他 Windows 窗体控件相同的方式，在布局面板中使用 WPF 控件。
在布局面板中承载 WPF 控件
在 Windows 窗体设计器中打开 Form1。
将一个 TableLayoutPanel 控件从**“工具箱”**中拖到窗体上。
在 TableLayoutPanel 控件的智能标记面板上，选择**“移除最后一行”**。
将 TableLayoutPanel 控件的大小调整到较大的宽度和高度。
在**“工具箱”**中，双击 UserControl1 在 TableLayoutPanel 控件的第一个单元格中创建一个 UserControl1 实例。
UserControl1 的实例承载在一个名为 elementHost1 的新 ElementHost 控件中。
在**“工具箱”**中，双击 UserControl1 在 TableLayoutPanel 控件的第二个单元格中创建另一个实例。
在**“文档大纲”**窗口中选择 tableLayoutPanel1。 有关更多信息，请参见“文档大纲”窗口。
在**“属性”**窗口中，将 Padding 属性的值设置为 10, 10, 10, 10。
调整两个 ElementHost 控件的大小，使其适合新布局。
使用对齐线对齐 WPF 控件
使用对齐线能够在窗体上轻松对齐控件。 也可以使用对齐线对齐 WPF 控件。 有关更多信息，请参见演练：使用对齐线在 Windows 窗体上排列控件。
使用对齐线对齐 WPF 控件
将一个 UserControl1 实例从**“工具箱”**中拖动到窗体上，并将它放置在 TableLayoutPanel 控件下方的空间中。
UserControl1 的实例承载在一个名为 elementHost3 的新 ElementHost 控件中。
使用对齐线，将 elementHost3 的左边缘与 TableLayoutPanel 控件的左边缘对齐。
使用对齐线，将 elementHost3 调整到和 TableLayoutPanel 控件相同的宽度。
将 elementHost3 移向 TableLayoutPanel 控件，直到这两个控件之间出现居中对齐线。
在**“属性”**窗口中，将 Margin 属性的值设置为 20, 20, 20, 20。
将 elementHost3 从 TableLayoutPanel 控件移开，直到再次出现居中对齐线。 居中对齐线现在指示边距为 20。
将 elementHost3 向右侧移动，直到它的左边缘与 elementHost1 的左边缘对齐。
更改 elementHost3 的宽度，直到它的右边缘与 elementHost2 的右边缘对齐。
锚定和停靠 WPF 控件
窗体中承载的 WPF 控件具有与其他 Windows 窗体控件相同的锚定和停靠行为。
锚定和停靠 WPF 控件
选择 elementHost1。
在**“属性”窗口中，将 Anchor 属性设置为“Top, Bottom, Left, Right”**。
将 TableLayoutPanel 控件调大。
elementHost1 控件的大小将调整到填满单元格。
选择 elementHost2。
在**“属性”**窗口中，将 Dock 属性的值设置为 Fill。
elementHost2 控件的大小将调整到填满单元格。
选择 TableLayoutPanel 控件。
选择 elementHost3。
-
elementHost3 控件的大小将调整到填满窗体上的剩余空间。
调整窗体大小。
适当地调整这三个 ElementHost 控件的大小。
有关更多信息，请参见如何：在 TableLayoutPanel 控件中锚定和停靠子控件。
请参见
任务
如何：在 TableLayoutPanel 控件中锚定和停靠子控件