We believe the RadDiagram has the functionality you need built-in. In order to make the connections with right angles, you first need to set RouteConnections
of the RadDiagram to True. When you make a connection, the ConnectorTool of the RadDiagram is the current mouse too
l. Actually you are also able to set the diagrams ActiveTool property to Conenctor tool and you will be able to create connections on mousedown + mouse move. To switch to the normal tool just set ActiveTool to PointerTool.
The RadDiagram has built-in connection router but we believe the AStarRouter is better, you can set it like so in code behind:
Router is active when the connection you make has attached source (some diagram shape) and FreeRouter is when your connection has no source (and no target attached). The AStarRouter will try to move the connection between the shapes.
You can play with the described features in the attached project. Please let us know if this is what you expect.
On a side note, we wanted to mention that the diagram does not have built-in feature to support connecting different connections runtime as it is shown in your video.
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.