Walkthrough: Hosting a Windows Forms User Control by Using the WPF Designer

This walkthrough shows you how to use the WPF Designer for Visual Studio to host a Windows Forms composite control in a WPF application. For more information about Windows Forms and WPF interoperability, see Migration and Interoperability. 

Tasks explained in this walkthrough include:

• Creating the project.

• Creating the Windows Forms composite control.

• Hosting the Windows Forms control in a WPF application.

Note

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 Working with Settings.

Prerequisites

You need the following components to complete this walkthrough:

• Visual Studio 2010.

Creating the Project

The first step is to create the project for the host application.

To create the project

1. Create a WPF Application project named "DemoApplication". For more information, see How to: Create a New WPF Application Project.

   MainWindow.xaml opens in the WPF Designer. 

2. In Solution Explorer, add a reference to the WindowsFormsIntegration assembly, which is named WindowsFormsIntegration.dll.

3. In Solution Explorer, add a reference to the Windows Forms assembly, which is named System.Windows.Forms.dll.

Creating the Windows Forms Composite Control

This procedure shows how to create a composite control which sizes itself to its content. The TableLayoutPanel control and the AutoSize property provide the control’s dynamic layout capability. For more information, see TableLayoutPanel Control (Windows Forms).

To create the Windows Forms composite control

1. Add a new Windows Forms Control Library project named "DemoControlLibrary" to the solution. For more information, see How to: Add and Remove Solution Items.

   UserControl1 opens in the Windows Forms Designer

2. From the Toolbox, double-click the TableLayoutPanel control. A TableLayoutPanel control appears on the design surface.

3. Select Remove Last Row from the TableLayoutPanel Tasks smart tag menu.

4. In the Properties window, set the value of the Dock property to Fill.

5. From the Toolbox, add a Label control to the first cell of the TableLayoutPanel control.

6. In the Properties window, set the following properties for the Label control.

   Property	Value
   AutoSize	True
   Dock	Fill
   Margin	0,0,0,0
   Text	Enter Date:
   TextAlign	MiddleCenter

7. From the Toolbox, add a MaskedTextBox control into the second cell of the TableLayoutPanel control.

8. Click the smart tag glyph () on the MaskedTextBox control and select Set Mask from the MaskedTextBox Tasks menu.

   The Input Mask dialog box appears.

9. From the Mask Description column, select Short date (or another predefined mask description) and click the OK button.

10. At the top of the Properties window, select the TableLayoutPanel control from the drop-down list.

11. Set the value of the AutoSize property to true.

12. At the top of the Properties window, select UserControl1.

13. Set the value of the AutoSize property to true, and set the value of the Size property to 0,0.

    UserControl1 resizes to fit its contents.

14. On the Build menu, select Build Solution to build the solution.

Hosting the Windows Forms Control in WPF

You use the WindowsFormsHost element to host UserControl1 in a WPF application.

To host the Windows Forms control in WPF

1. In the DemoApplication project of Solution Explorer, add a reference to the DemoControlLibrary project. For more information, see How to: Add or Remove References in Visual Studio.

2. Open MainWindow.xaml in the WPF Designer.

3. In XAML view, import the DemoControlLibrary namespace by inserting the following namespace mapping in the opening Window tag. For more information, see How to: Import a Namespace into XAML.

   xmlns:dc="clr-namespace:DemoControlLibrary;assembly=DemoControlLibrary"
   

4. After the Grid opening tag, insert the following code.

   <WindowsFormsHost HorizontalAlignment="Left" VerticalAlignment="Top">
       <dc:UserControl1/>
   </WindowsFormsHost>
   

   A region representing the hosted Windows Forms control appears in the designer.

5. Run the solution to test the user control.

Next Steps

You can also host WPF controls in Windows Forms. For more information, see Using WPF Controls.

See Also

Tasks

Walkthrough: Hosting a Windows Forms Control in WPF

Reference

WindowsFormsHost

ElementHost

Other Resources

Working with Controls in the WPF Designer

Migration and Interoperability