How to host WPF Chart control in Windows Forms project ?

This article offers a step-by-step guide to integrating a WPF Chart control into a Windows Forms project. Hosting a WPF Chart control within a Windows Forms application enables access to the advanced and modern features of WPF while maintaining the existing Windows Forms infrastructure. Follow these steps:

Step 1: Create a Windows Forms Project

1. Open Visual Studio.
2. Create a new Windows Forms App project.
3. Name your project and select the appropriate .NET version.
4. Click Create

Step 2: Create a Windows Control Library

To encapsulate and reuse the WPF chart control, need to create a Windows Control Library:

1. Right-click the solution in Solution Explorer and select Add then select New Project.
2. Search for Windows Forms Control Library and select the project
3. Name the project and select the appropriate framework.
4. Click Create.

Step 3: Configure the required WPF assemblies

To enable the use of WPF Chart controls within the project, it is necessary to add the required WPF assemblies. Follow these steps:

1. Right-click the Windows Control Library project and select Manage NuGet Packages.
2. Install the Syncfusion.SfChart.WPF packages.

Step 4: Add a WPF User Control to the project

To host the WPF Chart control, a WPF User Control must be added to the Windows Control Library project. Follow these steps:

1. Right-click the Windows Control Library project.
2. Select Add then select New Item.
3. Choose WPF User Control and name it.

Step 5: Configure the Syncfusion WPF Chart in the UserControl.Xaml File

Then it is needed to add the necessary configuration for Syncfusion WPF Chart in the loaded SfChartControl.Xaml (UserControl.Xaml file). Refer the following code snippets.

<chart:SfChart x:Name="SplineAreaChart" Margin="5" HorizontalAlignment="Center">

   <chart:SfChart.DataContext>
       <model:SplineAreaChartViewModel/>
   </chart:SfChart.DataContext>
   
   <chart:SfChart.PrimaryAxis>
       <chart:CategoryAxis Interval="2" EdgeLabelsDrawingMode="Shift" ShowGridLines="false" PlotOffset="10">
       </chart:CategoryAxis>
   </chart:SfChart.PrimaryAxis>

   <chart:SfChart.SecondaryAxis>
       <chart:NumericalAxis  Maximum="12" Minimum="0" Interval="2" ShowGridLines="True"  LabelFormat="0'%">
       </chart:NumericalAxis>
   </chart:SfChart.SecondaryAxis>

   <chart:SplineAreaSeries Interior="#00AEE0"
                           ItemsSource="{Binding SplineAreaData}"
                           Label="India"
                           XBindingPath="Year"
                           YBindingPath="India" />

   <chart:SplineAreaSeries Interior="#96D759"
                           ItemsSource="{Binding SplineAreaData}"
                           Label="China"
                           XBindingPath="Year"
                           YBindingPath="China" />
</chart:SfChart>

Step 6: Create Element Host class

To load a WPF control in a Windows Forms application, create a class in the Windows Forms application that derives from ElementHost and load the SfChartControl WPF control into it. Refer to the following code snippet.

using System.ComponentModel.Design.Serialization;
using System.ComponentModel;
using WindowsFormsControlLibrary;

namespace ChartIntegration
{
   [Designer("System.Windows.Forms.Design.ControlDesigner, System.Design")]
   [DesignerSerializer("System.ComponentModel.Design.Serialization.TypeCodeDomSerializer , System.Design", "System.ComponentModel.Design.Serialization.CodeDomSerializer, System.Design")]
   public class ChartHost : System.Windows.Forms.Integration.ElementHost
   {
       protected SfChartControl m_WPFSfChart = new();
       public ChartHost()
       {
           base.Child = m_WPFSfChart;
       }
   }
} 

Step 7: Add Code to the Windows Forms Project File to Use the WPF Control

Need to add the following code snippet in Winforms project file to use WPF Control in winforms application

<UseWPF>true</UseWPF> 

Step 8: Attach Windows Control Library project into Windows Forms application.

It is needed to attach the created Windows Control Library project into Windows Forms application and add it to its assembly reference section.

Step 9: Add SfChartcontrol in Windows Forms application

As both the applications are merged, it is needed to rebuild the whole application. It will add SfChartControl WPF control in Windows Forms Application Designer Page Toolbox. It can be dragged and dropped into the Form Designer.

Output:

You can find the complete sample from this GitHub Repo link.

Conclusion

I hope you enjoyed learning about how to host WPF Chart control in Windows Forms project.

You can refer to our WinForms Chart feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WinForms Chart example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!