MVVM in a canvas with usercontrols

Question

I have a MVVM WPF application that basically wants to be a single line diagram designer for an electrical distribution network.

I have a canvas that must contains transformers, circuit breaker, lines and cables.

My big problem is the design... How can i start?

I think about a DesignerView, DesignerViewModel that contains an ObservableCollection of IDesignerItemViewModel that is my base class for all the element. But in this case I have to use ItemsControl to bind the content of the canvas to my collection but the pros is that I don't have to create usercontrol for each element but i'll solve most of the problems with DataTemplate (i suppose). Each element viewmodel mantain a link to a model persisted in a repository where i mantain my logical tree.

Any hint about how to proceed, I have looked at many DiagramCanvas example but all of those use simple items most like simple rectangle...

Answer 1

Mauro,

A nice approach could be to make the ItemsControl's ItemsPanel a Canvas and bind UI elements coordinates in DataTemplate to properties of the ViewModel.

Although it seems to me this might not work because DataTemplate's content won't be placed on the Canvas but inside the ItemPresenter. So maybe you could make a control that would visualize any of your elements by switching templates in the triggers based on some property that defines type of the element.

Then you could bind Canvas's Children to a collection of these controls, or populate the Canvas.Children collection procedurally in code-behind.

Answer 2

Mauro

Have you solved this issue? I'm planning to develop something similar and trying to find the right architecture for it. Your question is just what I have been asking myself...

Appreciate your help.

Answer 3

I am about to something similar. I have Itemscontrol which laysout as a CANVAS. My Items are ShapeItemViewModels which have a property PayLoad which from Type Usercontrol. My View has a Border and a ContentPresenter which is bound to my Property Payload. Then I inject my payload depending on my needs. This allows me to assemble my items as I want to... I have one problem though... that are the connections / relations see my thread here:

http://stackoverflow.com/questions/2529596/diagramming-in-silverlight-mvvm-connecting-shapes