views:

4734

answers:

7

I am currently working with the Microsoft MVVM template and find the lack of detailed examples frustrating. The included ContactBook example shows very little Command handling and the only other example I've found is from an MSDN Magazine article where the concepts are similar but uses a slightly different approach and still lack in any complexity. Are there any decent MVVM examples that at least show basic CRUD operations and dialog/content switching?


Everyone's suggestions were really useful and I will start compiling a list of good resources

Frameworks/Templates

Useful Articles

Screencasts

Additional Libraries

+1  A: 

The sample project in the Cinch framework shows basic CRUD and navigation tools. It's a fairly good example of using MVVM, and includes a multi-part article explaining its usage and motivations.

Reed Copsey
+1  A: 

Have you looked at Caliburn? The ContactManager sample has a lot of good stuff in it. The generic WPF samples also provide a good overview of commands. The documentation is fairly good and the forums are active. Recommended!

Andy S
+1  A: 

I also shared in your frustration. I'm writing an application and I had these 3 requirements:

  • Extensible
  • WPF with MVVM
  • GPL compatible examples

All I found were bits and pieces, so I just started writing it the best I could. After I got into it a bit, I realized there might be other people (like yourself) who could use a reference application, so I refactored the generic stuff out into a WPF/MVVM application framework and released it under the LGPL. I named it SoapBox Core. If you go to the downloads page, you'll see it comes with a small demo application, and the source code for that demo application is also available for download. Hope you find that helpful. Also, email me at scott {at} soapboxautomation.com if you want more info.

EDIT: Also posted a CodeProject article explaining how it works.

Scott Whitlock
+15  A: 

Unfortunately there is no one great MVVM example app that does everything, and there are a lot of different approaches to doing things. First, you might want to get familiar with one of the app frameworks out there (Prism is a decent choice), because they provide you with convenient tools like dependency injection, commanding, event aggregation, etc to easily try out different patterns that suit you.

The prism release:
http://www.codeplex.com/CompositeWPF

It includes a pretty decent example app (the stock trader) along with a lot of smaller examples and how to's. At the very least it's a good demonstration of several common sub-patterns people use to make MVVM actually work. They have examples for both CRUD and dialogs, I believe.

Prism isn't necessarily for every project, but it's a good thing to get familiar with.

CRUD: This part is pretty easy, WPF two way bindings make it really easy to edit most data. The real trick is to provide model that makes it easy to set up the UI. At the very least you want to make sure that your viewmodel (or business object) implements INotifyPropertyChanged to support binding and you can bind properties straight to UI controls, but you may also want to implement IDataErrorInfo for validation. Typically, if you use some sort of an ORM solution setting up CRUD is a snap.

This article demonstrates simple crud operations: http://dotnetslackers.com/articles/wpf/WPFDataBindingWithLINQ.aspx

It is built on LinqToSql, but that is irrelevant to the example - all that is important is that your business objects implement INotifyPropertyChanged (which classes generated by LinqToSql do). MVVM is not the point of that example, but I don't think it matters in this case.

This article demonstrates data validation
http://blogs.msdn.com/wpfsdk/archive/2007/10/02/data-validation-in-3-5.aspx

Again, most ORM solutions generate classes that already implement IDataErrorInfo and typically provide a mechanism to make it easy to add custom validation rules.

Most of the time you can take an object(model) created by some ORM and wrap it in a viewmodel that holds it and commands for save/delete - and you're ready to bind UI straight to the model's properties.

The view would look like something like this (ViewModel has a property Item which holds the model, like a class created in the ORM):

<StackPanel>
   <StackPanel DataContext=Item>
      <TextBox Text="{Binding FirstName, Mode=TwoWay, ValidatesOnDataErrors=True}" />
      <TextBox Text="{Binding LastName, Mode=TwoWay, ValidatesOnDataErrors=True}" />
   </StackPanel>
   <Button Command="{Binding SaveCommand}" />
   <Button Command="{Binding CancelCommand}" />
</StackPanel>

Dialogs: Dialogs and MVVM are a bit tricky. I prefer to use a flavor of the Mediator approach with dialogs, you can read a little more about it in this Stackoverflow question:
http://stackoverflow.com/questions/1667888/wpf-mvvm-dialog-example

My usual approach, which is not quite classic MVVM, can be summarized as follows:

A base class for a dialog viewmodel that exposes commands for commit and cancel actions, a event to let the view know that a dialog is ready to be closed, and whatever else you will need in all of your dialogs.

A generic view for your dialog - this can be a window, or a custom "modal" overlay type control. At its heart it is a content presenter that we dump the viewmodel into, and it handles the wiring for closing the window - for example on data context change you can check if the new viewmodel is inherited from your base class, and if it is, subscribe to the relevant close event (the handler will assign the dialog result). If you provide alternative universal close functionality (the X button, for instance), you should make sure to run the relevant close command on the viewmodel as well.

Somewhere you need to provide data templates for your viewmodels, they can be very simple especially since you probably have a view for each dialog encapsulated in a separate control. The default data template for a viewmodel would then look something like this:

<DataTemplate DataType="{x:Type vmodels:AddressEditViewModel}>
   <views:AddressEditView DataContext={Binding} />
</DataTemplate>

The dialog view needs to have access to these, because otherwise it won't know how to show the viewmodel, aside from the shared dialog UI its contents are basically this:

<ContentControl Content={Binding} />

The implicit data template will map the view to the model, but who launches it?

This is the not-so-mvvm part. One way to do it is to use a global event. What I think is a better thing to do is to use an event aggregator type setup, provided through dependency injection - this way the event is global to a container, not the whole app. Prism uses the unity framework for container semantics and dependency injection, and overall I like Unity quite a bit.

