Embedding WPF Usercontrol in WinForms

Embedding WPF Usercontrol in WinForms
Section: WPF	Rating: Not rated yet!

CodeGod submitted this resource
The member's homepage is http://www.codegod.de
Visit the profile here

Attachment

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 we used for demonstration a scaleable WPF-image is hosted in a WinForms-Dialog.

Figure 1

The concept

For hosting a WPF-Usercontrol into 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:

Figure 2

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):

Figure 3

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!

Reader-Comments: