Today, I am going to show you how to use the MVVMLight framework on the WP7.
For those who have not heard of MVVM, it is a recommended design pattern for Silverlight / WPF application development. I will not go in depth describing what the pattern is all about, instead this article provides a very comprehensive description on MVVM.
First and foremost, proceed to http://www.galasoft.ch/mvvm/getstarted/ to download and install the framework and the templates for Visual Studio
Once installed, launch Visual Studio and click on "New Project". From the ""New Project Window", select "Silverlight for Windows Phone" on the left. At this point you will notice a new template, "MvvmLight (WP7)" has been added.
Create a new Windows Phone 7 project with that template. Once created, your new project will look something like this
The template did most of the boilerplate code for you which wires up various part of the application with the framework. Let's take a closer look at what we have here.
First, you will notice that two folders have been added to the project; Model and ViewModel. Expanding the ViewModel folder will reveal the following files:
- MainViewModel.cs
- ViewModelLocator.cs
MainViewModel is our view model class and it is declared and instantiated in the ViewModelLocator class. The ViewModelLocator is included in the App.xaml as a resource.
With the ViewModelLocator configured as a resource, the MainViewModel is then binded to the application DataContext in MainPage.xaml like this
Now, lets take a step back and take a second look at the MainViewModel class. The MainViewModel class derived from the ViewModelBase class. This base class implements everyone’s favourite interface, the INotifyPropertyChanged interface which is very much needed for data binding.
Looking through the code further, you will notice that there are three fields in the class, ApplicationTitle, PageName and Welcome which are binded to the title text field of the application, the page name text field for the Application Page and also to a text field located within ContentGrid.
If you compile and run the application, you will get something like this:
As you can see, the MainViewModel class is playing its role as the model of the view by providing the view with the content required to be display to the user. Apart from just providing content, the MainViewModel class has another function, to handle user interaction and act upon it in an appropriate manner. In a non MVVM world, this kind of scenario is usually handled by a code-behind class which attached event listeners to UI components to response to user interaction. In MVVM however, we achieve this by using commands, bindings, and triggers in Silverlight.
First of all, add a button to ContentGrid
After that, add a field to MainViewModel which will return an instance of a Command class. Consider the following code fragment:
We modify the Welcome property to include a setter. When a new value is set, a property changed event will be raised which will inform all bindings of the new value. A new property which returns a new instance of RelayCommand<T> is then added. The idea is to bind the SayByeCommand to the newly added button. When a user taps on the button, the welcome text will be replaced with “Bye Bye!”.
Now that we have define our command, lets see how we can wire it up with our button. First we need to declare two additional namespaces in our MainPage.xaml.
After that, modify our button in xaml to look like this
What we have done here is use a trigger (in System.Windows.Interactivity) to execute our command, SayByeCommand whenever the button’s click event is raised (the user tabs on the button).
Let’s now run our app and test it out.
Lets click on the button to say “bye bye”
Voila! it works!
This is a very simple illustration of how we can use the MVVM design pattern to develop a WP7 application using the MVVMLight framework. This guide is not only applicable for WP7 development, but it can be use wholesale for Silverlight and WPF development as well.
Hopefully this proves to be useful for anyone who is looking to start out with MVVM and MVVMLight. :)
