Home > C#, MVVM, Universal Windows Platform > Integrating Template10 with MVVM Light

Integrating Template10 with MVVM Light

15/09/2015

Template10 is an advanced project template for the Unversal Windows Platform. It’s an open source project available on GitHub at https://github.com/Windows-XAML/Template10. If you don’t know about it, I suggest you to read the great article Template10: a new template to create Universal Windows apps – The basics by Matteo Pagani (Support Engineer at Microsoft).

The template has been created with MVVM in mind, and in fact contains some useful classes that simplify the adoption of this pattern (like BindableBase and ViewModelBase). But it isn’t an MVVM Framework (or toolkit). However, it’s easy to integrate Template10 with, for example, MVVM Light. Let’s see how to do that.

First of all, let’s add the template to our app, as described in the post linked above (you can also find it on NuGet). Then, we need to add MVVM Light using NuGet: search for the MvvmLightLibs package and install it. As NuGet 3.0 doesn’t allow anymore to run installation script, even if we choose the MvvmLight package, it will not install additional files like ViewModelLocator, nor it will modify the App.xaml file with its reference. So, we need to perform these steps manually.

Let’s create a folder called ViewModels with a MainViewModel.cs file:

public class MainViewModel : Template10.Mvvm.ViewModelBase
{
    public string HelloMessage { get; }

    public MainViewModel()
    {
        HelloMessage = "Hello from Mvvm!";
    }

    public override void OnNavigatedTo(object parameter, NavigationMode mode, 
        IDictionary<string, object> state)
    {
        base.OnNavigatedTo(parameter, mode, state);
    }
}

Note that MainViewModel inherits from a class contained in the Template10 (that, among the others, define the OnNavigatedTo method: as we’ll see, it we’ll be invoked when the user navigates to the associated page.

Now we need to implement a ViewModelLocator:

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

        SimpleIoc.Default.Register<MainViewModel>();
    }

    public MainViewModel MainViewModel 
        => ServiceLocator.Current.GetInstance<MainViewModel>();
}

Finally, let’s insert the ViewModelLocator in the Application Resources (App.xaml):

<common:BootStrapper
    ...>

    <Application.Resources>
        <ResourceDictionary>
            <vm:ViewModelLocator x:Key="Locator" 
                            xmlns:vm="using:Template10MvvmLight.ViewModels" />
        </ResourceDictionary>
    </Application.Resources>
    
</common:BootStrapper>

And set the DataContext of MainPage.xaml:

<Page
    x:Class="Template10MvvmLight.MainPage"
    DataContext="{Binding Source={StaticResource Locator}, Path=MainViewModel}"
    ...>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Text="{Binding HelloMessage}" HorizontalAlignment="Center"
                   VerticalAlignment="Center" />
    </Grid>
</Page>

We can now test the app. Set a breakpoint in the OnNavigatedTo method of the MainViewModel class and run the project: as we expect, it will be called on page activation and then the TextBlock will show the HelloMessage property of the view model.

You can download the complete example using the link below:
Integrating Template10 with MVVM Light

In the next post, we’ll see how to use the other services provided by MVVM Light, so stay tuned!

  1. ben
    22/09/2015 at 23:02

    Nice! Just a question, how do we use the nice superset of MVVMLight? We’re inheriting ViewModelBase’s Template10, but we do not profit anymore of the RelayCommand, Messenger because we do not inherit the ViewModelBase’s MVVMLight.

    • 22/09/2015 at 23:06

      I’ll talk about RelayCommand, Messenger and much more in my next posts, so keep following my blog🙂

  1. 15/09/2015 at 12:36
  2. 23/09/2015 at 11:03
Comments are closed.
%d bloggers like this: