Hosting a WPF control inside a Windows Form

Hosting a WPF content inside a Windows Forms application is very easy. You need to use ElementHost control which takes a FrameworkElement in its Child property. So if you specify a UserControl for Child of an ElementHost, the WPF content will be loaded to the Forms application .

Lets take a look into this in steps :

Step 1 :

Create a Windows Forms application and add a WPF UserControl Library to the project. ( If you are unaware of User Controls, please feel free to check these posts on UserControl and CustomControl, or you can read my WPF Tutorial from here. )

Step 2 :

Add a UserControl to the project and create something. In this sample application, I have just created a ColorAnimation that will be started when a Button is Clicked. Lets look how the code looks like :

<UserControl x:Class="SimpleWpfUserControlLibrary.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <Storyboard x:Key="cAnimBorder" Storyboard.TargetProperty="Background.Color" Storyboard.TargetName="brd">
            <ColorAnimation AutoReverse="True" From="Red" To="Green" RepeatBehavior="Forever">
            </ColorAnimation>
        </Storyboard>

    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <ToggleButton x:Name="btn" Content="Start" Click="Button_Click"/>
        <Border x:Name="brd" Grid.Row="1" CornerRadius="25" Margin="10" Background="Black">
        </Border>
    </Grid>
</UserControl>

Step 3:

Lets put the code for the Button Click eventhandler which will start the Animation on Button Click.

public bool IsAnimationStarted { get; set; }
private void Button_Click(object sender, RoutedEventArgs e)
{
    Storyboard sBoard = (Storyboard)FindResource("cAnimBorder");
    btn.Content = "Start";
    sBoard.Stop();

    if (!this.IsAnimationStarted)
    {
        sBoard.Begin();
        btn.Content = "Stop";
    }
    this.IsAnimationStarted = !this.IsAnimationStarted;

}

Step 4 :

Our UserControl is ready. Now it needs to be plugged in to the Forms Application.
Step 5 :

Take Project reference to the controls assembly in the Forms application just shown in the figure below :

Step 6 : Add an ElementHost control in the form and select the UserControl as Child. You will find the ElementHost control in WPF Interoperability section of toolbox.

Step 7 : Select the UserControl as Child. Once you select it, it will be shown in the Window designer too.

Step 8 : Run the sample, and you will see the UserControl Appears on the screen inside ElementHost.

There is a Non WPF button on the form as well as the WPF button and both works perfectly.

Download Sample Code

https://skydrive.live.com/self.aspx/.Public/SampleWPFHoster.zip?cid=bafa39a62a57009c&sc=documents

To do this Programmatically you must create an ElementHost and write like this :

SimpleWpfUserControlLibrary.UserControl1 ucontrol = new SimpleWpfUserControlLibrary.UserControl1();
            this.elementHost1.Child = ucontrol;

Note : Also remember, as there is no synchronization of WPF content and Windows Forms content, Resizing the ElementHost might sometimes produce hole in the content. So use it somewhere that never requires any resizing for better user experience.