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. Create a blank solution called “WPF ZedGraph”. Add new project Windows Forms Control Library “ZedGraphUserControl”.
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()
	{
		InitializeComponent();
		CreateGraph(zgcGraph);
		SetSize();
	}
	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
		zgc.AxisChange();
	}

	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;
grdMain.Children.Add(host);
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; }
	set
	{
		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();
	MessageBox.Show(message);
	return default(bool);
}   

The complete source code you can download here “WPF ZedGraph“.

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