Basic 2D graphics library

Question

I'm looking for a basic graphics library/framework/package (for .NET) that would allow me to create simple 2D diagrams similar to those displayed in Visual Studio Code Maps:
_{(source: microsoft.com)}
.
Is there anyway to determine what technology was used to develop the Code Maps application?

My goal is to implement a lightweight animated graphical display of a Finite State Machine to support the debugging of a simulation application. I'm guessing Code Maps was written in WPF, but unfortunately the developers on my team don't have any WPF/XAML experience, so I am hesitant to invest in that learning curve if a simpler approach is available. Can anybody point me to any other libraries that can help me build a simple custom GUI like this?

Related Questions:

C# 2d interactive graphics library - answers focus on WPF and XNA, but as I said, I'm looking for something a bit more approachable (read: quicker turn-around for non-experienced devs).
How do I draw simple graphics in C#? - 5 year old answers which recommend System.Drawing and GDI+. That's a bit too low-level for us at this point.

There is a diagram designer project on codeproject which might be useful http://www.codeproject.com/Articles/24681/WPF-Diagram-Designer-Part-4. Apart from that your question is off-topic on SO unfortunately (see point 5 here: http://stackoverflow.com/help/on-topic) — ChrisWue, Oct 02 '13 at 18:24
To be honest that would be so trivial to draw with gdi+ there really isn't much need to use a library. The only tricky thing to work out is how to add arrow heads at the correct angle, and the maths involved in that is easy and not hard to look up on the net. Why not treat it as a chance to learn something and do it yourself? — Jason Williams, Oct 02 '13 at 19:27
@JasonWilliams: Thanks for the suggestion. (I've actually used GDI back in my MFC days so I am familiar with that approach.) But I over-simplified the requirements in my original post. If you look at the Code Maps example, each box can be dragged and the arrows reorient themselves automatically, curving to avoid collisions; there are built-in graph-layout algorithms as well. Yes, I could definitely do all that with GDI (and it would be fun too!) But with the time-constraints on this project, I was hoping to find a library that provided some of that functionality out of the box. — kmote, Oct 02 '13 at 20:44
@JasonWilliams - drawing is easy, but determining what and where to draw is far from being trivial in the general case. Graph layout is a whole area of maths and computer science: http://en.wikipedia.org/wiki/Graph_drawing — Simon Mourier, Oct 02 '13 at 20:47
You will suffer more from winforms' incapabilities than the time you need to learn to do this in WPF. Check my examples [1](http://stackoverflow.com/a/15580293/643085) [2](http://stackoverflow.com/a/15469477/643085) [3](http://stackoverflow.com/a/15821573/643085) [4](http://stackoverflow.com/a/16947081/643085) on Diagram drawing and the like. — Federico Berasategui, Oct 02 '13 at 20:52
winforms is useless. GDI+ is not appropiate for what you need. WPF is not "harder to learn" than the many horrendous procedural "owner draw" hacks you need to do anything with it. WPF is the way to go, for this and for any other Windows applications. — Federico Berasategui, Oct 02 '13 at 20:53
@Steve check my example number 3, then try to come up with a non-WPF similar thing in less than 100 lines of code. — Federico Berasategui, Oct 02 '13 at 21:00
@SimonMourier, kmote: Apologies, I misread the question as "I want to draw a display like this" rather than "I want a directed graph layout algorithm". — Jason Williams, Oct 02 '13 at 22:47

score 4 · Accepted Answer · edited May 23 '17 at 12:17

4

There's no need to either suffer the hellish torment and pain involved in doing anything like that in winforms, nor paying $$$$ amounts for third-party solutions.

Here is my simple, less-than 100 lines of code approach for such a thing (full source code included).

enter image description here

It doesn't have the "automatic layout" algorithms, but the UI is well-separated from the data and logic, by implementing MVVM. Therefore it should be easy for you to create your own layout logic.

Forget winforms. it's useless.

unfortunately the developers on my team don't have any WPF/XAML experience

This might be a really good chance to learn it. And be free from the many limitations imposed by ancient technologies.

Once you know and learn the power of XAML and WPF's DataBinding, you will NEVER want to go back to crappy procedural winforms. Seriously.

The simplicity, maintainability, and cleanliness provided by (correctly implemented) MVVM is by far more than anything you can ever hope to achieve in winforms, or anything else.

edited May 23 '17 at 12:17

Community

1
1

answered Oct 02 '13 at 21:08

Federico Berasategui

43,562
11
100
154

Your code is causing [this error](https://connect.microsoft.com/VisualStudio/feedback/details/660141/visual-studio-2010-invalidoperationexception-using-x-reference-in-wpf) (use of x:Reference requires INameResolver service). The posted workarounds dont help. Is there an alternative for using x:Reference in your XAML? – kmote Oct 14 '13 at 17:56
@kmote I really have no idea, because I don't use the Visual Studio designer at all. If you F5 it will work just fine. There's no need for designer stuff in WPF. I you really need to make the designer work you will have to find a way to populate the `CollectionContainer`s with data from the `Window.DataContext` without using `{x:Reference}`. I don't know how to do that. Still, since the nature of the UI in my example is completely dynamic, the Visual Studio designer won't probably show anything useful. – Federico Berasategui Oct 14 '13 at 21:35

score 3 · Answer 2 · answered Oct 02 '13 at 20:45

I suppose what was used is this technology from Microsoft Research: Microsoft Automatic Graph Layout

MSAGL is a .NET tool for graph layout and viewing. It was developed in Microsoft Research by Lev Nachmanson. MSAGL is built on the principle of the Sugiyama scheme; it produces so called layered, or hierarchical layouts. This kind of a layout naturally applies to graphs with some flow of information. For example, the graph could represent a control flow graph of a program, a state machine, or a C++ class hierarchy.

If you're an MSDN subscriber, you can have it for free (to be checked), otherwise it's a commercial package.

I had read about MSAGL, and knew it comes with VS2012 Ultimate (which I don't have), but didn't know it could be purchased separately. (I finally found [that link](http://www.microsoftstore.com/store/msusa/en_US/pdp/Automatic-Graph-Layout-2007/productID.253652400) though.) But I'm not sure I'm ready to plunk down the chunk of change without knowing more about it. Wish there was an evaluation version available. — kmote, Oct 02 '13 at 22:21

Basic 2D graphics library

2 Answers2