Walkthrough: Changing Properties of a Hosted WPF Element at Design Time

This walkthrough shows you how to change property values of a Windows Presentation Foundation (WPF) control hosted on a Windows Form.

In this walkthrough, you perform the following tasks:

  • Create the project.

  • Create the WPF control.

  • Host the WPF controls on a Windows Form.

  • Use the WPF Designer for Visual Studio to change property values.


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.

Creating the Project

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 WpfHost.

Creating the WPF Control

After you add a WPF control to the project, you can arrange it on the form.

To create WPF controls

  1. 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.

  2. In the Properties window, set the value of the Background property to Blue.

  3. Build the project.

Changing Property Values on the WPF Control

The ElementHost smart tag makes it easy to change properties of hosted WPF content by using the WPF Designer.

To host a WPF control

  1. Open Form1 in the Windows Forms Designer.

  2. In the Toolbox, in the WPF User Controls tab, double-click UserControl1 to create an instance of UserControl1 on the form.

    The instance of UserControl1 is hosted in a new ElementHost control named elementHost1.

  3. In the ElementHost Tasks smart tag panel, select Edit Hosted Content.

    UserControl1.xaml opens in the WPF Designer.

  4. In the Properties window, set the value of the Background property to Red.

  5. Rebuild the project.

  6. Open Form1 in the Windows Forms Designer.

    The instance of UserControl1 has a red background.

See Also

How to: Anchor and Dock Child Controls in a TableLayoutPanel Control
How to: Align a Control to the Edges of Forms at Design Time
Walkthrough: Arranging Controls on Windows Forms Using Snaplines
Migration and Interoperability
Using WPF Controls
WPF Designer