MVVM Diagram Designer

A while back a user called “sucram (real name Marcus)” posted a series of articles here about how to create a diagram designer using WPF. Sucrams original links are as follows:

I remember being truly blown away by this series of articles, as they showed you how to do the following things:

  • Toolbox
  • Drag and Drop
  • Rubber band selection using Adorners
  • Resizing items using Adorners
  • Rotating items using Adorners
  • Connecting items
  • Scrollable designer surface, complete with zoombox

WOW that sounds fantastic, sounds exactly like the sort of things you would need to create a fully functional diagram designer. Well Yeah, its was and still is, but……..the thing is I have used WPF a lot, and trying to use the code attached to sucrams series of article in WPF just wasn’t that great. He had taken a very control centric view, in that everything was geared around adding new controls and supplying static styles for said controls.

In reality it was more like working with a Win Forms application. Not that there is anything wrong with that, and I really truly do not mean to sound ungrateful, as that could not be further from the truth, without that original series of articles it would have taken me a lot longer to come up with a working diagram designer that I was happy with. So for that I am truly grateful, thanks sucram you rock.

Anyway as I say sucrams original codebase took a very control centric point of view, and added controls using code behind, and held collections of items directly in the diagram surface control. As I say if that is what you want cool, however, it was not what I wanted. What I wanted was

  • All of the features of curams original code (actually I didn’t want any rotating of items, or resizing of items)
  • A more MVVM driven approach, you know allow data binding of items, delete of items via ICommand etc. etc.
  • Allow me to control the creation of an entire diagram from within a single ViewModel
  • Allow for complex objects to be added to the diagram i.e. ViewModels that I could style using DataTemplate(s). Sucrams original code only allowed simply strings to be used as a DataContext which would control what ImageSource an Image would use to show for a diagram item. I needed my items to be quite rich and allow popups to be shown and associated with the diagram item, such that the data related to the diagram item could be manipulated
  • Allow me to save the diagram to some backing store
  • Allow me to load a previously saved diagram from some backing store

To this end I have pretty much completely re-written sucrams original code, I think there is probably about 2 classes that stayed the same, there is now more code, a lot more, however from an end user experience, I think it is now dead easy to control the creation of diagrams from a centralized ViewModel, which allows a diagram to be created via well known WPF paradigms like Binding/DataTemplating.

So I decided to give this a go, you can read more about it here : http://www.codeproject.com/Articles/484616/MVVM-Diagram-Designer

 

Hope its of some use to someone

Advertisements

17 thoughts on “MVVM Diagram Designer

  1. I will check this out, but I’ve been using Northwoods GoDiagram products for a number of years (WinForms and WPF/Silverlight). The magic sauce that they include that I haven’t found anywhere open sourced is the layout logic. They have several different layout engines (digraph, tree, etc.) the implementation of which is not trivial. If you know of anyone who has any code available on how to do auto graph layouts, that would be awesome and I wouldn’t have to spend that extra $ on licenses. (Its really not that expensive, but its a hassle to manage)

    • sachabarber says:

      Yeah I used GoDiagram in past job its nice. As far as free graph algorithms, good luck with that. Very closely guarded secret. Only thing I know is research thing from Microsoft called GraphViz

      • Ko-Kim says:

        Hi,
        i have read those posts(-Diagram-Designer-) when start with a similar project as a team leader for my group a month ago when i first use c#/WPF. it’s good except for network-graph project, and not efficent enough when expand to hundreds of “designer-item”, cause it’s too ‘heavy’ use control to draw, may it use visual object to achieve better performence, and use UI virtualization. that’s my poor point, please comment. thx

      • sachabarber says:

        If you want lots of items, you should probably look at something like GraphSharp (search my blog or find it at codeplex), its a nice open source project with auto layout.

      • Ko-Kim says:

        Thx, I will

    • Ko-Kim says:

      I would like to implement such a thing(auto graph layout), i am a student, only have 3 years programming experience, and program with C#/WPF in less than 2 month, but have already created graph-software(based on WPF) for my customer, using WPF just fatasitic, and, i want do something to the open-source society using WPF, could you send me some infomation about auto graph layout or your requirements. i will do it after finish current project. Waiting for your message

  2. Sven Devriese says:

    Sweet ! I appreciate how you keep on carrying the WPF torch, even though most of the other disciples seem to have moved on (or even defected to the Dark iSide).

    • sachabarber says:

      Yeah I don’t know what most of them are up to. Certainly not iOS apart from Josh. Maybe WinRT, but I think folk are just plain busy. For me I am trying to dig into Javascript, have been doing lots of ASP MVC, and Knockout.js and want to look at Easle/Angular/Backbone/D3 and maybe even Meteor.

      I think WPF is still excellent, and think it will serve you well for writing Win8 stuff, as it’s practically the same, just different classes, all same ideas though.

      I will never become iSachaBarber, I can promise that

  3. Súper JMN says:

    Hi Sacha!

    Since I think I have no better way to get in touch with you, I’m writing a comment. I hope you don’t mind having this comment that is, in all ways, misplaced.

    First of all, I really like your statement that you will never turn into a iSachaBarber. It’s really a relief. I cannot believe Josh Smith took that step. I will keep my thoughts on that platform away. It’s off-topic 🙂

    Well, the thing is that I’m really interested in your progress with Cinch v2 and I don’t really know whether is a piece of art in elegance and in terms of design, since I didn’t dig a lot in the code, but what I cannot deny is that your Cinch framework has LOTS great work and heavy thinking.

    I have been swotting up your Cinch and I even plan to develop with it if I am able to. Be sure that, for the moment, I’m talking about it in the office at work and that I have enough weight in my company to include Cinch as the base for WPF desktop applications. I think you would like to hear that.

    I personally find it exciting enough to write you in another language (I’m from Spain) and inverting time for you to understand my far-from-native level, but yes, Cinch well deserves the attention.

    Since it uses some really good techniques and technologies (MEF is awesome, so is MEFedMVVM!) and your framework is pretty vast in extension and concepts, I would like to ask some questions.
    1) Are those DataWrappers I found in ViewModels a decision on validation? What are the their benefits?
    2) What are Workspaces in few words?
    3) In you have a parent ViewModel to show a Popup Window, will the popup have its VM injected with the attached property or is it better to make the parent window instance the child VM and provide it to the Popup? What if the Popup requires it’s own services? the parent should “discover” them having to deal not only with its dependencies, but also with dependencies required by the children.
    4) What do you think about the attributed validation in ViewModels like in ASP.NET?

    Thanks a lot and I really hope you really enjoy those days.
    Merry Christmas!!!

    Regars from Spain.

    (You can contact me via e-mail if you want: superjmn@gmail.com)

  4. ohioDeveloper says:

    Hello Sacha,

    I posted this to CodeProject, but thought it would be worth a shot to ask here as well. The code for drawing the orthogonal Connections between DesignerItems looks to be the same between both your and sucram’s projects. This works really well at drawing the lines around a source or sink DesignerItem, but will draw lines directly over other unrelated DesignerItems.

    Do you have any ideas about rewriting that algorithm so that the Connections never overlap *any* designer items? I don’t mind if Connections themselves overlap.

    I have tried querying for all DesignerItems in the DesignerCanvas, getting their rectangles as Rect[] and passing that set directly to OptimizeLinePoints() and IsPointVisible(), which in turn should pass to RectangleIntersectsLine(). While this does make the methods aware that some routes are unavailable, it hasn’t really affected the logic the way I’m hoping to, and Connection lines often still overlap DesignerItems.

  5. Sri says:

    Hi,

    Firstly, thanks a lot for such a great effort.

    Need some help related to bridging connections. Would you please through some light on that ?

    Thanks,
    Sri

    • sachabarber says:

      Not really sure what you mean by “bridging connections”

      • Sri says:

        Hi,

        I mean when two connections overlap, is there is a way to show a little curve to highlight the intersection ?

        Thanks,
        Sri.

  6. Sri says:

    Hi, Can you please throw some light on solving the above connections overlap issue ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: