All right, let’s grab a beer and get this show on the road shall we?
First topic I want to discuss is MVVM, Model-View-ViewModel. A big mistake people tend to make is to call MVVM a framework, in reality MVVM is a design pattern, a best practice guide to build a structured loosely coupled application. MVVM works great in WPF, Silverlight and Windows Phone 7 development. Windows 8 Metro apps will also be great to use MVVM in.
So let’s walk through the different parts of the pattern, I know there are thousands of articles about this subject on the net but bear with me, things will get interesting.
Let’s start off with a small diagram
All right, keep this in mind and let’s start discussing the different parts.
The View
First subject is the view, the view in our WPF application will consist out of XAML files, these files describe the user interface and all the controls on them. This includes buttons, checkboxes, radiobuttons, listboxes, etc. The only thing that the view is aware off is what viewmodel it is binded too and what controls are bound to what property on the viewmodel. There is no business logic in the view and although there is a code-behind file, the rule is to keep it as clean as possible. The viewmodel and control bindings happen in the XAML code, each XAML control has a property that can be bound to a viewmodel property. An example of binding a button:
Code Snippet
- <Button x:Name="SearchButton" Content="Search" Margin="0,50,0,0" Command="{Binding SearchCommand, Mode=OneWay}"/>
When the button is clicked the Binding command goes searching in the viewmodel for a command called SearchCommand and executes it.
The ViewModel
The viewmodel contains all the data that needs to be shown on the view. These data are contained in properties that are bound to the controls on the view. Apart from data that is shown on the view, the viewmodel can also contain a bunch of commands that can be bound to events, most often used for a button click. The advantage of seperating form and form logic is that it’s very easy to bind a new view to an existing viewmodel, it’s just a matter of adding controls on the form and binding them to the right properties. The command used in the example of the view is defined like this:
Code Snippet
- public RelayCommand SearchCommand { get; private set; }
RelayCommand is a class from MVVM Light that implements the System.Windows.Input.ICommand interface.
The ICommand interface is what you need to implement if you’re not using an MVVM implementation by a third party. The interface looks like this:
Code Snippet
- public interface ICommand
- {
- bool CanExecute(object parameter);
- void Execute(object parameter);
- event EventHandler CanExecuteChanged;
- }
The relaycommand now needs to know what method to execute when it’s called. This is usually done in an InitiateCommands method like this:
Code Snippet
- private void InstantiateCommands()
- {
- SearchCommand = new RelayCommand(LoadList);
- }
This will call a method called LoadList when the button is clicked. You can, off course, use anonymous methods like this:
Code Snippet
- private void InstantiateCommands()
- {
- SearchCommand = new RelayCommand(()=>
- {
- //...
- });
- }
for those not familiar with anonymous methods, when the button is clicked all instructions between the brackets are executed. I’ll show more examples of databinding as I get further into this serie.
The Model
The model is often a separate object and contains the business logic. Classes that process the information that the viewmodel uses to pass to the view or that is passed to the viewmodel from the view.
MVVM Light
So what is this MVVM Light thing all about? MVVM Light is an open-source MVVM implementation created by Laurent Bugnion and can be downloaded from Codeplex. MVVM Light can be installed from Codeplex or from NuGet. When you install it from Codeplex you get new project types for WP7, WPF and SilverLight. Laurent recently added a preview version for Windows 8 Metro apps. Now what sets MVVM Light apart from its competitors? For me personally, the ease of use. MVVM Light just makes sense, it’s easy to use, Laurent has some nice documentation and some videos from events where he talked about his toolkit. The toolkit also contains a great messaging system that allows an application to send messages between all classes and projects within an application, a great tool that helps you create nice loosely coupled applications. Recently a very basic IoC container was added to the toolkit, which really shows the dedication and hard work that Laurent puts in his product. The container allows the viewmodels to accept instances from classes without tight coupling them, more about that when we get to it in future posts.
I really hope this first post made some sense, it’s the first time that I’m writing a series of blogposts while learing about the subject myself. If I made any errors or you’ve got some questions, feel free to drop me a message on Twitter, mail or leave a comment.
See you soon in Part 2!