Skip to content

Commit 958b87f

Browse files
Vallarasu4653Vallarasu4653
committed
update KB Sample and README file
1 parent aff196e commit 958b87f

File tree

53 files changed

+169859
-2
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+169859
-2
lines changed

‎README.md‎

Lines changed: 131 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,131 @@
1-
# How-to-host-WPF-Chart-control-in-Windows-Forms-project
2-
Learn how to host a WPF Chart in a Windows Forms app using ElementHost for seamless integration and advanced data visualization with WPF features.
1+
# How to host WPF Chart control in Windows Forms project
2+
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:
3+
4+
### Step 1: Create a Windows Forms Project
5+
6+
1. Open Visual Studio.
7+
2. Create a new Windows Forms App project.
8+
3. Name your project and select the appropriate .NET version.
9+
4. Click Create
10+
11+
![This image demonstrates how to create a new Windows Forms App project.](https://support.syncfusion.com/kb/agent/attachment/article/18893/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjM1MjAwIiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.A5dQXEVlZvVH69XldMbdO4L0mbTN3m_DmIyq-o9rfbE)
12+
13+
### Step 2: Create a Windows Control Library
14+
15+
To encapsulate and reuse the WPF chart control, need to create a Windows Control Library:
16+
17+
1. Right-click the solution in Solution Explorer and select Add then select New Project.
18+
2. Search for Windows Forms Control Library and select the project
19+
3. Name the project and select the appropriate framework.
20+
4. Click Create.
21+
22+
![This image demonstrates how to create a new Windows Control Library Project](https://support.syncfusion.com/kb/agent/attachment/article/18893/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjM1MjA0Iiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.drvonvGOiOSYAK4ALZICiP0TU82IeOZU2rlW6XcgE0k)
23+
24+
25+
### Step 3: Configure the required WPF assemblies
26+
27+
To enable the use of WPF Chart controls within the project, it is necessary to add the required WPF assemblies. Follow these steps:
28+
29+
1. Right-click the Windows Control Library project and select Manage NuGet Packages.
30+
2. Install the [Syncfusion.SfChart.WPF](https://www.syncfusion.com/wpf-controls/charts){target="_blank"} packages.
31+
32+
### Step 4: Add a WPF User Control to the project
33+
34+
To host the WPF Chart control, a WPF User Control must be added to the Windows Control Library project. Follow these steps:
35+
36+
1. Right-click the Windows Control Library project.
37+
2. Select Add then select New Item.
38+
3. Choose WPF User Control and name it.
39+
40+
![This image demonstrates how to create a WPF user control.](https://support.syncfusion.com/kb/agent/attachment/article/18893/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjM1MjA2Iiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.wD73rn09JIl7lCmfcIDBFEf1-IkbC_7ZVzns1e57ZSU)
41+
42+
### Step 5: Configure the Syncfusion WPF Chart in the UserControl.Xaml File
43+
44+
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.
45+
46+
```xml
47+
<chart:SfChart x:Name="SplineAreaChart" Margin="5" HorizontalAlignment="Center">
48+
49+
<chart:SfChart.DataContext>
50+
<model:SplineAreaChartViewModel/>
51+
</chart:SfChart.DataContext>
52+
53+
<chart:SfChart.PrimaryAxis>
54+
<chart:CategoryAxis Interval="2" EdgeLabelsDrawingMode="Shift" ShowGridLines="false" PlotOffset="10">
55+
</chart:CategoryAxis>
56+
</chart:SfChart.PrimaryAxis>
57+
58+
<chart:SfChart.SecondaryAxis>
59+
<chart:NumericalAxis Maximum="12" Minimum="0" Interval="2" ShowGridLines="True" LabelFormat="0'%">
60+
</chart:NumericalAxis>
61+
</chart:SfChart.SecondaryAxis>
62+
63+
<chart:SplineAreaSeries Interior="#00AEE0"
64+
ItemsSource="{Binding SplineAreaData}"
65+
Label="India"
66+
XBindingPath="Year"
67+
YBindingPath="India" />
68+
69+
<chart:SplineAreaSeries Interior="#96D759"
70+
ItemsSource="{Binding SplineAreaData}"
71+
Label="China"
72+
XBindingPath="Year"
73+
YBindingPath="China" />
74+
</chart:SfChart>
75+
```
76+
77+
### Step 6: Need to create Element Host class
78+
79+
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.
80+
81+
```csharp
82+
using System.ComponentModel.Design.Serialization;
83+
using System.ComponentModel;
84+
using WindowsFormsControlLibrary;
85+
86+
namespace SimpleSample
87+
{
88+
[Designer("System.Windows.Forms.Design.ControlDesigner, System.Design")]
89+
[DesignerSerializer("System.ComponentModel.Design.Serialization.TypeCodeDomSerializer , System.Design", "System.ComponentModel.Design.Serialization.CodeDomSerializer, System.Design")]
90+
public class ChartHost : System.Windows.Forms.Integration.ElementHost
91+
{
92+
protected SfChartControl m_WPFSfChart = new();
93+
public ChartHost()
94+
{
95+
base.Child = m_WPFSfChart;
96+
}
97+
}
98+
}
99+
```
100+
101+
### Step 7: Add Code to the Windows Forms Project File to Use the WPF Control
102+
103+
Need to add the following code snippet in Winforms project file to use WPF Control in winforms application
104+
105+
```xml
106+
<UseWPF>true</UseWPF>
107+
```
108+
109+
### Step 8: Need to attach Windows Control Library project into Windows Forms application.
110+
111+
It is needed to attach the created Windows Control Library project into Windows Forms application and add it to its assembly reference section.
112+
113+
### Step 9: Need to add SfChartcontrol in Windows Forms application
114+
115+
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.
116+
117+
118+
![This image demonstrates designer page toolbox](https://support.syncfusion.com/kb/agent/attachment/article/18893/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjM1MzAyIiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.vX_arH2klFUH-zZptrfQjtgZOpwmDqkBlsI08h0VYSI)
119+
120+
### Output:
121+
122+
123+
![This image demonstrates output to host wpf chart in winforms](https://support.syncfusion.com/kb/agent/attachment/article/18893/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjM1MzAzIiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.DoIMMJd2NJMZpxJpi1MwMYBhVfG8i1swTcQqsRi60bA)
124+
125+
### Troubleshooting:
126+
127+
**Path too long exception**
128+
129+
If you are facing a path too long exception when building this example project, close Visual Studio and rename the repository to a shorter name before building the project.
130+
131+
For more details, refer to the KB on How to host WPF Chart control in Windows Forms project ?

‎SimpleSample/SimpleSample.sln‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.12.35506.116 d17.12
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "SimpleSample", "SimpleSample\SimpleSample.csproj", "{7051E218-0CC7-48CC-AA59-1F0800523739}"
7+
EndProject
8+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "WindowsFormsControlLibrary", "WindowsFormsControlLibrary\WindowsFormsControlLibrary.csproj", "{86C1CD97-C510-47E3-80D5-5BCFBADA50D6}"
9+
EndProject
10+
Global
11+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
12+
Debug|Any CPU = Debug|Any CPU
13+
Release|Any CPU = Release|Any CPU
14+
EndGlobalSection
15+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
16+
{7051E218-0CC7-48CC-AA59-1F0800523739}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
17+
{7051E218-0CC7-48CC-AA59-1F0800523739}.Debug|Any CPU.Build.0 = Debug|Any CPU
18+
{7051E218-0CC7-48CC-AA59-1F0800523739}.Release|Any CPU.ActiveCfg = Release|Any CPU
19+
{7051E218-0CC7-48CC-AA59-1F0800523739}.Release|Any CPU.Build.0 = Release|Any CPU
20+
{86C1CD97-C510-47E3-80D5-5BCFBADA50D6}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
21+
{86C1CD97-C510-47E3-80D5-5BCFBADA50D6}.Debug|Any CPU.Build.0 = Debug|Any CPU
22+
{86C1CD97-C510-47E3-80D5-5BCFBADA50D6}.Release|Any CPU.ActiveCfg = Release|Any CPU
23+
{86C1CD97-C510-47E3-80D5-5BCFBADA50D6}.Release|Any CPU.Build.0 = Release|Any CPU
24+
EndGlobalSection
25+
GlobalSection(SolutionProperties) = preSolution
26+
HideSolutionNode = FALSE
27+
EndGlobalSection
28+
EndGlobal

‎SimpleSample/SimpleSample/ChartHost.cs‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
using System.ComponentModel.Design.Serialization;
2+
using System.ComponentModel;
3+
using WindowsFormsControlLibrary;
4+
5+
namespace SimpleSample
6+
{
7+
[Designer("System.Windows.Forms.Design.ControlDesigner, System.Design")]
8+
[DesignerSerializer("System.ComponentModel.Design.Serialization.TypeCodeDomSerializer , System.Design", "System.ComponentModel.Design.Serialization.CodeDomSerializer, System.Design")]
9+
public class ChartHost : System.Windows.Forms.Integration.ElementHost
10+
{
11+
protected SfChartControl m_WPFSfChart = new();
12+
public ChartHost()
13+
{
14+
base.Child = m_WPFSfChart;
15+
}
16+
}
17+
}

‎SimpleSample/SimpleSample/Form1.Designer.cs‎

Lines changed: 57 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎SimpleSample/SimpleSample/Form1.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
namespace SimpleSample
2+
{
3+
public partial class Form1 : Form
4+
{
5+
public Form1()
6+
{
7+
InitializeComponent();
8+
}
9+
}
10+
}

‎SimpleSample/SimpleSample/Form1.resx‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<root>
3+
<!--
4+
Microsoft ResX Schema
5+
6+
Version 2.0
7+
8+
The primary goals of this format is to allow a simple XML format
9+
that is mostly human readable. The generation and parsing of the
10+
various data types are done through the TypeConverter classes
11+
associated with the data types.
12+
13+
Example:
14+
15+
... ado.net/XML headers & schema ...
16+
<resheader name="resmimetype">text/microsoft-resx</resheader>
17+
<resheader name="version">2.0</resheader>
18+
<resheader name="reader">System.Resources.ResXResourceReader, System.Windows.Forms, ...</resheader>
19+
<resheader name="writer">System.Resources.ResXResourceWriter, System.Windows.Forms, ...</resheader>
20+
<data name="Name1"><value>this is my long string</value><comment>this is a comment</comment></data>
21+
<data name="Color1" type="System.Drawing.Color, System.Drawing">Blue</data>
22+
<data name="Bitmap1" mimetype="application/x-microsoft.net.object.binary.base64">
23+
<value>[base64 mime encoded serialized .NET Framework object]</value>
24+
</data>
25+
<data name="Icon1" type="System.Drawing.Icon, System.Drawing" mimetype="application/x-microsoft.net.object.bytearray.base64">
26+
<value>[base64 mime encoded string representing a byte array form of the .NET Framework object]</value>
27+
<comment>This is a comment</comment>
28+
</data>
29+
30+
There are any number of "resheader" rows that contain simple
31+
name/value pairs.
32+
33+
Each data row contains a name, and value. The row also contains a
34+
type or mimetype. Type corresponds to a .NET class that support
35+
text/value conversion through the TypeConverter architecture.
36+
Classes that don't support this are serialized and stored with the
37+
mimetype set.
38+
39+
The mimetype is used for serialized objects, and tells the
40+
ResXResourceReader how to depersist the object. This is currently not
41+
extensible. For a given mimetype the value must be set accordingly:
42+
43+
Note - application/x-microsoft.net.object.binary.base64 is the format
44+
that the ResXResourceWriter will generate, however the reader can
45+
read any of the formats listed below.
46+
47+
mimetype: application/x-microsoft.net.object.binary.base64
48+
value : The object must be serialized with
49+
: System.Runtime.Serialization.Formatters.Binary.BinaryFormatter
50+
: and then encoded with base64 encoding.
51+
52+
mimetype: application/x-microsoft.net.object.soap.base64
53+
value : The object must be serialized with
54+
: System.Runtime.Serialization.Formatters.Soap.SoapFormatter
55+
: and then encoded with base64 encoding.
56+
57+
mimetype: application/x-microsoft.net.object.bytearray.base64
58+
value : The object must be serialized into a byte array
59+
: using a System.ComponentModel.TypeConverter
60+
: and then encoded with base64 encoding.
61+
-->
62+
<xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
63+
<xsd:import namespace="http://www.w3.org/XML/1998/namespace" />
64+
<xsd:element name="root" msdata:IsDataSet="true">
65+
<xsd:complexType>
66+
<xsd:choice maxOccurs="unbounded">
67+
<xsd:element name="metadata">
68+
<xsd:complexType>
69+
<xsd:sequence>
70+
<xsd:element name="value" type="xsd:string" minOccurs="0" />
71+
</xsd:sequence>
72+
<xsd:attribute name="name" use="required" type="xsd:string" />
73+
<xsd:attribute name="type" type="xsd:string" />
74+
<xsd:attribute name="mimetype" type="xsd:string" />
75+
<xsd:attribute ref="xml:space" />
76+
</xsd:complexType>
77+
</xsd:element>
78+
<xsd:element name="assembly">
79+
<xsd:complexType>
80+
<xsd:attribute name="alias" type="xsd:string" />
81+
<xsd:attribute name="name" type="xsd:string" />
82+
</xsd:complexType>
83+
</xsd:element>
84+
<xsd:element name="data">
85+
<xsd:complexType>
86+
<xsd:sequence>
87+
<xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
88+
<xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
89+
</xsd:sequence>
90+
<xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1" />
91+
<xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
92+
<xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
93+
<xsd:attribute ref="xml:space" />
94+
</xsd:complexType>
95+
</xsd:element>
96+
<xsd:element name="resheader">
97+
<xsd:complexType>
98+
<xsd:sequence>
99+
<xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
100+
</xsd:sequence>
101+
<xsd:attribute name="name" type="xsd:string" use="required" />
102+
</xsd:complexType>
103+
</xsd:element>
104+
</xsd:choice>
105+
</xsd:complexType>
106+
</xsd:element>
107+
</xsd:schema>
108+
<resheader name="resmimetype">
109+
<value>text/microsoft-resx</value>
110+
</resheader>
111+
<resheader name="version">
112+
<value>2.0</value>
113+
</resheader>
114+
<resheader name="reader">
115+
<value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
116+
</resheader>
117+
<resheader name="writer">
118+
<value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
119+
</resheader>
120+
</root>

‎SimpleSample/SimpleSample/Program.cs‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
namespace SimpleSample
2+
{
3+
internal static class Program
4+
{
5+
/// <summary>
6+
/// The main entry point for the application.
7+
/// </summary>
8+
[STAThread]
9+
static void Main()
10+
{
11+
// To customize application configuration such as set high DPI settings or default font,
12+
// see https://aka.ms/applicationconfiguration.
13+
ApplicationConfiguration.Initialize();
14+
Application.Run(new Form1());
15+
}
16+
}
17+
}

0 commit comments

Comments
 (0)