Usually, it makes sense for the root window to subscribe to this event - it can open the dialog and set its data context to the viewmodel that gets passed in with a raised event.

Setting this up in this way lets viewmodels ask the application to open a dialog and respond to user actions there without knowing anything about the UI so for the most part the MVVM-ness remains complete.

There are times, however, where the UI has to raise the dialogs, which can make things a bit trickier. Consider for example, if the dialog position depends on the location of the button that opens it. In this case you need to have some UI specific info when you request a dialog open. I generally create a separate class that holds a viewmodel and some relevant UI info. Unfortunately some coupling seems unavoidable there.

Psudocode of a button handler that raises a dialog which needs element position data:

ButtonClickHandler(sender, args){
    var vm = DataContext as ISomeDialogProvider; // check for null
    var ui_vm = new ViewModelContainer();
    // assign margin, width, or anything else that your custom dialog might require
    ...
    ui_vm.ViewModel = vm.SomeDialogViewModel; // or .GetSomeDialogViewModel()
    // raise the dialog show event
}

The dialog view will bind to position data, and pass the contained viewmodel to the inner contentcontrol. The viewmodel itself still doesn't know anything about the UI.

In general I don't make use of the DialogResult return property of the ShowDialog or expect the thread to block until the dialog is closed. A non-standard modal dialog doesn't always work like that, and in a composite environment you often don't really want an event handler to block like that anyhow. I prefer to let the viewmodels deal with this - the creator of a view model can subscribe to its relevant events, set commit/cancel methods, etc, so there is no need to rely on this UI mechanism.

So instead of this flow:

// in code behind
var result = somedialog.ShowDialog();
if (result == ...

I use:

// in view model
var vm = new SomeDialogViewModel(); // child view model
vm.CommitAction = delegate { this.DoSomething(vm); } // what happens on commit 
vm.CancelAction = delegate { this.DoNothing(vm); } // what happens on cancel/close (optional)
// raise dialog request event on the container

I prefer it this way because most of my dialogs are non-blocking pseudo-modal controls and doing it this way seems more straightforward than working around it. Easy to unit test as well.

Egor
Thanks for the the detailed answer! I recently found that my biggest issue is when I need to have a MainViewModel communicate with other view models to handle the flow of the application. However it appears that MVVM + Mediator seems to be the popular approach.
jwarzech
The Mediator definitely helps, the event aggregator pattern (Prism has a good implementation) is also really helpful when low coupling is a goal. Also, your main viewmodel typically has child viewmodels of its own and shouldn't have problems communicating with them. You need to use a mediator or/and event aggregator when your child viewmodels need to interact with other modules in your app that they do not necessarily know about - including the UI (my dialog example is about this particular case).
Egor
The guidelines for working with dialogs and windows has been really helpful. However, I am stuck with a few issues: 1. How do you set the window title from the view? 2. How do you deal with setting the owner window?
Daniel Skinner
@Daniel Skinner: I am assuming you are talking about dialogs here, correct me if I am wrong. The dialog title is just another property and you can bind it to whatever you like. If you followed my approach with a base dialog viewmodel class (let's pretend it has a title property), then in your all generic dialog window you can use UI to UI binding to set the title to {Binding Path=DataContext.Title, ElementName=NameOfContentPresenter}. Owner window is a little tricker - it means that the mediator that actually pops up the dialog needs to know about the root app view.
Egor
In fact I take that back - regardless of how you structure this at some point whoever is actually popping up the dialog needs to have a reference to the root app window/view. Notice where I said "Usually, it makes sense for the root window to subscribe to this event - it can open the dialog and set its data context to the viewmodel that gets passed in with a raised event." This is where you would set the owner.
Egor
And if Dialog's context is set to the viewmodel passed in with the event it's title can be {Binding Title}.
Egor
Regarding window title: Agree that {Binding Title} would work but I consider the window title to be part of the presentation layer and would like the view to set the window title (i.e. pull from a localizable {x:Static Resources...} (.resx) file.
Daniel Skinner
Regarding dialog: I actually implemented it as a service, to be used by a controller in the application layer. Ideally the controller tells the service to create the view model as a dialog and also gives the 'owner' view model. The service then 'finds' the view instance associated with each and does the plumbing you describe. The problem is that I have no idea how, given a ViewModel, to find the right View instance when using DataTemplating.
Daniel Skinner
+3  A: 

Jason Dolinger made a good screencast of MVVM. Like Egor mentioned there is no one good example. They are all over. Most are good MVVM examples, but not when you get into complex issues. Everyone has their own way. Laurent Bugnion has a good way to communicate between viewmodels as well. http://blog.galasoft.ch/archive/2009/09/27/mvvm-light-toolkit-messenger-v2-beta.aspx Cinch is also a good example. Paul Stovel has a good post that explains a lot too with his Magellan framework.

nportelli
Thanks for pointing Jason's screencast on MVVM. Excellent video.
123Developer
A: 

Even I shared the frustration until I took the matter into my hands. I started IncEditor.

IncEditor (http://inceditor.codeplex.com) is an editor that tries to introduce developers to WPF, MVVM & MEF. I started it and managed to get some functionality like 'theme' support. I am no expert in WPF or MVVM or MEF so I can't put a lot of functionality in it. I make a sincere request to you guys to make it better so that nutters like me can understand it better.

CodingTales
A: 

Found this one useful. Has code too.

http://msdn.microsoft.com/en-us/magazine/dd419663.aspx

McBainUK
Thanks, I added it to the list.
jwarzech