Walkthrough: Arranging WPF Content on Windows Forms at Design Time
This walkthrough shows you how to use the Windows Forms layout features, such as anchoring and snaplines, to arrange Windows Presentation Foundation (WPF) controls.
In this walkthrough, you perform the following tasks:
Create the project.
Create the WPF control.
Host WPF controls in a layout panel.
Use snaplines to align WPF controls.
Anchor and dock WPF controls.
The dialog boxes and menu commands you see might differ from those described in Help depending on your active settings or edition. To change your settings, choose Import and Export Settings on the Tools menu. For more information, see Customizing Development Settings in Visual Studio.
You need the following components to complete this walkthrough:
Visual Studio 2012.
The first step is to create the Windows Forms project.
When hosting WPF content, only C# and Visual Basic projects are supported.
To create the project
Create a new Windows Forms Application project in Visual Basic or Visual C# named ArrangeElementHost.
After you add a WPF control to the project, you can arrange it on the form.
To create WPF controls
Add a new WPF UserControl to the project. Use the default name for the control type, UserControl1.xaml. For more information, see Walkthrough: Creating New WPF Content on Windows Forms at Design Time.
In Design view, make sure that UserControl1 is selected. For more information, see How to: Select and Move Elements on the Design Surface.
Set the value of the Background property to Blue.
Build the project.
You can use WPF controls in layout panels in the same way you use other Windows Forms controls.
To host WPF controls in a layout panel
Open Form1 in the Windows Forms Designer.
In the Toolbox, drag a TableLayoutPanel control onto the form.
On the TableLayoutPanel control's smart tag panel, select Remove Last Row.
Resize the TableLayoutPanel control to a larger width and height.
In the Toolbox, double-click UserControl1 to create another instance in the second cell of the TableLayoutPanel control.
In the Document Outline window, select tableLayoutPanel1. For more information, see Document Outline Window.
Snaplines enable easy alignment of controls on a form. You can use snaplines to align your WPF controls as well. For more information, see Walkthrough: Arranging Controls on Windows Forms Using Snaplines.
To use snaplines to align WPF controls
Using snaplines, align the left edge of elementHost3 with the left edge of TableLayoutPanel control.
Using snaplines, size elementHost3 to the same width as the TableLayoutPanel control.
Move elementHost3 toward the TableLayoutPanel control until a center snapline appears between the controls.
In the Properties window, set the value of the Margin property to 20, 20, 20, 20.
Move the elementHost3 away from the TableLayoutPanel control until the center snapline appears again. The center snapline now indicates a margin of 20.
Move elementHost3 to the right, until its left edge aligns with the left edge of elementHost1.
Change the width of elementHost3 until its right edge aligns with the right edge of elementHost2.
A WPF control hosted on a form has the same anchoring and docking behavior as other Windows Forms controls.
To anchor and dock WPF controls
In the Properties window, set the Anchor property to Top, Bottom, Left, Right.
Resize the TableLayoutPanel control to a larger size.
The elementHost1 control resizes to fill the cell.
Select the TableLayoutPanel control.
Resize the form.
All three ElementHost controls resize appropriately.
For more information, see How to: Anchor and Dock Child Controls in a TableLayoutPanel Control.