Popular Posts


Mvvm Diagram Fashion Designer

Post a Comment

Download demo codeTable of ContentsIntroduction What Does It Look Like Attached Codebase Structure How Do I Use It In My Own ApplicationsUse It Step 1: Creating the Raw XAMLUse It Step 2: Creating the Main ViewModelUse It Step three: Creating Toolbox Item DataTemplatesUse It Step 4: Creating the Diagram Item ViewModelsUse It Step 5: Creating Diagram Item Designer Surface DataTemplatesUse It Step 6: Creating Diagram Item Popup DataTemplatesUse It Step 7: PersistenceWhat are the Important Things to SaveSaving/Hydrating A Diagram How Does the Diagram Designer Stuff Actually WorkDrag and Drop to the Design SurfaceBinding the Items CollectionAdding ConnectionsConnectorInfoBase/PartCreatedConnectorInfoFullyCreatedConnectorInfoConnectorViewModelSelection/DeselectionFlavour 1: Standard Mouse Down SelectionFlavour 2: Rubberband SelectionDeleting Items That's It For NowIntroduction

A while returned a consumer referred to as "sucram (actual call Marcus)"  published a chain of articles here about a way to create a diagram designer the usage of WPF. Sucram's original hyperlinks 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-three http://www.codeproject.com/Articles/24681/WPF-Diagram-Designer-Part-4

I consider being clearly blown away through this series of articles, as they confirmed you how to do the subsequent matters:Toolbox Drag and Drop Rubber band selection the use of Adorners Resizing items the use of Adorners Rotating gadgets the usage of Adorners Connecting objects Scrollable designer floor, whole with zoombox

Wow, that sounds remarkable, sounds exactly like the kind of factors you would need to create a fully practical diagram designer. Well yeah, it became and nonetheless is, but........the aspect is I even have used WPF loads, and trying to use the code attached to sucram's series of articles in WPF simply wasn't that extremely good. He had taken a totally control centric view, in that the whole lot turned into geared round including new controls and imparting static patterns for said controls.

In reality it become extra like running with a WinForms software. Not that there may be something incorrect with that, and I sincerely surely do now not mean to sound ungrateful, as that could not be further from the reality, without that unique collection of articles it would have taken me lots longer to provide you with a running diagram clothier that I was satisfied with. So for that I am really grateful, thanks sucram, you rock.

Anyway, as I say, sucram's authentic codebase took a very manage centric factor of view, and brought controls the use of code in the back of, and held collections of items without delay in the diagram floor control. As I say, if that's what you need, cool, but, it changed into not what I desired. What I wanted changed into:All of the features of sucram's original code (truely I didn't need any rotating of items, or resizing of gadgets). A greater MVVM driven technique, , allow statistics binding of objects, delete items thru ICommand and many others. etc. Allow me to govern the advent of an entire diagram from within a single ViewModel Allow for complex items to be brought to the diagram, i.e., ViewModels that I should style using DataTemplate(s). sucram's authentic code simplest allowed honestly strings for use as a DataContext which would manipulate what ImageSource an Image might use to expose for a diagram object. I needed my objects to be pretty rich and allow popups to be proven and related to the diagram item, such that the records related to the diagram object can be manipulated. Allow me to keep the diagram to some backing shop. Allow me to load a previously stored diagram from a few backing save.

To this quit, I even have pretty a lot completely re-written sucram's authentic code, I suppose there are in all likelihood aboutlessons that stayed the identical, there may be now extra code, lots extra, but from an stop consumer experience, I suppose it is now lifeless smooth to control the advent of diagrams from a centralized ViewModel, which lets in a diagram to be created via widely recognized WPF paradigms like Binding/DataTemplating.

For instance, that is how the connected DemoApp code creates a easy diagram this is proven whilst you first run the DemoApp:public partial class Window1 : Windowprivate Window1ViewModel window1ViewModel;public Window1()InitializeComponent();window1ViewModel = new Window1ViewModel();this.DataContext = window1ViewModel;this.Loaded += new RoutedEventHandler(Window1_Loaded);void Window1_Loaded(item sender, RoutedEventArgs e)SettingsDesignerItemViewModel item1 = new SettingsDesignerItemViewModel();item1.Parent = window1ViewModel.DiagramViewModel;item1.Left = a hundred;item1.Top = one hundred;window1ViewModel.DiagramViewModel.Items.Add(item1);PersistDesignerItemViewModel item2 = new PersistDesignerItemViewModel();item2.Parent = window1ViewModel.DiagramViewModel;item2.Left = three hundred;item2.Top = three hundred;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 display you how to use the brand new MVVM pushed diagram clothier classes for your own applications, and you can leave it right there if you desired to, however if you need to understand how it all works, a good way to be explained within the rest of the article.What Does It Look Like

This is quite interesting, as in case you study the screenshot under and examine that to the final article that sucram produces, you in all likelihood may not see any difference, which as I formerly stated became intentional. I think sucram actually nailed it, I just wanted a more WPF fashion codebase, one which supported Binding and so forth. etc., so yeah I ought to admit you could without difficulty look at this screenshot and think "Bah humbug......that is precisely the identical", nicely sure, visually talking I guess it is, however the code could be very very extraordinary, and the way in that you paintings with the diagram may be very exceptional. Anyway, sufficient chat, here is a screenshot.

Click the photograph to look a bigger version

So there you pass, as I say not a lot trade visually, oh the popup idea to control a diagram object's information is a brand new one. We will talk why I wanted this later, and the way you too can make use of this mechanism.Attached Codebase Structure

The connected demo code is break up into four initiatives, which are proven beneath:

DemoAppThis task is an indication assignment, and is a great example of how to create your very own diagram designer. It is a totally functioning demo, and additionally demonstrates persisting/hydrating using RavenDB that is a NoSQL file database (as I could not be troubled writing hundreds of SQL).DemoApp.Persistence.CommonPersistence commonplace lessons, utilized by DemoApp.DemoApp.Persistence.RavenDBI decided to apply RavenDB for endurance which is a NoSQL database that lets in uncooked C# objects to be saved. I decided to try this as I truely could not be afflicted to create all of the SQL to shop/hydrate diagrams, and I simply wanted to get some thing up and going for walks ASAP.

Though if you use SQL Server/MySQL etc. and so on., it must be pretty smooth to create the stored techniques/statistics get entry to layer that talks to your selected SQL database.DiagramDesignerThis mission carries the middle instructions which might be had to create a diagram in WPF.How Do I Use It In My Own Applications

This section will talk you via a way to create a diagram to your own application. It assumes the following:That you need to use WPF such things as Binding/DataTemplating/MVVM You genuinely need to persist / hydrate diagrams to a few backing shop (like I say I chose to use RavenDB which is a no SQL record database, however if this is not for you, it ought to be pretty easy in order to craft your own facts access layer speaking to your selected SQL backend)

If you need to create your own MVVM style diagram designer, I have damaged it down into seven easy steps, as long as you comply with those seven steps to the letter, you ought to be simply great. There is also a living proof of those seven steps via way of the attached DemoApp assignment code, so that you can have a look at that at the same time as analyzing this newsletter, so hopefully you will be OK.Use It Step 1: Creating the Raw XAML

Related Posts

Post a Comment