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. 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.