MindFusion Diagram Component for Xamarin Beta Version

MindFusion is pleased to announce the first release of its Diagramming component for Xamarin. The control is packed with a comprehensive set of features that allows programmers to create, modify and render various types of diagrams fast and easy.

Among its core features are table and container nodes, tree nodes, shape library with a rich choice of predefined node shapes, diagram links with various arrowhead styles and different connector types – Bezier, straight, polyline.

Each Xamarin diagram you build with the component is fully interactive – users can drag, move, resize, create and delete all types of nodes and links. The control fires events for the tiniest user gestures so your software can perform the necessary operations as a result. The event set includes every single action – from editing a link to deleting a node.

The chart’s appearance is fully customizable. Each element of the diagram exposes its complete set of style settings like brush, pen, font, which give you full control over its looks. You can apply glass and aero visual effects for glossier look.

You can organize content in layers for better visualization and use a grid for more precise location and alignment of diagram elements. Ready flowcharts can be quickly persisted into XML with the call of a single method.

We invite you to test the initial MindFusion Diagramming for Xamarin Release. Direct download is available from this link:

Download MindFusion Flowchart Component for Xamarin Beta Version

The download includes a sample project and detailed API reference.

Your questions, comments and feedback are welcomed. Use email support@mindfusion.eu or write at our discussion board. Either way we’ll be glad to receive and answer your feedback!

MindFusion Diagram control for Xamarin

MindFusion Diagram control for Xamarin

Create diagram connectors using drag and drop

In this post we show how to create diagram links via drag-and-drop operation from a NodeListView used as a palette. Since the NodeListView control can contain only DiagramNode objects, we will create a custom node shape representing a connector. Once the dummy connector node is created, the NodeCreated event handler will replace it with a DiagramLink. In addition, the handler will find nearby nodes and automatically connect the link to them.

Let’s start with a new WPF project. Add a reference to mindfusion.diagramming.dll, and add Diagram and NodeListView controls to the window:



In the Window constructor, create a custom node shape that will represent connectors:

var connectorShape = new Shape(
	null, // no borders
	new[] // decorations
		new LineTemplate(10, 10, 10, 50),
		new LineTemplate(10, 50, 90, 50),
		new LineTemplate(90, 50, 90, 90)
	FillRule.Nonzero, "Connector");

Add a few nodes to the NodeListView, along with the dummy connector node:

var item1 = new ShapeNode { Shape = Shapes.Rectangle };
NodeListView.SetLabel(item1, "Activity");

var item2 = new ShapeNode { Shape = Shapes.Decision };
NodeListView.SetLabel(item2, "Decision");

var item3 = new ShapeNode { Shape = connectorShape };
NodeListView.SetLabel(item3, "Connector");

In the NodeCreated event handler, check if the newly created node represents a connector, and replace it with a DiagramLink:

var node = e.Node as ShapeNode;
if (node != null)
	if (node.Shape.Id == "Connector")
		// replace the dummy connector node with a DiagramLink
		var bounds = node.Bounds;

		var link = diagram.Factory.CreateDiagramLink(
			bounds.TopLeft, bounds.BottomRight);
		link.SegmentCount = 3;
		link.Shape = LinkShape.Cascading;


Otherwise if it is a regular node, set its anchor points and connect it to nearby unconnected links, if there are any:

	node.AnchorPattern = AnchorPattern.Decision2In2Out;
	node.Effects.Add(new GlassEffect());

The ConnectToNearbyNode method uses a LINQ query to find nodes in the vicinity of the link’s start or end point. If one is found at a distance shorter than 120 points, it is set as the link’s Origin or Destination.

private void ConnectToNearbyNode(DiagramLink link)
	// connect to a nearby origin node
	var origin = diagram.Nodes.OrderBy(n =>
		Utilities.Distance(n.GetCenter(), link.StartPoint)).FirstOrDefault();

	if (origin != null)
		var distance = Utilities.Distance(origin.GetCenter(), link.StartPoint);
		if (distance < 120)
			link.Origin = origin;

	// connect to a nearby destination node
	var destination = diagram.Nodes.Where(n => n != origin).OrderBy(n =>
		Utilities.Distance(n.GetCenter(), link.EndPoint)).FirstOrDefault();

	if (destination != null)
		var distance = Utilities.Distance(destination.GetCenter(), link.EndPoint);
		if (distance < 120)
			link.Destination = destination;

Similarly, the ConnectToNearbyLink method finds a nearby unconnected link and sets the specified node as the link’s Origin or Destination.

private void ConnectToNearbyLink(DiagramNode node)
	var outLink = diagram.Links.Where(l => l.Origin is DummyNode).OrderBy(l =>
		Utilities.Distance(node.GetCenter(), l.StartPoint)).FirstOrDefault();

	if (outLink != null)
		var distance = Utilities.Distance(node.GetCenter(), outLink.StartPoint);
		if (distance < 90)
			outLink.Origin = node;

	var inLink = diagram.Links.Where(l => l.Destination is DummyNode).OrderBy(l =>
		Utilities.Distance(node.GetCenter(), l.EndPoint)).FirstOrDefault();

	if (inLink != null)
		var distance = Utilities.Distance(node.GetCenter(), inLink.EndPoint);
		if (distance < 90)
			inLink.Destination = node;

The result of several drag and drop operation is displayed below.

The complete sample project is available for download here: