MVVM questions on Josh Smith's Sample Application

Question

I have been working through Josh Smith's article on MVVM at http://msdn.microsoft.com/en-us/magazine/dd419663.aspx. Each section makes sense to me but I am having a hard time putting it all together as a coherent unit mentally. I have 2 questions that would help a ton.

1. If I were to build the sample ap, what would be the logical order to build it?

2. For the command structure, what happens, in what order when the ap is run?

I am also wondering if I should split this into 2 questions?

Answer 1

1. Start with the part you know better. UI or model that is. Anyway you will have to do several iterations over the whole MVVM thing to make all parts fit together.
2. Your second question is not exactly clear for me, I'd say no commands are started just by the fact that application runs, some action, like button click triggers the command to do its action. Also, every command can be enabled/disabled, which is then reflected by the visual state of the corresponding control. It's quite a common pattern even out of the boundaries of the MVVM and WPF.

Answer 2

1. I agree with Yacoder on this one. Start with what you know, or your vision. If your vision is to get a certain UX, start in Expression Blend if you want to. If you know what functionality you want, start with the ViewModels and the Unit tests.

2. Smith's application starts with App.xaml.cs. There the MainWindowViewModel and the MainWIndow is created and shown.

MainWindow.xaml is the next thing that happens. It defines the main portion of the UI. The main parts of this is showing two collections; Commands and Workspaces. Those are members of MainWindowViewModel.

Smith seems to like properties to check if their corresponding private fields are null and, if they are, assign them. Thus the "Commands" collection is created in line 51 of MainWindowViewModel which calls CreateCommands() just south of there.

The command classes are abstracted away by RelayCommand, probably because each command doesn't need to know much in the case of "Show All" or "Create". The methods for these two commands are in the MainWindowViewModel, because they are conceptually functions of the main window.

The Commands collection is visualized as a list in the Main Window, so they need some kind of presentable, user friendly text to describe them. Thus they are wrapped in their own CommandViewModels.

The commands are presented through the magic of XAML beginning at line 41 of MainWindow.xaml. The HeaderedContentControl is databound to the Commands collection, and specifies CommandsTemplate of MainWindowResources.xaml (starting at line 93 of that file). The template uses a HyperLink with its Command property bound to the Command property of the CommandViewModel.

When it comes to the Save button on the new customer form. This is bound from CustomerView.xaml, line 117. To the CustomerViewModel SaveCommand property in line 196. It is a RelayCommand pointing to methods in CustomerViewModel. Each customer view has its own instance of CustomerViewModel where the data for that customer goes. The instances of RelayCommand belong to those CustomerViewModels, so each view has it's own SaveCommand also. The action and predicate of the RelayCommand instance knows not only which methods and properties they point to, but also of which instance. The Save method of CustomerViewModel only uses data from that instance.

That's roughly how two views can have the same kind of buttons that do the same for their respective customer data.

Answer 3

Josh Smith's article is the best resource on MVVM. But if you're unable to understand it straight away, you might consider reading mine which anyone can easily understand. http://codingtales.com/2010/02/06/creating-a-complete-tabbed-interface-in-wpf-using-mvvm/