Create curved connections

The original connections in the WPF Diagram Designer are nice. But wouldn’t it be cool to have curved connections like in the screenshot below? This tutorial will show you how to achieve it!

WPF Diagram Designer Curved Connections Image

The path is rendered on two places within the solution. Normally it is rendered in Connection.cs in the method UpdatePathGeometry, but if you drag a new connection, then in the file ConnectionAdorner.cs the method GetPathGeometry is executed.

Pre-Requisite

WPF does not come along with an easy to use solution to draw PathFigures with rounded corners. Fortunately there exists a project on CodeProject, which solves exactly this. You can find it under: http://www.codeproject.com/Articles/128705/WPF-rounded-corners-polygon

Please download the sourcecode and follow these steps:

  1. Copy the file RoundedCornersPolygon.cs to your DiagramDesigner-solution.
  2. Unfortunatly there’s a little bug in this class, which we need to fix. Locate both the GetPointAtDistance– and the GetPointAtDistancePercent method at the bottom of the class. Right after the lines starting with double rap = firstPoint ? add the following piece of code to prevent an error, when divisions by zero occures:
    if (double.IsNaN(rap))
    {
    	rap = 0;
    }
    

Change the ConnectorAdorner

  1. Open the file ConnectionAdorner.cs
  2. Find the method GetPathGeometry
  3. Uncomment the lines like in the example below:
    // PathFigure figure = new PathFigure();
    // figure.StartPoint = pathPoints[0];
    // pathPoints.Remove(pathPoints[0]);
    // figure.Segments.Add(new PolyLineSegment(pathPoints, true));
    // geometry.Figures.Add(figure);
    
  4. Right below the uncommented lines, add the following code:
    RoundedCornersPolygon rcp = new RoundedCornersPolygon();
    rcp.ArcRoundness = 20;
    foreach (Point p in pathPoints)
        rcp.Points.Add(p);
    
    geometry = (PathGeometry)rcp.Data;
    

Change the Connection

  1. Open the file Connection.cs
  2. Find the method UpdatePathGeometry
  3. Uncomment the lines like in the example below:
    // PathFigure figure = new PathFigure();
    // figure.StartPoint = linePoints[0];
    // linePoints.Remove(linePoints[0]);
    // figure.Segments.Add(new PolyLineSegment(linePoints, true));
    // geometry.Figures.Add(figure);
    
    // this.PathGeometry = geometry;
    
  4. Right below the uncommented lines, add the following code:
    RoundedCornersPolygon rcp = new RoundedCornersPolygon();
    rcp.ArcRoundness = 20;
    foreach (Point p in linePoints)
        rcp.Points.Add(p);
    
    this.PathGeometry = (PathGeometry)rcp.Data;
    

Now start the WPF Diagram Designer again, drag two items on the designer and connect them. Now if everything is fine you should see connections like on the screenshot above!


5 thoughts on “Create curved connections

      1. Jok

        Thank you Peter… but here i have a serious probleme, cause when i Create curved connections with your code!!… when i connecte two Designer item with this Connector and if i select this 2 designer items ( 2 designerItems connected with your Curved connection ) and try to move it in the canvas(again and again) i have this exception:
        Layout measurement override of element ‘System.Windows.Controls.Grid’ should not return NaN values as its DesiredSize.

        Can you resolve this problem please :).

        1. Peter

          Ok, that was a hard one! Even tough the solution is simple, I was looking at the wrong place first. The problem occured because of divisions by zero. I fixed it in the Pre-Requisites steps, please follow them to fix the problem.

Comments are closed.