WinForms and WPF Diagram Control (Coming soon in v15.2)

Thinking Out Loud
10 November 2015
It's that time of year again - time to talk about the new features/products we'll ship as part of v15.2.

First on my list is our new Visio inspired Diagram Control.

Before I start describing this new WinForms and WPF control, I want to ask those of you using or planning to use diagrams in a WinForms/WPF project to send an email to beta@devexpress.com. We want to engage you directly during our beta so we can better understand your needs, how you specifically use diagrams within your apps and how we can improve this product going forward.

WinForms Diagram Control - Designer

Because this is a significant control, I'm going to write a series of blog posts to detail its capabilities. For today, I'll share a few of its core options and as I mentioned a moment ago, ask active subscribers who are using diagrams to reach out to us so we can get you our beta.

Standard Operations

As you'd expect, the DevExpress Diagram Control for WinForms and WPF will support the following functionality:

  1. Drag & Drop
  2. Resizing
  3. Moving
  4. Rotation
  5. Zoom
  6. Cut/Copy/Paste
  7. Delete
  8. Undo/Redo
  9. Snap to Grid
  10. Snap to Items
  11. Animations (WinForms only - WPF will support animations in a later release)
  12. Rulers
  13. Dynamic Grid Background (grid size adjusts to zoom level)
  14. In-place Text Editing
  15. Context Menu + Popup Options Panel
Shape Collection

You can't have a diagram without shapes and in this release, we'll ship the following:

Basic Shape category - 45 shapes
Basic Flowchart Shape category - 14 shapes
SDL Diagram Shape category - 21 shapes
Arrow Shape category - 17 shapes
Software Icon category - 22
Decorative Shape category - 10 shapes

These 130 shapes support parameterization, allowing you to customize shape path. And yes, we've laid the foundation for you to define custom shapes as needed.

Connectors

DevExpress Diagram will include Visio inspired connectors (straight, curved and right angle) and automatic routing algorithms. You can also select arrow type (15 options to choose from) and its size.

===============

I'll stop there for now - please keep tuned to our website and these blogs over the next few weeks as I'll dig deeper into this new control and share more of its capabilities with you.



Free DevExpress Products – Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We’ll be happy to follow-up.
Paul Faint
Paul Faint

Nice work guys, great addition to a great toolset

10 November 2015
SAVA BILISIM SAVA
SAVA BILISIM SAVA

Greate job! Will you support adding 'controls' as well?

10 November 2015
Dave VanderWekke (Automated Wireless Environments)
Dave VanderWekke (AWE)

Looks promising.  I sent an email to beta@.

10 November 2015
Christopher Todd
Christopher Todd

WOW! I see a LOT of potential here!!

10 November 2015
Frans Bouma
Frans Bouma

I'm currently using ILog Diagramming in LLBLGen Pro's designer (ILog was bought by IBM which killed the diagramming part right after that), and I'd love to use another diagramming library instead of ILog, but the features I'm looking for don't seem to be in your product for now it seems.

What I'm after is in particular:

- a way to create my own shapes, complex ones, so you can have a shape build from other shapes, like a list of fields inside a box with a header. If you can create a basic UML editor with it, you're good to go ;)

- a way to create a diagram with my shapes and connections between them which is laid out using an algorithm (configurable) and which layout can be altered by the user (move shapes around).

IMHO there are two kinds of applications for diagramming tooling: 1) showing a diagram with custom shapes in whatever form, build by software and 2) giving the user a canvas onto which the user can create a diagram (like the one in the picture), like in visio, using simple shapes, which have a form and a text label.

Hope this helps :)

10 November 2015
Sigurd Decroos
Sigurd Decroos

Great!, now support a background image too please!

10 November 2015
Ronnie Wilkins Jr
Ronnie Wilkins Jr

Great news!  Have two projects already in mind.

10 November 2015
J Joubert
J Joubert

Great work guys. Another great addition to an already great tool set.

10 November 2015
Jan Thordsen
Jan Thordsen

Amazing, a great control, exactly what I was looking for.

10 November 2015
Heiko Mueller
Heiko Mueller

Really really great addition. Another reason why DevExpress is the right choice for me...

10 November 2015
Ian Pook
Ian Pook

Webforms?

11 November 2015
Acantops
Acantops

On what time would you release the Version 15.2?

11 November 2015
Ngo Tung
Eric Ngo

Excellent, I definitely will use this new component. I rekon to use it for visualize my workflow status. Each node should have capability to display text / picture / Badge and can handle click/ double click event.

It will be nice if we can save /restore/ parsing to xml the control layout.

11 November 2015
Ngo Tung
Eric Ngo

Any plan to implement the diagram viewer for asp.net?

11 November 2015
frank vdb
frank vdb

Cool.

