Minimalistic MVVM for Windows Runtime XAML Platform Development with C#

I have been using MVVM for a few years now and always felt it needed a summary of the state of things as well as my own opinion about it. This is it today. My approach to MVVM has been changing from the time when I was an eager student, through a devoted disciple, till today when I see it as a small tool in the toolbox of a XAML developer.

The original article has been republished by Safari Books Online.

MVVM

The Model View View Model (MVVM) pattern is an architectural pattern used for separation of concerns in applications. It is popular in Microsoft’s XAML-based UI frameworks such as WPF, Silverlight or WinRT/XAML.

The MVVM architecture consists of the View layer (the UI design implementation), the View Model layer that provides bindable properties and commands to the view and the Model layer that contains the application’s actual domain model and business logic. The connection between these layers is such that the view model knows nothing about the view (it does not reference it) and the model knows nothing about either of the other two layers.

The qualities of an application architected based on the MVVM pattern are

  • Maintainability – separation of concerns and loose coupling helps modify one layer without affecting the other layers
  • Testability – being able to replace the view as well as view model with a test fixture allows to test the layers separately and avoid having to use unreliable and hard to maintain UI automation for all tests. That also helps overall maintainability of the code, since a change can be made in one part of code while tests reduce the risk of regressions in other areas.
  • Blendability – view models can fairly easily be replaced with design-time data and logic, so designers can create the views using Blend independently of other development work.
  • Ability to split work among multiple developers – not only the views can be implemented by designers or integrators, but also view models can be created separately from the models by mocking the models.
  • Portability – the view models and models can theoretically be reused in versions of the same app for different platforms.

MVVM was made possible in WPF – the original XAML framework thanks to the XAML layer that is the declarative description of the view as well as bindings – that allow to declaratively specify which properties of the view model are displayed or manipulated by the view, and commands that allow to represent actions executed by the view model in form of bindable properties. However, anyone trying MVVM for the first time soon notices problems with MVVM, such as

  • What are commands and why should I use them?
  • What gets created first – the view or the view model and how to connect the two?
  • Animations – how to trigger an animation from the view model or do something when an animation completes?
  • Navigation and dialogs – where to initiate navigation and dialogs – from the views or the view models?
  • State persistence – while saving the state of the application was a nice feature in the past – it is virtually required on modern platforms such as Windows Phone or Windows 8 – how to store and restore the state of the view and the view model though?
  • Non-bindable properties – a lot of the properties in the UI frameworks are not bindable, such as grid column and row definitions, Windows Phone application bar or in many cases – the style setter values.
  • Bindable properties are rather verbose – instead of using auto properties – even for the most basic bindable properties you need to invoke property change notification events.

The languages and the UI frameworks lack built-in solutions to these problems, so the developer community has responded with many frameworks that try to address these issues. Some of the more known libraries maintained by known experts in the XAML community are

  • MVVM Light Toolkit (by Laurent Bugnion) – most popular possibly because it really is pretty lightweight with just the basics of MVVM covered and the source code is easy to understand. For all platforms.
  • Caliburn.Micro (by Rob Eisenberg) – a bit more complicated, but supports convention-based approach where bindings are not explicitly specified and XAML is kept eerily clean. For all platforms.
  • Prism (by Microsoft patterns & practices team) – official guidance from Microsoft for developing composite applications with WPF, Silverlight and Windows Phone.
  • WPF Application Framework (WAF) – a popular, WPF specific library
  • ReactiveUI (by Paul Betts) – based on Reactive Extensions – a bit exotic part of the .NET framework that is well suited for highly asynchronous applications. For all platforms.
  • Cinch (by Sacha Barber) – a “Rich Full Featured WPF/SL MVVM Framework”.
  • nRoute (by Rishi Oberoi) – a big library with a lot of features, available for all XAML platforms.
  • Catel (by Geert van Horrik) – another rich framework with MVVM support with support for all platforms.
  • MVVM Foundation (by Josh Smith) – one of the early MVVM frameworks for WPF by an early MVVM advocate. Worth checking due to its small size and simple project structure.
  • Jounce (by Jeremy Likness) – “Silverlight MVVM + MEF Framework”.
  • Calcium (by Daniel Vaughan) – composite application toolset for WPF/Windows Phone.

Over the years MVVM Light, Caliburn.Micro and Prism have grown to be the three most popular frameworks with the biggest communities around them and are the best choices to start with, though the other libraries have interesting features that are worth checking too.

MVVM for WinRT

What is changing with Windows 8 for MVVM development? Well, Windows Runtime or WinRT is the new default Windows API and the most popular MVVM frameworks are seeing gradual updates to support Jupiter – WinRT’s version of a XAML UI framework. They are however still mostly .NET class libraries – not usable in C++ or Javascript. Right – Windows 8 also enables XAML development with C++ and MVVM is supported there too. Using Javascript with HTML is another option and you can also use MVVM there using the KnockoutJS library. You can then develop WinRT applications in C#, Visual Basic, C++ or Javascript and implement the MVVM pattern in any of these languages. Back to C# and .NET though – if this is the platform you choose – there are some changes coming there that affect how you can implement MVVM like the new CallerMemberAttribute in C# 5.0, but the one I would like to talk about is the BindableBase class that comes standard with multiple Visual Studio project or item templates. Since we now have a base view model class available to people who might not have even heard of MVVM before – this might become a pretty popular class used by C# developers building apps for the Windows Store. You now get a pretty good view model base class out of the box.

Should you use the BindableBase class and is it enough to build MVVM-based applications?

I still do recommend using MVVM Light Toolkit or Caliburn.Micro for larger projects, since they provide features that you will most likely need sooner or later as your application grows and if you want to keep it implemented in clean MVVM fashion, however over the years as these libraries have grown in popularity, they have also grown in features and the built-in cross-platform support, made them more complicated and harder to study. Sure – with NuGet you can now have the latest version of MVVM Light referenced by your project within a few clicks, but then you cannot see the source code and it is harder to figure out how it works or how to use it, especially with the growing number of APIs available.

For smaller projects – the BindableBase from the Visual Studio templates might just be enough. Though a snippet for observable properties as the “pp” snippet in my snippets helps a lot (just install the snippets and type pp[TAB] to insert an observable property in your view model). Commands? Do you really need them to implement the MVVM pattern? A regular public method on the view model works just as well and if you need to disable or enable a button based on whether a method can be executed – a regular observable property like “CanExecuteMyMethod” works just as well as a CanExecute method of a command. By the way – if you really want to – you can still create any MyCommand class that implements an ICommand interface – it is not that much more code than using a DelegateCommand/RelayCommand of Prism/MVVM Light, though admittedly these do make it a lot easier to inline its implementation.

Not using a third party MVVM helper library has many benefits – no need to install anything, no dependencies, no reliance on reflection, no dead code in form of unused framework APIs, no need to justify using open source code at companies that do not generally allow it. It is just what you get with the standard templates.

Of course these existing libraries have custom solutions to some specific problems and provide generic solutions to others, but usually eventually you stumble upon something that the library you chose just does not solve. In such cases I sometimes build my own reusable libraries or controls or just write some one-off piece of code that glues MVVM together. If the problem you need solved involves some custom interaction logic – you are going to be better off implementing a custom control or attached behavior than trying to stuff everything in the view model.

Conclusion

Ultimately using code behind is an easiest choice and does not invalidate MVVM. Experts in the field such as Laurent Bugnion have long been saying that MVVM is just a pattern and you should not be afraid of using code behind in your applications. However religiously it seems to be treated by many developers – if you just start by using view models to drive your views – it is enough to reap most of the benefits of the pattern and will help you create a maintainable application. Unless you are building a big line of business application, planning on unit testing your complicated view model logic or doing a lot of UI development using Blend – you might not need a fully separated view and view model. If you are working on a big project though, or your project just grows big – you might consider one of the popular frameworks or building your own. At some point you will just find that you can’t live without a pub-sub implementation like MVVM Light’s Messenger or Prism’s EventAggregator, you will want to write unit tests and find a need for an IoC container, so you can mock and shuffle your components., you will want to bind everything even if Microsoft’s does not support the binding you want. Until then though – feel free to start small and lean and worry about features rather than patterns. MVVM is just one of the tools to build an app and you might find that learning about custom layout logic, touch interaction, custom controls or behaviors is going to benefit you more than wondering which MVVM framework to use.

