WPF – Use ZedGraph in WPF application

Maybe you already know about ZedGraph. ZedGraph is a set of classes, written in C#, for creating 2D line and bar graphs of arbitrary datasets http://sourceforge.net/projects/zedgraph/ . If you need some basic samples for using this library you can read a useful article at CodeProject http://www.codeproject.com/KB/graphics/zedgraph.aspx . However this library now only supports Windows Form Application. If you want to host a graph on WPF application, you can follow the steps in this blog below. The main idea of this method is host a graph in a User Control of Windows Form and then host this user control in WPF application.

1. Steps

1. Create a blank solution called “WPF ZedGraph”. Add new project Windows Forms Control Library “ZedGraphUserControl”.

Windows Forms Control Library

2. In Visual Studio, right click on Toolbox window, then “Choose Items”

3. Browse to ZedGraph.dll, ZedGraphControl will be inserted into Toolbox. Drag and drop a ZedGraphControl on our user control.
4. Add some code to draw a graph on our user control. This code snippet I took from CodeProject link above

public partial class ZedGraphUserControl : UserControl
	public ZedGraphUserControl()
	public new int Width
		get { return zgcGraph.Width; }
		set { zgcGraph.Width = value; }
	public new int Height
		get { return zgcGraph.Height; }
		set { zgcGraph.Height = value; }
	private void CreateGraph(ZedGraphControl zgc)
		// get a reference to the GraphPane
		GraphPane myPane = zgc.GraphPane;

		// Set the Titles
		myPane.Title.Text = "My Test Graph\n(For CodeProject Sample)";
		myPane.XAxis.Title.Text = "My X Axis";
		myPane.YAxis.Title.Text = "My Y Axis";
		myPane.XAxis.Scale.MajorStep = 5;

		// Make up some data arrays based on the Sine function
		double x, y1, y2;
		PointPairList list1 = new PointPairList();
		PointPairList list2 = new PointPairList();
		for (int i = 0; i < 36; i++)
			x = (double)i + 5;
			y1 = 1.5 + Math.Sin((double)i * 0.2);
			y2 = 3.0 * (1.5 + Math.Sin((double)i * 0.2));
			list1.Add(x, y1);
			list2.Add(x, y2);

		// Generate a red curve with diamond
		// symbols, and "Porsche" in the legend
		LineItem myCurve = myPane.AddCurve("Porsche",
			  list1, System.Drawing.Color.Red, SymbolType.Diamond);

		// Generate a blue curve with circle
		// symbols, and "Piper" in the legend
		LineItem myCurve2 = myPane.AddCurve("Piper",
			  list2, System.Drawing.Color.Blue, SymbolType.Circle);

		// Tell ZedGraph to refigure the
		// axes since the data have changed

	private void SetSize()
		zgcGraph.Location = new System.Drawing.Point(10, 10);

		// Leave a small margin around the outside of the control
		zgcGraph.Size = new System.Drawing.Size((int)this.Width - 20,
								(int)this.Height - 20);

5. Add new project WPF application, in this new project add reference to System.Windows.Forms, WindowsFormsIntegration and to our user control

6. Add some code to load our user control in wpf application

WindowsFormsHost host = new WindowsFormsHost();
WindowsFormsZedGraph.ZedGraphUserControl graph = new WindowsFormsZedGraph.ZedGraphUserControl();
host.Child = graph;
this.Width = graph.Width + 2*20;
this.Height = graph.Height + 3*20;

In case that you want to access some properties of ZedGraph you can manually publish this property through defining your custom one. For example, I would like to disable the Zoom feature of graph, I can define a bool property as below

private bool enableZoom = true;
public bool EnableZoom
	get { return enableZoom; }
		if (value != enableZoom)
			enableZoom = value;
			zgcGraph.IsEnableHZoom = enableZoom;
			zgcGraph.IsEnableVZoom = enableZoom;

And set it to false in WPF application to disable zooming

WindowsFormsZedGraph.ZedGraphUserControl graph = new WindowsFormsZedGraph.ZedGraphUserControl();
graph.EnableZoom = false;

For handling Mouse-Event or anything like that we can directly handle in Windows Form Control and send result back to WPF Application. For example notifying which coordinate of a clicked point on graph

 private bool zgcGraph_MouseDownEvent(ZedGraphControl sender, MouseEventArgs e)
	double x, y;
	string message = "";
	PointF pt = (PointF)e.Location;           
	((ZedGraphControl)sender).MasterPane[0].ReverseTransform(pt, out x, out y);
	message = "Mouse Down at mouse coordinate X = " + e.X.ToString() + " and Y = " + e.Y.ToString() + Environment.NewLine;
	message += "Point coordinate on graph X = " + x.ToString() + " and Y = " + y.ToString();
	return default(bool);

2. Source code

Source code: https://bitbucket.org/hintdesk/dotnet-use-zedgraph-in-wpf-application

3. Updates

3.1 Update 21.03.2011

– New homepage link.
– Update for publishing property of graph to WPF application and handling event.

3.2 Update 02.05.2016

– Source code update because of project references.

9 thoughts on “WPF – Use ZedGraph in WPF application”

  1. Hi, i’m using Visual Studio 2013 express, and can’t find the Windows Forms Control Library neither in the new project options, nor the add file options. Can you help me?

Leave a Reply

Your email address will not be published. Required fields are marked *