It would be nice to implement a feature to implement a custom algorithm to place items on the canvas (the automatic routing algorithm?). Currently I have an app where I visualise (goods) flows. In there I use a derived Kozo Sugiyama style to determine positions of shapes and (path of) lines in order to minimise crossed lines.

It would be also nice to have a zoom control/window just like the MapControl has.

11 November 2015
Bassam Abdelaal
Bassam Abdelaal

Excellent addition , thank you

11 November 2015
Bassam Abdelaal
Bassam Abdelaal

Hope it supports writing RTL text within the shapes with no problem , even like a memo edit from left to right but the letters are still displaying correct at the end. (Im talking about Arabic language)

Thanks

11 November 2015
Steve Mol
Steve Mol

Nice start, but don't forget that we need this in ASP.Net too!

Also, in future blogs, I'm very interested in the databinding aspects.

11 November 2015
Mark Couvaras
Mark Couvaras

Great news what an addition to the suite :)

11 November 2015
DHOUIB Walid
DHOUIB Walid

It's ideal if you can link this diagram with the concept of Business Process Model (you can consult the web site www.bpmn.org) or integrate with workflow management (you can consult the web site www.processmaker.com)

11 November 2015
Vincent (GQ)
Vincent (GQ)

We're looking forward to it!

11 November 2015
slight slight
slight slight

Does it support automatic layout?

11 November 2015
Crono
Crono

W00t!

11 November 2015
HanS Fadzli
HanS Fadzli

this is great

11 November 2015
Manuel Grundner [DevExpress MVP]
Manuel Grundner

Like Ngo Tung and DHOUIB Walid,

can imagine a solution for XAF (StateMachine module) to display and edit transitions. or making an own "Windows Workflow" module, without the overhead of WF4 (and its pitfalls).

Processes are hard to visualize (and edit) so it would be cool to "validate" a node when a connection is made.

As always, awesome work guys!

11 November 2015
renejdm
renejdm

This is really great. I can think of some great enhancements to my current application with some modifications.

Will you attach events to each shape and path?

13 November 2015
Tin-Kai Chan
Tin-Kai Chan

I'm so looking forward to using this new control. Great job!!

Actually I'm looking for a third party's diagram control as there is no one from DevExpress yet. My plan is combine "state machine" from Xaf with a GUI to visualize tasks and transitions for users. How about this?

14 November 2015
Alex Chuev (DevExpress)
Alex Chuev (DevExpress)

Hi guys,

We appreciate all the comments in this blog post and share your feedback with our development team. In the meantime, discussing each of the requirements here would only create a mess in the comments. If you want to make sure that a specific feature is supported or want to share your requirement with us, please feel free to write us at beta@devexpress.com.

Thanks,

Alex

16 November 2015
Ruben Ruvalcaba Camba
Ruben Ruvalcaba Camba

Excelent! Congrats it's a great addition

18 November 2015
Dan 2015
Dan 2015

As some others have mentioned:

- Integrate with Business Process Management

- Make available in ASP.NET MVC

- Integrate with Windows Workflow

18 November 2015
Jörg Boekhoff
Jörg Boekhoff

Was waiting for such a control for long. You are doing a really great job.

18 November 2015
Maen Baghdadi
Maen Baghdadi

Our plan is to use them in generating our company organogram or building it dynamically from HR data stored.

thanks for the feature, looking forward to improving it

19 November 2015
Dan 2015
Dan 2015

Automatically generating org chart off related data would be wonderful.

27 November 2015
Lothar Behrens - Lollisoft
Lothar Behrens - Lollisoft

I would like to say - yeah - great. Some features I like, if not yet implemented:

* Add support for custom controls within a shape (a container)

* Add layout interface, so anyone can provide algorithms

* Add BPM shapes and swimlanes

* Add a grid shape so it will be easy to extend upon it (UML shapes)

* Add layers

I plan to use it for my modeldriven stuff and add a nice graphical representation.

@lollisoft

5 December 2015
Piotr (The Timken Company)
Piotr (The Timken Company)

Great work

Please support an image in items and support org diagram with image

16 December 2015
Kelly Campbell
Kelly Campbell

We have a home brew tool in our app.  It is for in house work and so ... its pretty rough.  Our application is slightly different but its a close fit: visualized construction and monitoring of objects and connections between those objects.

Many of the same concepts apply,

1) drop on custom shapes that represent different widgets

2) connect shapes with directed edges

3) set fields / configure the widgets

4) auto-layout of the shapes based on connections between shapes

This kind of applications needs:

1) graph routing or perhaps more flexible, a mechanism on which we could add custom auto-layout of the shapes and edges en.wikipedia.org/.../Graph_drawing

2) would be nice:  animated shapes.  Ability to add independent text fields to each shape that we can update on a timer.  Ability to animate visual indicators on the shapes - grouped shapes?

16 December 2015
MichalH
MichalH

Thanks for your work.

I vote for implementation in ASP.NET too...

20 February 2016

Please login or register to post comments.