17 thoughts on “Minimalistic MVVM for Windows Runtime XAML Platform Development with C#

  1. […] from the Common Language Runtime and .NET Core Framework teams, wrote this post…”Minimalistic MVVM for Windows Runtime XAML Platform Development with C# (Filip Skakun)“I have been using MVVM for a few years now and always felt it needed a summary […]

  2. […] Read original post by Filip Skakun at Xyzzer's Dev Blog […]

  3. You might be interested in the Okra App Framework (http://okra.codeplex.com). This is a new framework that supports the implementation of MVVM based applications in Windows 8 – note that this can be used stand-alone, or paired with another MVVM framework of choice (or none!). The core functionality is supporting the navigation infrastructure, including the state persistence that you discussed in your post. It also helps to abstract away the wiring up of the new Windows 8 contracts with view-models – rather than having to hook up to difficult to test events, you simply add an ISearchPage (for example) interface to your view-model. Fully testable and supports the UX guidelines as standard (when & how to activate search, etc.)

  4. I enjoyed your article, nicely done 🙂

  5. Anonymous says:

    Great stuff Filip. Worth a mention: ReactiveUI.

  6. […] Minimalistic MVVM for Windows Runtime XAML Platform Development with C# […]

  7. […] Minimalistic MVVM for Windows Runtime XAML Platform Development with C# […]

  8. xyzzer says:

    Since I was just thinking about the contrast between minimalistic and purist approaches to MVVM – I looked up “purist MVVM” and found some interesting pages… http://stackoverflow.com/questions/2087743/mvvm-madness-commands and http://forums.silverlight.net/t/133053.aspx/1 are worth a read.

  9. tomahawk1187 says:

    The problem i am seeing and trying to find a clean solution is how to abstract view requests coming from the VMs.How to reuse the whole app logic and have it run both on WP8 and WIN8.How can a WP8 VM say for example “now i want these app bar ( no one appbar on Win8)items + this panel showing somewhere (view will choose where according to platform )” or the same but change the appbar commands icon (UICommand abstraction?) or show this page aswell, or dialog etc. A good abstraction so VMs can also drive the UI in a cross platform way.

    • xyzzer says:

      That’s where I think you might be trying too hard. Not sure what view requests from vm would be since a vm should know nothing about views, but you would typically inform views about things using messenger/event aggregator/events/pub-sub etc. You could also try using a bindable application bar implementation like mine (http://bindableapplicationb.codeplex.com), but I would say you are expecting too much. If you focus on trying to code your app so it shares as much code as possible between the two platform – you will waste the time on that instead of trying to get as much as possible out of each platform. They are different and you code your UI differently for them. You could maybe share some data layer code and a back end service, but your phone screen fits different amounts of content than your PC screen, so your VMs should and will be different in most cases. You could share parts of the VMs or start by porting ones from one platform to another, but then evolve them so they support the other better. On the other hand – what do I know?

  10. ipjohnson123 says:

    I’m going to throw my framework into the Mix http://stylemvvm.codeplex.com. Its written from the ground up to support Metro (C#, C++/CX, HTML/JS). It includes a full blown IOC (attributes and Fluent configuration), Mediator, IMessageBoxService, Tile Service, Charm Service etc. It also includes VS templates for projects and items.

  11. xyzzer says:

    Another one that is growing rapidly is MvvmCross (https://github.com/slodge/MvvmCross) that is a truly cross-platform one with support for various versions of Mono.

  12. xyzzer says:

    One more note on things that fit well into Minimalistic MVVM approach. You can put your click handlers in a VM to avoid using ICommand if not really needed like here:
    <Button Click=”{x:Bind ViewModel.OnButtonClick}” />
    Thanks Jerry: http://stackoverflow.com/questions/35798901/laying-out-a-row-of-localized-buttons-over-the-full-width-of-the-screen

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: