Walkthrough: Manually Adding a Windows Presentation Foundation Element to a Windows Forms Project

Article
11/03/2006

This walkthrough shows you how to use Visual Studio to add a WPF element to your Windows Forms project manually. This procedure is useful if you do not have the Development Tools for .NET Framework 3.0 installed. For information on installing these tools, see Installation Instructions for the Windows SDK.

Tasks illustrated in this walkthrough include:

Creating the project.
Editing the project file.
Defining the SimpleControl element.
Using the SimpleControl element on a form.

When you are finished, you will understand how to add a WPF element to your Windows Forms project.

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.

Creating the Project

The first step is to create the application project. You will modify this project to handle WPF content.

To create the project

Create a Windows Forms application project named ManuallyAddingAWpfElement.
In Solution Explorer, add references to the following WPF assemblies.

The default location for these files is %programfiles%\Reference Assemblies\Microsoft\Framework\v3.0.
- PresentationCore
- PresentationFramework
- WindowsBase
- WindowsFormsIntegration
In Solution Explorer, right-click ManuallyAddingAWpfElement, point to Add, and then click New Item. In the Add New Item dialog box, select Text File, name the new file SimpleControl.xaml, and click Add. This file will hold the code for the WPF element.
Right-click ManuallyAddingAWpfElement again, point to Add, and then click New Item. In the Add New Item dialog box, select Class, name the new file SimpleControl.xaml.cs, and click Add.

Editing the Project File

You must edit the project file manually to make the WPF element build correctly.

To edit the project file

In Solution Explorer, right-click ManuallyAddingAWpfElement and click Unload Project.

The project name is labeled (unavailable).
Right-click ManuallyAddingAWpfElement, and click Edit ManuallyAddingAWpfElement.csproj.

The project file opens in the Code Editor.
Find the following line.
```
<None Include="SimpleControl.xaml" />
```
Change this line as follows.
```
<Page Include="SimpleControl.xaml" />
```

Find the following line.

<Compile Include="SimpleControl.xaml.cs" />

Replace this line with the following code.

<Compile Include="SimpleControl.xaml.cs">
      <DependentUpon>SimpleControl.xaml</DependentUpon>
      <SubType>Code</SubType>
</Compile>

Find the following line.

<Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />

After that line, add the following line.

<Import Project="$(MSBuildBinPath)\Microsoft.WinFX.targets" />

Save the project file and close it.
In Solution Explorer, right-click ManuallyAddingAWpfElement and click Reload Project.

Defining the SimpleControl Element

This procedure shows how to define a simple WPF element named SimpleControl. You will use this element on your form.

To define the SimpleControl element

In Solution Explorer, double-click SimpleControl.xaml to open it in the Code Editor.

Copy the following code into SimpleControl.xaml.

<UserControl x:Class="ManuallyAddingAWpfElement.SimpleControl"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    >

  <Grid>
    <Button Content="Click"/>
  </Grid>
</UserControl>

This code defines a simple element that displays a Button control.

Close SimpleControl.xaml and open it again. This allows the Code Editor to parse the file.
In Solution Explorer, select SimpleControl.xaml to view its properties. In the Properties window, change the file's Encoding property to UTF-8.
In Solution Explorer, double-click SimpleControl.xaml.cs to open it in the Code Editor.

Copy the following code into SimpleControl.xaml.cs.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Media;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ManuallyAddingAWpfElement
{   
    public partial class SimpleControl : UserControl
    {
        public SimpleControl()
        {
            InitializeComponent();
        }
    }
}

Using the SimpleControl Element on a Form

To use the SimpleControl element on a form

In Solution Explorer, double-click Form1.cs to open it in the Windows Forms Designer.
Double-click the form to add an event handler for the Load event.

Copy the following code into the Load event handler.

private System.Windows.Forms.Integration.ElementHost elementHost1;

private void Form1_Load(object sender, EventArgs e)
{
    SimpleControl sc = new SimpleControl();

    this.elementHost1.Child = sc;

    this.elementHost1.BackColor = Color.Blue;
}

This code creates a SimpleControl and assigns it as the child of the ElementHost control.

Press F5 to build and run the application.

Share via

Walkthrough: Manually Adding a Windows Presentation Foundation Element to a Windows Forms Project

Creating the Project

To create the project

Editing the Project File

To edit the project file

Defining the SimpleControl Element

To define the SimpleControl element

Using the SimpleControl Element on a Form

To use the SimpleControl element on a form

See Also

Reference

Concepts

Other Resources

Additional resources