http://files.channel9.msdn.com/thumbnail/94ba90ca-19b4-4604-b612-22af4bbc1ce7.png Today's post is from the one and only Sacha Barber where he takes to not only a cool diagramming solution, but in building it with MVVM and, best of all, how we could reuse it in out own applications! MVVM Diagram DesignerA 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: http://www.codeproject.com/Articles/22952/WPF-Diagram-Designer-Part-1 http://www.codeproject.com/Articles/23265/WPF-Diagram-Designer-Part-2 http://www.codeproject.com/Articles/23871/WPF-Diagram-Designer-Part-3 http://www.codeproject.com/Articles/24681/WPF-Diagram-Designer-Part-4 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. For example this is how the attached DemoApp code creates a simple diagram that is shown when you first run the DemoApp: public partial class Window1 : Window { private Window1ViewModel window1ViewModel; public Window1() { InitializeComponent(); window1ViewModel = new Window1ViewModel(); this.DataContext = window1ViewModel; this.Loaded += new RoutedEventHandler(Window1_Loaded); } /// <summary> /// This shows you how you can create diagram items in code /// </summary> void Window1_Loaded(object sender, RoutedEventArgs e) { SettingsDesignerItemViewModel item1 = new SettingsDesignerItemViewModel(); item1.Parent = window1ViewModel.DiagramViewModel; item1.Left = 100; item1.Top = 100; window1ViewModel.DiagramViewModel.Items.Add(item1); PersistDesignerItemViewModel item2 = new PersistDesignerItemViewModel(); item2.Parent = window1ViewModel.DiagramViewModel; item2.Left = 300; item2.Top = 300; window1ViewModel.DiagramViewModel.Items.Add(item2); ConnectorViewModel con1 = new ConnectorViewModel(item1.RightConnector, item2.TopConnector); con1.Parent = window1ViewModel.DiagramViewModel; window1ViewModel.DiagramViewModel.Items.Add(con1); } } As the article progresses I will show you how to use the new MVVM driven diagram designer classes in your own applications, and you could leave it right there if you wanted to, but if you want to know how it all works that will be explained in the rest of the article. ... Introduction What Does It Look Like Attached Codebase Structure How Do I Use It In My Own Applications Use It Step 1 : Creating The Raw XAML Use It Step 2 : Creating The Main ViewModel Use It Step 3 : Creating Toolbox Item DataTemplates Use It Step 4 : Creating The Diagram Item ViewModels Use It Step 5 : Creating Diagram Item Designer Surface DataTemplates Use It Step 6 : Creating Diagram Item Popup DataTemplates Use It Step 7 : Persistence What Are The Important Things To Save Saving/Hydrating A Diagram How Does The Diagram Designer Stuff Actually Work Drag And Drop To The Design Surface Binding The Items Collection Adding Connections ConnectorInfoBase/PartCreatedConnectorInfo FullyCreatedConnectorInfo ConnectorViewModel Selection/Deselection Flavour 1 : Standard Mouse Down Selection Flavour 2 : Rubberband Selection Deleting Items That's It For Now How Do I Use It In My Own ApplicationsThis section will talk you through how to create a diagram in your own application. It assumes the following That you want to use WPF things like Binding/DataTemplating/MVVM You actually want to persist / hydrate diagrams to some backing store (Like I say I chose to use RavenDB which is a no sql document database, but if this is not for you, it should be pretty easy for you to craft your own data access layer talking to your preferred SQL backend) If you want to create your own MVVM style diagram designer, I have broken it down into 7 easy steps, as long as you follow these 7 steps to the letter you should be just fine. There is also a working example of these 7 steps by way of the attached DemoApp project code, so you can examine that whilst reading this text, so hopefully you will be ok. ... I love that he takes the time to share how we can use this in our own app's. Here's a snap of it running on my system (which was easy and painless) One other thing of note is how RavenDB is used as the data store. If you've been hearing about NoSQL but haven't had a chance to see it in use, well here's you chance! It's all here in the download, nothing extra needed. en Mon, 20 May 2013 09:38:05 GMT Mon, 20 May 2013 09:38:05 GMT Rev9