Thinking Out Loud

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

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.



Published Nov 10 2015, 08:40 PM by
Bookmark and Share

Comments

Paul Faint

Nice work guys, great addition to a great toolset

November 10, 2015 11:02 AM

SAVA BILISIM SAVA

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

November 10, 2015 11:41 AM

Dave VanderWekke (Automated Wireless Environments)

Looks promising.  I sent an email to beta@.

November 10, 2015 12:34 PM

Christopher D. Todd

WOW! I see a LOT of potential here!!

November 10, 2015 12:41 PM

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 :)

November 10, 2015 12:47 PM

Sigurd Decroos

Great!, now support a background image too please!

November 10, 2015 5:09 PM

Ronnie Wilkins Jr

Great news!  Have two projects already in mind.

November 10, 2015 9:02 PM

J Joubert

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

November 10, 2015 9:04 PM

Jan Thordsen

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

November 10, 2015 10:25 PM

Heiko Mueller

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

November 10, 2015 11:38 PM

Ian Pook

Webforms?

November 11, 2015 12:03 AM

Acantops

On what time would you release the Version 15.2?

November 11, 2015 12:19 AM

Ngo Tung

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.

November 11, 2015 12:42 AM

Ngo Tung

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

November 11, 2015 12:46 AM

frank van den bergh

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.

November 11, 2015 2:11 AM

Bassam Abdelaal

Excellent addition , thank you

November 11, 2015 2:32 AM

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

November 11, 2015 2:38 AM

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.

November 11, 2015 2:39 AM

Mark Couvaras

Great news what an addition to the suite :)

November 11, 2015 2:46 AM

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)

November 11, 2015 3:25 AM

vb_gq

We're looking forward to it!

November 11, 2015 4:23 AM

slight slight

Does it support automatic layout?

November 11, 2015 4:41 AM

Crono

W00t!

November 11, 2015 6:02 AM

HanS Fadzli

this is great

November 11, 2015 6:37 AM

Manuel Grundner [DevExpress MVP]

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!

November 11, 2015 10:11 AM

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?

November 13, 2015 8:18 AM

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?

November 14, 2015 2:26 AM

Alexander Ch (DevExpress Support)

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

November 16, 2015 5:06 AM

Ruben Ruvalcaba Camba

Excelent! Congrats it's a great addition

November 18, 2015 4:15 PM

Dan 2015

As some others have mentioned:

- Integrate with Business Process Management

- Make available in ASP.NET MVC

- Integrate with Windows Workflow

November 18, 2015 5:48 PM

Jörg Boekhoff

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

November 18, 2015 10:11 PM

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

November 19, 2015 4:01 AM

Dan 2015

Automatically generating org chart off related data would be wonderful.

November 27, 2015 11:42 PM

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

December 5, 2015 10:01 AM

Piotr (The Timken Company)

Great work

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

December 16, 2015 3:39 AM

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?

December 16, 2015 7:43 AM

MichalH

Thanks for your work.

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

February 20, 2016 2:13 AM
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2017 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners