Integrate WPF UserControls in WinForms

• Download source - 143.15 KB

Introduction

In one of our last articles the author described how to embed WinForms-Controls into WPF. This one explains the other way around: how can one integrate a WPF-UserControl into WinForms. In the example, a scaleable WPF-image is hosted in a WinForms-Dialog.

The Concept

For hosting a WPF-Usercontrol in WinForms you can use the control ElementHost that resides in the namespace System.Windows.Forms.Integration. This control has a property called Child to which you can assign an instance of an UIElement.

The Project

Here is the XAML for our ScaleableImageControl. It is very simple, just an image with a BitmapEffect:

<UserControl x:Class="ScaleableImageControl.ScaleableImageCtrl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="300" Width="300">

        <Image Margin="10" x:Name="img" Stretch="Uniform" Opacity="1">
            <Image.BitmapEffect>
                <DropShadowBitmapEffect Opacity="1" />

            </Image.BitmapEffect>
        </Image>

</UserControl>

Now, we add two methods to the Usercontrol that we will call from the Windows Forms dialog:

public void SetSource(string fileName)
{
    img.Source = new BitmapImage(new Uri(fileName));
}

public void SetOpacity(double opacity)
{
    img.Opacity = opacity;
}

We are able to set the opacity and the displayed image with this interface.

Hosting the WPF-control in WinForms

When opening the Winforms dialog in the designer of VS 2008 you will realize that there is a ScaleableImageControl in the toolbox:

You can drag it into your Winforms dialog. An ElementHost-instance and a ScaleableImageControl-instance is created for you, the ScaleableImageControl-object is assigned to the Child-property of the ElementHost-object. VS 2008 helps us a lot here. At last we need some controls to interact we the ScaleableImageControl-object (assigning images and setting the opacity):

Here is the code for interaction:

private void udOpacity_ValueChanged(object sender, EventArgs e)
{
    scaleableImageCtrl1.SetOpacity( (double) udOpacity.Value);
}

private void btnBrowse_Click(object sender, EventArgs e)
{
    if (openFileDialog1.ShowDialog() == DialogResult.OK)
    {
        try
        {
            scaleableImageCtrl1.SetSource(openFileDialog1.FileName);
        }
        catch (Exception ex)
        {
            MessageBox.Show(ex.Message);
        }
    }
}

It is not a big deal to integrate WPF in Winforms. Try it, the project is attached. Have fun!