Very simple MVVM demo application

The last couple of days, I’ve been busy writing an article about MVVM in French. I don’t know yet if I’ll translate it to English, but I’m sure I can share the demo application, and this is the goal of this post !

I think the best way to understand how things fit together is to explore the source code of the application.

It’s a very small demo because I wanted to demonstrate only a subset of MVVM facilities, so you’ll find:

  • an easy way to work with commands in MVVM using Josh Smith RelayCommand class
  • the power of the ICollectionView interface to implement navigation and search feature
  • empty code-behind file for my views
  • a base class for all my ViewModel objects (again, based on the work of Josh)

mvvm-demo-1

mvvm-demo-2

You can download the source code here. Enjoy :-)

25 thoughts on “Very simple MVVM demo application

  1. Bonjour,
    Ou peut-on trouver l’article en Français dont tu parles ici ?

    Merci
    Loic, @ villefranche sur saone

  2. This is the demo that finally made the MVVM light turn on in my head! Thank you for posting a concise example.

  3. Your demo is great! Helped me a lot.
    Now I’m facing a problem: when using the “Next” button, the ScrollBar of the ListBox doesn’t sync with the selected item. How can I fix this?

  4. Usning the RelayCommand is all find and nice but what is I want to handle a click and have the parameters the come with a normal click passes to the RelayCommand. If I handle the click the usual way, the usual object sender, RoutedEventArgs e parameters are given to me in the click method. How would I hook those parameters up in a method that would work with the RelayCommand .

    Example the click method I have for clicking on a column on a grid is
    private void SortClick(object sender, RoutedEventArgs e)

    How do I pass this SortClick method with the two parameter to this RELAYCOMMAND CLASS.

    I just can not say
    new RelayCommand(
    param > this.SortClick(object sender, RoutedEventArgs e),

    If anyone has any source code to show me how to solve the problem please email it at sun_Water_snow@hotmail.com

  5. Nelson,

    Yes Josh as an elegant approach to solve this issue. One more time, the attached behavior pattern help us to do the trick in a very elegant way :)

  6. Steve,

    I don’t have any particular idea about how to do that. But I think you should ask yourself why do you need it ? The RoutedEventArgs is view-related and shouldn’t be needed by the viewmodel. If you want to detect the number of click for example, you could extend the MouseClick attached property to support it.

  7. Awesome! Love the demo application. I like the simplicity of it and the fact that I immediatetly understood some of the concepts. Hopefully you will extend it slighty to use some of the other key features of WPF + .Net 3.5.

    Thanks for the help!

  8. Thank you Jeremy for this tutorial. I wonder why you use OnPropertyChanged at PersonViewModel ? I delete every line with this, and it still works( I can switch between users, and my changes are remembered).
    Second: why do you use OnPropertyChanged(“FirstName”) at Age property at PersonViewModel?

  9. More, I even removed inheritance from ViewModelBase and Mode=TwoWay and still works fine. I’m little confused :/

  10. Damian,

    About the OnPropertyChanges(“FirstName”) with the Age property it’s a mistake. It should be “Age” of course.

    About the TwoWay binding it depends actually on the associated DependencyProperty of the control. In a TextBox, the Text property is declared with the BindsTwoWayByDefault option which explain why removing the explicit TwoWay does not change the behavior.

    Finally, about the OnPropertyChanged, you can’t see the benefits in this demo because I’m not demonstrating this synchronization. But if for example you put 2 TextBoxes linked with the same property (ie. Age) you’ll see that without the OnPropertyChanged only one will be refreshed.

    Hope this helps !

  11. Thank You for help.

    Unfortunately when I add second textbox linked with Age property everything works ok. So I convert ObservableCollection to List, and removed inheritance from ViemModelBase from MasterViewModel and it still works. I appreciate that you have time for me. I’m very newbie.

  12. I just did the test: if I change the second TextBox in the DetailView to display the Age property, and without the correct OnPropertyChanged, any changes in the first TextBox is not reflected in the second TextBox.

    However, adding the OnPropertyChanged fix this issue.

  13. Ok, I see now :) It changes but after selecting again from list. But in other way. So thank you very much :) My weekend will be happier thanks your article ! :) Have a nice weekend, too :)

  14. Hi , I was trying to go through it.
    But i could not make
    CommandManager.RequerySuggested += value;
    work as it was not able to find the CommandManager
    —————–
    and
    if (TypeDescriptor.GetProperties(this)[propertyName]
    in ViewModelBase
    work as its not able to find the TypeDescriptor in System.ComponentModel.

    I was trying to make a Silverlight Project and trying to make it run.

    Regards
    Debashish.

  15. Debashish,

    You don’t have the exact same set of functionalities in Silverlight and WPF. That’s why you have error with CommandManager and TypeDescription.

    Please take a look at a MVVM frameworks which supports Silverlight in order to see a working implementation of the ICommand interface. For example, you can look at the MVVM Light Toolkit (http://mvvmlight.codeplex.com) and its RelayCommand class (http://mvvmlight.codeplex.com/SourceControl/changeset/view/47157#750822).

    Hope this helps :)

  16. Hi Jeremy ,
    Not sure , why are u telling me to use MVVM Framework.
    As i see ur downloadable application works fine.
    I cannot add dlls like PresentationFramework.dll etc.
    Regards
    Debashish.

  17. This sample application is designed to work with WPF, not Silverlight. That’s the reason why I’m suggesting you to take a look at an MVVM framework which supports Silverlight.

  18. Hi Jermy , i saw MVVMlight Framework.But i have already developed a lot in Silverlight 4 . So i cannot move now to another Framework.When i try to use Silverlight 4 , I get the help of Commands . Now i am only left with CollectionViewSource.GetDefaultView(). If i get something equivalent in SL . As when i selecet any thing in my listbox , i cannot save the employee details in the details plain as a lost focus did not happen in the textbox of the details Tab.

  19. Hi Jeremy,

    I am new to MVVM and tried your code.I have placed break point in side the below method to monitor the control flow .But when I debug it I saw the following method is hitting like in an infinite loop.

    public bool CanExecute(object parameter)
    {
    return this.canExecute == null ? true : this.canExecute();
    }

    Is that a design issue..? Or I am missing something. I have tried it in Visual Studio 2010 Professional edition in windows 7 machine.

  20. praveen,

    This is not a design issue nor a bug. In WPF the CanExecute methods of your commands are called automatically as soon as the UI changes (for example you click on a button or the keyboard focus change). This is handled by the CommandManager class. When you run the application in debug with a breakpoint you can see the behavior you describe. I think this is because the UI is being shown and hidden. If you add a trace (like Console.WriteLine) I think you’ll see much less call to the method.

    In Silverlight this is different because the CommandManager class does not exist. But that’s another story :-)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>