Building a Universal Application for Windows Phone 8.1 and Windows 8.1 with MVVM Light

.NET, Blend, Build, MVVM, Phone, Silverlight, Technical stuff, Windows 8, Windows Phone, Work

In the previous article, we talked about the new Universal apps which can be created for Windows Phone 8.1 and Windows 8.1. This offers a nice way to structure your app in order to share as much code and other files (artwork, etc) as possible. It makes it easier than ever to create apps which target both the Windows Phone and the Windows RT devices like Surface.

The new concepts can be a little confusing and overwhelming at first, but practice will help a lot. In this article, we will see how a new Universal app can be created with MVVM Light support. That should be fun!

Creating the app and adding MVVM Light support

Let’s start by creating a new universal application:

  1. In Visual Studio 2013 Update 2, select the menu File, New Project.
  2. Expand Templates, Visual C#, Universal Apps (see screenshot below).
  3. This create 2 new applications (Windows Phone 8.1 and Windows 8.1) and one Shared node, as shown below.
  4. Right click on the References folder in the Windows 8.1 app, and select Manage Nuget Packages.
  5. Select the Online source for Nuget and search for MVVM Light.
  6. Select the package MVVM Light Libraries only. Alternatively you can select the package named MVVM Light Libraries Only (PCL). This will install the exact same binaries and eventually I will remove this package and keep only the main one.
  7. Repeat steps 4 to 6 for the Windows Phone 8.1 application.

At this point, you have added MVVM Light support to both your applications. Now we can add the files that will bring the full support for the ViewModel layer and the design support.

Figure 1: New Universal app template

Figure 2: Universal application project structure

Adding the viewmodel layer

The next step in this article is to add two files: the ViewModelLocator and the MainViewModel. As usual in MVVM Light, this step is not compulsory and you can use all the MVVM Light components without any additional constraint. But if you want full designer support, it’s probably a good idea to follow the guidance.

  1. Right click on the Shared node and select Add, New Folder. Name this folder ViewModel.
  2. Right click on the new ViewModel folder, select Add, New Item. Add a class and name it MainViewModel.cs.
  3. Modify the MainViewModel class to look like code segment 1 below. Of course you can add a bunch of new methods, observable properties and commands to this ViewModel as usual in MVVM.
  4. Right click on the new ViewModel folder again and select Add, New Item. Select a Class, and name it ViewModelLocator.cs.
  5. Modify the ViewModelLocator code to look like in the code segment 2 below.
  6. Open the App.xaml file in Visual Studio and modify it to look like code segment 3 below. This creates a new resource with the ViewModelLocator, which we will use in the designer. Notice the addition of the “d” and “mc” XML namespaces so that we can mark the ViewModelLocator as a DataSource, which will make it show up in the Data panel in Blend.
public class MainViewModel : ViewModelBase
    private string _helloWorld;

    public string HelloWorld
            return _helloWorld;
            Set(() => HelloWorld, ref _helloWorld, value);

    public MainViewModel()
        HelloWorld = IsInDesignMode 
            ? "Runs in design mode" 
            : "Runs in runtime mode";

Code segment 1: MainViewModel class

public class ViewModelLocator
    public MainViewModel Main
            return ServiceLocator.Current.GetInstance<MainViewModel>();

    static ViewModelLocator()
        ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);

Code segment 2: ViewModelLocator class

<Application x:Class="App2.App"

        <vm:ViewModelLocator x:Key="Locator"
                             d:IsDataSource="True" />

Code segment 3: App.xaml with Locator resource

Wiring the DataContext

Blend is always my preferred tool for this kind of things. It is just so easy! Follow the steps:

  1. Build the application.
  2. Right click on the MainPage.xaml (either in the Windows Phone or in the Windows app) and select Open in Blend.
  3. In Blend, select the Data panel on the far right.
  4. Expand the Project node. You should see the ViewModelLocator. If you expand it, you will see the MainViewModel (property named “Main”).
  5. Grab the Main property in the ViewModelLocator and drag it all the way to the Objects and Timeline panel on the left. Drop it on the Page node in Objects and Timeline. This will set the DataContext of the Page to the MainViewModel.
  6. Back in the DataPanel, expand the Main node.
  7. Grab the HelloWorld property and drag it on the Page’s surface in the designer area. Because this property is of type string, this will automatically add a new TextBlock and set a Binding on its Text property. On the designer surface, you should now see “Runs in design mode”, which is the text that we set in the MainViewModel for design time.
  8. Now open the other MainPage.xaml. If you had started in the Windows Phone app, do that for the Windows 8 app now.
  9. Repeat steps 3 to 7 for this page.
  10. Back in Visual Studio, right click on the phone app and select “Set as Startup”.
  11. Run the application. This will start the Windows Phone version of the app. You should see the text “Runs in runtime mode”.
  12. Go back in Visual Studio and this time set the Windows 8.1 app as startup. Run it, and you will see the same result, but this time in Windows 8.1.

Of course you can also set your page up in XAML directly, as usual.


In this article, we saw how to create a new Universal app for Windows Phone 8.1 and Windows 8.1 with MVVM Light support. We also saw how to create a shared viewmodel layer (admittedly a simple one), how to detect design mode and what the result is in Blend and at runtime. This should get you started with universal apps, and hopefully make the previous article clearer with a practical example.

Upcoming features

While I was able to add Nuget support quite fast, there are still a few things I need to do to offer full MVVM Light support to the new application framework. Here are a few things I have on my mind:

  • Updating the “MVVM Light” package in Nuget. This is the package that installs a ViewModelLocator and a MainViewModel file in addition to the libraries, and which modifies the App.xaml to “wire” the ViewModelLocator for easy usage in Blend.
  • Creating new project templates for the new application frameworks
    • Windows Phone 8.1
    • Universal apps

Once this is done, this will be full support for the new Windows Phone and universal apps.

Please test the new features as described in this article and the previous one, and let me know if you have feedback.

Happy coding

GalaSoft Laurent Bugnion
Laurent Bugnion (GalaSoft)

Share on Facebook

47 Responses to “Building a Universal Application for Windows Phone 8.1 and Windows 8.1 with MVVM Light”

  1. Build 2014 – Day 1 keynote | Burela's house-o-blog Says:

    […] Example of using it with MVVM Light… […]

  2. Ward Bell Says:

    Very clear … and enticing. Looking forward to taking the new MVVMLight out for a drive.

  3. thierry verdier Says:

    Bonjour Laurent
    il y a 2 items de listés dans nuget pour mvvm light libraries only, c’est normal ?

  4. lbugnion Says:

    Fixed, sorry

  5. Microsoft BUILD 2014 Day 1: new and exciting stuff for MS developers | Experiencing the Cloud Says:

    […] Bugnion’s (GalaSoft) feedback: – Building a Universal Application for Windows Phone 8.1 and Windows 8.1 with MVVM Light [April 2, 2014]- About Windows Phone 8.1 and universal apps [April 2, […]

  6. bill Says:

    Love it. This is great. Planning to use it for my next project.

  7. Paul Says:


    first of all I’d like to thank you for creating and maintaining MVVM Light – you’re doing an amazing job with this framework! It really helps, I use it a lot : )

    I have a question regarding EventToCommand feature. An MVVM Light installation package for Universal Apps for Windows Phone 8.1 comes without System.Windows.Interactivity dll. So how can I use EventToCommand feature in WP 8.1? Adding reference to System.Windows.Interactivity for other builds (like wp8 build) does not work (VS doesn’t reckognize namespaces e.g. Interactivity). Thanks in advance for replying : )

  8. Kakone Says:


    When I try to install the nuget package on the Windows Phone 8.1 part (with Visual Studio 2013 Express Update 2), I’ve got this error :

    « MvvmLightLibs » est déjà installé.
    Ajout de « MvvmLightLibs » à MyProject.WindowsPhone.
    Impossible d’installer le package « MvvmLightLibs ». Vous essayez d’installer ce package dans un projet ciblant « WindowsPhoneApp,Version=v8.1 », mais le package ne contient aucun fichier de contenu ou référence d’assembly compatible avec cette infrastructure. Pour plus d’informations, contactez le créateur du package.

  9. thierry verdier Says:

    Bonjour Laurent
    Même question que Paul, ou se situe System.Windows.Interactivity pour utiliser les EventToCommand dans la partie “Shared” de la solution ?

  10. Kakone Says:

    I didn’t install the Nuget package manager update. It works well now. Let’s code !

  11. lbugnion Says:


    Please see this post


  12. thierry verdier Says:

    Bonjour Laurent
    cela signifie-t-il que l’on doit passer par du code-behind pour déclencher les commandes ?

  13. lbugnion Says:

    Did you read the article? Use InvokeCommandAction in Win8.1 and WPA8.1.


  14. Ruben Says:

    Excellent article. Just in time for my new project :)

  15. Strategies for sharing XAML code in Universal Apps (1/2) - Stéphanie Hertrich - Site Home - MSDN Blogs Says:

    […] Laurent Bugnion wrote a short article to start with MVVMLight in universal apps. […]

  16. Muhammad Saifullah Says:

    Thanks lbugnion,
    An Excellent blog to start MVVM Light with Universal app project :)

  17. Stratégies de partage de code XAML dans les applications universelles (1/2) - Stéphanie Hertrich - Site Home - MSDN Blogs Says:

    […] Laurent Bugnion a écrit un petit article pour démarrer un projet avec MVVMLight pour une application universelle. […]

  18. My entry to Xamarin Store Pull Request Contest | Says:

    […] Fortunately my good friend at my XAML endeavors MVVMLight Toolkit is already compatible with the new Universal apps , so all my mvvm stack for connecting my view model to my views, dependency injection and messaging were already working  by just installing some nugets. Here is the gotcha  for universal apps, you can’t add refenreces to your shared project, you should add references to your phone and store projects, and then you can use the naspaces in the shared project, (Laurent has a good intro to mvvmlight and universal apps here). […]

  19. Introducing eXplore Visio–a Windows 8.1 App | bVisual Says:

    […] MVVM Light :… […]

  20. Arno Venter Says:

    Hi Laurent,

    I know previously we used NavigationService to do page navigation in viewmodels.

    What is the approach with the universal apps? It is not the same as for Windows 8 (Phone) 8, correct?

    Could you point me to a blog/tutorial/code sample where this is implemented? Or could you maybe give some guidance?


  21. lbugnion Says:


    You can use the same navigation service than in Windows 8.1 for Windows Phone application 8.1 (wpa81).

    I will post about this tomorrow.


  22. Marais van Zyl Says:

    Hi Laurent,
    Please have a look at this:

    I am now stuck, with no obvious reason why this is failing. Everything is done correctly from what it looks like. Help would be appreciated!

  23. Victor Says:

    Hi Laurent,

    Any ETA on the new project templates for the new application frameworks (Windows Phone 8.1 and Universal Apps)?


  24. Manuel Says:


    I want to create a new universal app for Windows 8.1 and Windows Phone 8.1 with MVVM. In my last projects I’m using the Messenger on my ExtendedSplashscreen to navigate to MainPage if everything is loaded. But this seems not working on unverisal app.

    On the Loaded-Event of the ExtendedSplashscreenPage I’m calling ‘Messenger.Default.Register (this, BoolChanged);’

    After this I’m calling the Init-Method of my ViewModel which sets a IsLoading property first to true and after the init to false. But the BoolChanged event doesn’t fire.

    Any suggestions?

  25. Manuel Says:

    Sorry, my fault. I forget to set the broadcast property in RaisePropertyChanged. You can ignore my last comment.

  26. lbugnion Says:

    No ETA for now, sorry. Lots to do… Nuget works fine in the meantime though I agree with you that it is not as comfortable.

  27. Paul Says:

    On June 21st you said you hoped to post the next day about using MVVM Light with the navigation service in windows phone 8.1. I have not been able to find this post, apologies if I have overlooked it. I’d be very keen to read another of your excellent posts on MVVM, and in particular on how to approach navigation in WP 8.1.

  28. 5 Must Read Resources for Building Universal Windows Store Apps - Canadian Developer Connection - Site Home - MSDN Blogs Says:

    […] Bonus: 6. Using MVVM Light in a Universal Application for Windows Phone 8.1 and Windows 8.1 […]

  29. lbugnion Says:


    I started a series about this topic and should have the first articles coming up soon but life keeps getting in the way.

    Hope this helps,

  30. Yannick Says:


    auriez-vous un tuto qui explique comment écrire une universal App avec mvvm light en plusieurs langues ?

    Par avance merci

  31. [Today's Tip] Article: Building a Universal Application for Windows Phone 8.1 and Windows 8.1 with MVVM Light | .NET Tips and Solutions Says:

    […] MVVM Light support to universal windows apps:… […]

  32. Daniele Says:

    Hi Laurent,
    thanks for the article.
    I have a question about the navigation.
    How I can receive Activate and Deactivate event directly
    in the viewmodel following your instructions to build an
    Universal App using mvvm light toolkit?


  33. Anders Says:

    Thanks a lot for the very nice introduction to using MVVM Light in Universal Apps.

  34. lbugnion Says:

    Hi Daniele,

    Sorry for the delay as I am just back from vacation.
    It is not a good idea to receive the events directly in the ViewModel because this makes it more difficult to port to other platforms where these events are not available. Instead, you should expose methods or commands in the VM, and call these from the view when the events are triggered.

    Hope it helps,

  35. Yannick Says:


    How to localize an universal app Under mvvm light ?


  36. kirito Says:

    Hi, I received a error “The name ‘ViewModelLocator’ does not exist in the namespace using:XXX.ViewModel”, why? I have followed all the steps.
    It must create WP & Win8 projects, after that, the error will be disappeared.

  37. lbugnion Says:

    Is your problem solved now?

  38. Corcus Says:


    I too am experiencing the error ““The name ‘ViewModelLocator’ does not exist in the namespace using:XXX.ViewModel”

    It happens in a universal application but only in the Win8.1 app. The windows phone app runs fine on exactly the same code.
    Is this a known issue?

    Thanks for any answer and thanks for a great framework :)

  39. Alexei Says:

    @Corcus I was experiencing the same issue. I solved it by building the project. The error message went away.

  40. Kaffepaus Says:

    Corcus, I had something similar, but not exactly the same, resharper pointed me to puit MainViewModel and ViewModelLocator in namespace XXX.

    using GalaSoft.MvvmLight.Ioc;
    using Microsoft.Practices.ServiceLocation;

    namespace XXX.ViewModel
    public class ViewModelLocator
    public MainViewModel Main
    return ServiceLocator.Current.GetInstance();

    static ViewModelLocator()
    ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);

  41. Unknown type 'ViewModelLocator' in XML namespace 'clr-namespace:Roadsmart.Lib.ViewModels;assembly=Roadsmart.Lib' | 我爱源码网 Says:

    […] I followed along the guide; […]

  42. MVVM frameworks for Windows RealTime (Universal Apps): which one to choose? | Enzo Contini Blog Says:

    […] Building a Universal Application for Windows Phone 8.1 and Windows 8.1 with MVVM Light (Laurent Bugnion) […]

  43. Daniele Says:

    Hi Laurent,
    I have a question about INAvigationService interface.
    I’m developing an Universal App and I’m using the same approach I used in the previous version.
    But for the Universal app the first page is loaded from the App class and when I press the back button on the phone after having navigate to the second page of my app (using NavigateTo method) the app is closed.
    This is ,I think, the first page is not loaded using the INavigationService Interface.
    I read that even other members asked you how to use the INavigationService for the Universal Windows App.
    Did you ever longer publish something about that?


  44. Daniele Says:

    In addition to my comment above
    If I write a new class inheriting from NavigationService Class
    and in my class I’m gong to manage the HardwareButtons.BackPressed += HardwareButtons_BackPressed
    and I’m going to use this class instaed of the orginal one (NavigationService)
    It could be a good solution?


  45. lbugnion Says:


    I use the same NavigationService implementation for Windows 8 and Windows 10. These are available in the Platform DLL of MVVM Light (GalaSoft.MvvmLight.Platform). In your case, you might have an issue because you try to navigate too early. If you navigate before the Frame is fully loaded, it will cause an exception and your app will crash.

    Regarding your other question, the NavigationService implementation is proposed as a simple implementation which should work in most cases. Of course you should feel free to extend it as needed.

    Take care

  46. Mark Garrett Says:

    I noticed that you don’t explicitly say where to add the various “using” statements, like:
    using GalaSoft.MvvmLight,
    using GalaSoft.MvvmLight.Command, etc
    in the ViewModel.cs, etc.
    I’m running into some error where it just won’t create the page.
    -Mark Garrett

  47. lbugnion Says:


    Yeah that’s correct. It’s really basic stuff and I cannot repeat every time that you should add the “using”. Besides, Visual Studio (with or without Resharper) will help you with that, so that shouldn’t be an issue.

    Take care

Leave a Reply