Home > WPF > WPF MVVM Example App

WPF MVVM Example App

I’ve been writing a simple app to try out Windows Presentation Foundation (WPF) using the Model-View-ViewModel (MVVM) pattern, so I thought I’d post it in case anyone found it useful – there don’t seem to be many end-to-end examples using MVVM around.  I’ve tried to stick to good practices, although there’s still a fair bit of discussion in some areas about what the best way to do things is.

Before you read any further, if you’re looking for an example of a decent WPF UI, stop now!  I can assure you, you’ll only be disappointed..  I used a theme so it wasn’t grey, but that’s about it.  It’s all about the code!

The Code

The source code is here: https://github.com/relentless/wpf-diet-recorder

You’ll need Visual Studio 2008 and above to use this (I haven’t tried it with 2010, but it should work Ok).

The App

The app lets you record your weight and some notes on the Measurements screen:

measurements screenshot

This can be done for multiple users, which are set up on the Users screen:

users screenshot

(You might notice the Users screen allows you to define custom measurements for the users – these aren’t used anywhere at the moment, as putting that in was making it too complex for this example).

Features

A couple of interesting things in there are:

  • Automated Unit Testing (of course!)
  • Composite views (the ‘custom measurements’ part of the Users screen is a separate user control with its own ViewModel)
  • No code-behind
  • Commands using DelegateCommand
  • ValueConverters

Unit Testing

Although there aren’t as many unit tests as I would like, there should be at least examples of the main things you’d want to test.  (My only excuse for the lack of tests is this was my first WPF app, and as such basically a prototype, so I was working it out as I went along).

I’ve used Roy Osherove’s naming convention for the unit tests (MethodName_StateUnderTest_ExpectedBehaviour), as I like it.  I’ve also stuck with the AAA pattern for the test layout (Arrange, Act, Assert), and when I’ve used Rhino Mocks for test isolation, that’s been in ‘AAA mode’.

ValueConverters

There is still much discussion in MVVM circles about whether ValueConverters should be used, or if the ViewModel in MVVM should render them unnecessary.  I’ve used ValueConverters as I don’t want to have too View-specific things (such as Visibilities and Colours) in my ViewModel, but some people (including Josh Smith, the father of MVVM) disagree.  To be honest, it doesn’t matter much (especially if you’re just starting out), but it’s good to be aware of your options.

Validation

Always tricky to know where to put the validation – in this case, I’ve gone for validating the data type in the ViewModel, and any more complex validation (string lengths, max and min value, etc) in the model itself.

Libraries / Tools

The things I’ve used to build this (aside from VS2008) are:

Further Development

If I was to continue developing this example, there are a couple of things I’d probably want to do:

  • Make some kind of Application Controller, which would contain the ugly startup code from App.xaml.cs and be in charge of opening forms
  • Use an IoC container such an Ninject to resolve those dependencies
  • Probably take the data loading/saving logic out of the ViewModels and find somewhere more appropriate for it

That’s It!

Hopefully someone might find that useful.  If you have any questions, feel free to get in touch.

Advertisements
Categories: WPF Tags: , ,
  1. Rory
    September 2, 2010 at 2:24 pm

    Think you’ve got this wrong “including Josh Smith, the father of MVVM”
    Nice article, thanks for sharing

    • relentlessdevelopment
      September 10, 2010 at 9:14 am

      Yeah, I think you might be right – according to Wikipedia at least, Josh Smith accredits John Grossman, a Microsoft Silverlight guy, for the original pattern. Although Smith has certainly been pretty influential in the MVVP world.

  2. September 9, 2010 at 6:36 am
  3. March 5, 2011 at 5:41 pm

    I works fine with VS2010 … thanks 🙂

    • relentless development
      March 9, 2011 at 10:30 pm

      Excellent, thanks for letting me know!

  4. jc
    January 24, 2012 at 9:16 pm

    Finally someone with a real example! I think this will help me a lot. Maybe if you could set a detailed explanation for a dummie beginner in MVVM would be nice. I will have to dig a lot and maybe spend a week of three in order to understand and extract what i need.
    Thanks a lot.

  5. Bryan K
    February 6, 2012 at 9:47 pm

    Hi,
    Thanks for your example. I’m new to programming all together and I’ve had such a hard time understanding how to use classes and how to use methods from other classes. I have searched all over the internet on how to bind button events that are setup in another class and could not really find a good complete example. But after downloading your APP I have been able to go through the code and see what and how you implement binding and how it all gets tied together in the App.xaml.cs file at startup. This was key info for me because I could not figure out how to tie the classes together. I do have a problem however. I can get the app to compile and run but I can not get it to work. The new button is not active and the users dropdown box is empty. I may be missing a file but not sure what to do. I would like to run and play with the app so I can fully understand what is goig on. Could you please respond to my post?

    Thanks,
    Bryan K.

    • relentless development
      February 7, 2012 at 9:59 am

      Hi Bryan, I’ll get back to you by email. From what I recall, the users list is initially empty, but you should be able to add a new user.

      • Sara N
        April 12, 2012 at 2:48 pm

        If you are still monitoring this, I’d like to know what you did for Bryan. I have the same issue wit the buttons. I wasn’t sure if the DB was bing recognized?

  6. Bryan K
    April 12, 2012 at 2:56 pm

    Sara N,
    This is the reply I got from the developer.

    I think I might see the problem, looking back at the app again – it’s not obvious, but the ‘users’ label in the top left is a button which you need to press to open the users screen (see attached screenshot).

    Let me know if that was the issue.

    Grant

    Hope this helps you.
    Bryan K

    • Sara N
      April 12, 2012 at 3:00 pm

      That was all it was. Thank you for the QUICK response!!!!!!

      • Bryan K
        April 12, 2012 at 3:02 pm

        Anytime. I’m not a very good programmer yet (hope to be one day) But I can pass on information like a champ;)
        Bryan K

  7. Sara N
    April 12, 2012 at 3:01 pm

    Sara N :If you are still monitoring this, I’d like to know what you did for Bryan. I have the same issue with the buttons. I wasn’t sure if the DB was being recognized?

  1. November 9, 2010 at 1:39 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: