In this post we take a deeper look at a new update in the Telerik UI for WPF Diagram Framework, the Diagram Ribbon and its new and improved ability to avoid overlapping connections.
With the latest release of Telerik UI for WPF, we introduced .NET Core 3.0 support, two new controls (NavigationView & HyperlinkButton), as well as a variety of new features and improvements to the toolkitk including the Diagram Ribbon.
In the next few paragraphs, we will go over the newest features and functionalities of the WPF Diagram framework by focusing on the Diagram Ribbon and Smart Routing.
Ever wonder how cool it would be to have a ribbon control which exposes the different functionalities of the Diagram Framework, like: save/load, printing, setting the selection mode, adding bridges to the connections etc. Search no more!
In the latest version of Telerik UI for WPF we introduced the RadDiagramRibbon. This control is a predefined, fully customizable and ready-to-use RibbonView, providing UI for the most common features and settings of RadDiagram. The control can be easily configured and wired to RadDiagram using a design-time wizard. With a click of a button, now you can have different kind of settings of the RadDiagram Framework combined in one control.
The DiagramRibbon contains three tabs which hold the most used features of the Diagram.
You can plug three other components of the Diagram framework (RadDiagramToolBox, RadNavigationPane, RadDiagramRuler). Using the checkbox in the View section, you can set which extensions to show or hide.
Cool, isn't it?
<
telerik:RadDiagram
x:Name
=
"diagram"
/>
<
telerik:RadDiagramRibbon
Diagram
=
"{Binding ElementName=diagram}"
>
<
telerik:RadRibbonTab
Header
=
"Custom Tab"
>
<
telerik:RadRibbonGroup
Header
=
"Extend Clipboard"
>
<
telerik:RadRibbonSplitButton
Text
=
"Paste"
>
<
telerik:RadRibbonSplitButton.DropDownContent
>
<
telerik:RadMenu
>
<
telerik:RadMenuItem
Header
=
"Paste"
/>
<
telerik:RadMenuItem
Header
=
"Paste from"
/>
</
telerik:RadMenu
>
</
telerik:RadRibbonSplitButton.DropDownContent
>
</
telerik:RadRibbonSplitButton
>
</
telerik:RadRibbonGroup
>
</
telerik:RadRibbonTab
>
</
telerik:RadDiagramRibbon
>
Using the above code snippet, you will get the following visualization.
For more information, please refer to the Overview help article of Diagram Ribbon.
Wait, there is more!
In a complex scenario where a large number of shapes and connections are used, it is hard to understand the relation between the shapes when connections overlap. Our team struggled to reduce these overlaps, but yes, we did it. Improvements were made to the AStarRouter algorithm implementation to cut down on such cases. The new AvoidConnectionOverlap property will enable the AStar algorithm to add a penalty for connection segments overlapping, thus trying to minimize the total number of such 'hard-to-follow' connections.
For better configuration of the algorithm we added three more properties to the AStarRouter: ShapeCrossPenalty, SegmentOverlapPenalty, and SegmentOverlapDistance:
More information about the routing mechanism of the RadDiagram can be found in the Routing help article in our documentation.
Feel free to drop us a comment below sharing your thoughts about the new goodies in the Diagram Framework. Or visit our Feedback portal for Telerik UI for WPF and let us know if you have any suggestions or if you need any particular features/controls which you expect our RadDiagram to have.
And if you haven’t already had a chance to try our UI toolkits, simply download a trial version from the button below:
Telerik UI for WPF
In case you missed it, here are some of the updates from our last release.
Dinko Krastev is a Technical Support Engineer and part of the Progress Telerik UI for WPF team in Sofia, Bulgaria. He is very passionate about his work. In his free time, he likes to travel with his family by visiting new places around the world.