Very simple MVVM demo application
WPF February 1st, 2009The 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)
You can download the source code here. Enjoy 
March 11th, 2009 at 7:18 pm
Bonjour,
Ou peut-on trouver l’article en Français dont tu parles ici ?
Merci
Loic, @ villefranche sur saone
March 11th, 2009 at 7:41 pm
L’article sera publié demain sur http://www.developpez.com ! Je posterai un nouveau billet pour donner le lien dès que se sera fait
June 18th, 2009 at 9:35 pm
This is the demo that finally made the MVVM light turn on in my head! Thank you for posting a concise example.
July 11th, 2009 at 6:30 pm
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?
July 13th, 2009 at 12:05 pm
Found the solution using Attached Behaviors, as described by Josh Smith in the following article: http://www.codeproject.com/KB/WPF/AttachedBehaviors.aspx
August 19th, 2009 at 4:51 am
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
August 19th, 2009 at 9:01 am
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
August 19th, 2009 at 9:02 am
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.
September 10th, 2009 at 4:22 pm
Please translate the article because it looks good!
tnx for the sourcecode
September 10th, 2009 at 4:52 pm
Please consider reading this article for a good presentation of the MVVM pattern in english: http://msdn.microsoft.com/en-us/magazine/dd419663.aspx
February 5th, 2010 at 7:03 am
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!
July 15th, 2010 at 11:37 am
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?
July 15th, 2010 at 11:43 am
More, I even removed inheritance from ViewModelBase and Mode=TwoWay and still works fine. I’m little confused :/
July 15th, 2010 at 1:35 pm
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 !
July 15th, 2010 at 1:50 pm
[...] got a comment on my post about a very simple MVVM application about the fact that removing the TwoWay mode on a binding did not change the behavior of the [...]
July 15th, 2010 at 1:57 pm
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.
July 15th, 2010 at 2:11 pm
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.
July 15th, 2010 at 2:51 pm
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 
July 19th, 2010 at 4:35 pm
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.
July 20th, 2010 at 9:35 am
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
July 20th, 2010 at 10:54 am
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.
July 20th, 2010 at 10:56 am
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.
August 2nd, 2010 at 6:05 am
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.
April 5th, 2011 at 12:22 pm
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.
April 5th, 2011 at 4:26 pm
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