WPF/WinForms - Diagram Control - Presentation Features (v18.2)

Great news – our v18.2 release includes three highly requested features for both our WinForms and WPF Diagram Controls: a new Diagram View only mode, a Pan & Zoom Panel and the ability to split Right-Angle connectors.

Diagram Viewer

Many of you want to use the Diagram Control for presentation purposes only, and to prevent end-users from making unwanted changes. Before v18.2 this could only be achieved using events and item properties, which was a time-consuming process.

In v18.2, turning the Diagram Designer into a Diagram Viewer is as easy as flipping a switch. We have added a set of properties that allow you to disable modification operations for the user selectively, and by setting IsReadOnly (that’s DiagramControl.IsReadOnly in WPF and DiagramControl.OptionsProtection.IsReadOnly in WinForms) you disable all such operations at once. Ribbon and context menu elements associated with the restricted user actions are automatically hidden.

Here are the details about the new properties for WinForms, and here is the equivalent documentation for WPF.

Diagram Viewer

Pan and Zoom Panel

The Pan and Zoom panel works as a minimap that helps users navigate large and complex diagrams. The panel can be resized and placed anywhere on screen. It is interactive so users can drag or resize the box that indicates the visible region of the diagram to fine-tune it, or draw a rectangle for the region they want to zoom into.

Pan and Zoom Panel

End-users can invoke the panel from the Ribbon. If you don’t want to add a Ribbon to your Diagram, you can integrate your own Pan and Zoom panel using the standalone PanAndZoomControl.

Pan and Zoom in the Ribbon

WinForms documentation for the Pan and Zoom Panel is here, and this is the WPF equivalent.

Splitting the RightAngle Connector

The most popular request we received from you was a seemingly small item that turned out to have a big effect. Multiple right-angle connectors that originate from the same point were overlapping so it was occasionally not obvious which shapes were connected. This issue fit in with our “presentation” focus since it influences how easily diagrams can be understood.

To resolve the problem, we added options that allow you to split connectors and specify the minimum distance between them to avoid overlapping lines.

Diagram Connectors

Please Let Us Know Your Thoughts

All the features described in this post go back to your feedback! We are always interested to hear more – what do you think about the changes we made? Do you have additional scenarios in mind where we need to improve our Diagram Control?

5 comment(s)
Marcel Boom

Nice!

However, I need an option that allows the user to select an element, but nothing more. So no changes, no dragging, adding or similar. I also want to limit the selection to certain objects.

The use case is, that I want to show a process flow and the user can select an element of the process at which time the application shows more information on the process and the rules that apply to go to another state in the process. So I don’t want the user to select arrows or other stuff, just the (in this case) squares that represent states in the flow.

Is this something that can be accomplished easily in the new version?

7 November, 2018
Michael Proctor [DX-Squad]

I second Marcel, I am looking to try and use the diagram control for a similar use case where I can visual a process and then each level of the process gives detail in a pane which will most likely be a RichText edit so it can store procedures etc.

I haven't gotten into the DiagramControl yet but it looks great.

7 November, 2018
Andrey Makhorin

Good job! Thanks!

It will be nice to add ability to rotate whole group of items around common center.

7 November, 2018
Steve Sharkey

Great addition... but not only can I agree whole heartedly with Marcel but I would also like to be able to disable changes (additions, editing and deletions) to a diagram BUT allow the user to drag elements of the diagram and save this layout.

Many of the auto layout options don't quite give me (or my users) the clarity we'd like. I wrote a utility that creates a diagram from a 3rd part systems bespoke workflow system (okay from the data). These can be quite complex and no matter what automatic layout option is selected it doesn't quite do it for my customers (though it is a good starting point).

8 November, 2018
Alex Chuev (DevExpress Support)

Marcel:

In addition to the IsReadOnly property, the Diagram control provides individual properties that specify which actions should be allowed (AllowAddRemoveItems, AllowMoveItems, AllowEditItems, etc.). You can also ban actions for specific items. For example, set the AllowSelect property for all DiagramConnectors. Take a look at the following article for more details: Managing Items Interaction.

In v18.2, we have also implemented three additional selection modes (Multiple, Single, and None) for the Diagram control. You can now configure whether your users can select multiple items at once and how they can do this (using single mouse clicks or the selection rectangle).

Andrey:

It is possible to rotate a group of items both from the UI and in code. Feel free to contact us in the Support Center for more details.

Steve:

While the Diagram control provides the most common automatic layout options, I realize that they may not be sufficient for some scenarios. This is why we created the API that allows you to connect the Diagram control to an external layout algorithm and arrange shapes manually (see How to use custom graph layout algorithms to arrange shapes in DiagramControl).

If you think that your use case should be supported by built-in layout algorithms, please contact me in the Support Center or at wpfteam@devexpress.com and describe your use case (an XML file of your diagram would be ideal).

9 November, 2018

Please login or register to post comments.