How to architect graphically-intensive Silverlight app using MVVM?

Question

I'd like to create a Silverlight app using WCF Ria Services and the MVVM design pattern.

The main page of the app will consist of a "shell" and a large number (10s or 100s) of objects of different look (shape/size/properties) linked to each other (forming a sort of graph).

These items need to be mouse-draggable and their current position/state needs to be saved to the back-end database.

I feel that the best way to achieve this would be to have a small ViewModel and View for each item displayed, put all the important properties into the ViewModel and then somehow display all these Views in the main "shell".

However, I don't know how exactly this could be achieved. I considered using MVVM Light, but didn't find any example that would show something similar.

Can anybody point me to some examples or ideas about how this could be done?

Answer 1

"When all you have is a hammer, everything looks like a nail" :)

MVVM is not designed to manage graphic intensive situation like the one you describe. It is a glue for stitching together high-level concepts in a flexible manner. With MVVM you are adding overheads that will impact performance (e.g. binding uses reflection behind the scenes). The more objects involved, the greater the impact.

The best starting point I can suggest is to imagine what you need from a 3rd party control (e.g. a custom control/container) and, if one does not actually exist already, build it as if it were a third party custom control.

You will find in practice that custom controls are seldom based on MVVM, for performance reasons if not just because "they often don't need it". They may well expose MVVM compatible properties for the external interface, but not for the low-level internals.

MVVM is a relatively high-level technique. Do not feel you have to implement it on everything.

Answer 2

Following MVVM do the next:

1. Model - create model object which will be responsible for fetching and persistence coordinates of the shapes on the screen;
2. View Model - one view model which will initiate fetching and persistance model objects;
3. View - in your case, it's a place where you do most of your work. Create custom control based on ItemsControl with Canvas panel. Custom control should pass collection of the model objects in ItemsSource, allow to drag and drop containers and call the view model command when user drops container in some place

Answer 3

Have a look at the Telerik controls, specifically radTileView, this seems to have the functionality that your looking for. They also have a persistance framework that should allow you to save the position of the tiles back to you database.