Hosting WPF User Control in Windows Forms Application

We can use WPF controls in Winforms applications if we want. In some cases, we can easily design a control as WPF, which would be very problem to make in winforms. That's why we can host as a solution.

Before starting the application, I need to specify, the application I will make in this article will proceed through the dotnet CLI. So, I am not going to use Visual Studio in this tutorial.

First, I will create a sample project. I created one empty folder named ProjectExample. I opened cmd terminal in this directory. 

I am creating a solution file for the project with the following command:

dotnet new sln -n "ProjectSolution"
After that, I'm creating a windows forms application called test:
dotnet new winforms -n test
Now it's time to create a WPF user control class. For this I write the following command:
dotnet new wpfusercontrollib -n "wpfcontrol"
After this process, I need to add both applications to the solution file:
dotnet sln ProjectSolution.sln add ./test/test.csproj
dotnet sln ProjectSolution.sln add ./wpfcontrol/wpfcontrol.csproj
Then I add the reference of the wpf user control to the project named test:
dotnet add test/test.csproj reference wpfcontrol/wpfcontrol.csproj
We have finished the settings on the command line. Open the project named test with any editor or ide. I am using VS Code. 

In order to use the WPF UserControl as a host in Winforms, we must first set the following in the test.csproj file:
<Project Sdk="Microsoft.NET.Sdk">

    <ProjectReference Include="..\wpfcontrol\wpfcontrol.csproj" />


Let's run our project for testing purposes and only a blank form window will appear on the screen.
../test> dotnet run
I added a button to the UserControl1.xaml file:
<UserControl x:Class="wpfcontrol.UserControl1"
             d:DesignHeight="450" d:DesignWidth="800">
        <Button x:Name="btn1">click the button</Button>
We need to show this control on winforms. Let's open the Form1.Designer.cs file in the test project. First we need to include the two libraries:
namespace test;
using wpfcontrol;
using System.Windows.Forms.Integration;

partial class Form1
Next, we integrate the wpf control into winforms using elementhost:
    UserControl1 test;
    private void InitializeComponent()
        ElementHost elementHost = new ElementHost();

        test = new UserControl1();
        elementHost.Child = test;
It's time to run the project and the result is as expected:
WPF User Control in Winforms
If we want to interact with the button in the UserControl, first of all, a public property named Button is defined in the UserControl1 class:
namespace wpfcontrol
    public partial class UserControl1 : UserControl
        public Button Button1 {get {return btn1; }}

        public UserControl1()
Then we go to the test project and reach the control button with the property we defined and subscribe to click event as follows:
        test = new UserControl1();
        elementHost.Child = test;

        this.test.Button1.Click += (o, e) => 
            this.test.Button1.Background = System.Windows.Media.Brushes.Aqua;

If we run the project again and click the button, the color of the button should change as we want:
WPF User Control in Winforms

No comments:

Post a Comment