Home > C#, MVVM, Windows Phone, WinRT > MVVM Light and Design Time Data in Windows and Phone apps

MVVM Light and Design Time Data in Windows and Phone apps

08/05/2014

Our apps use various kind of services to retrieve data. This information typically aren’t available at design time, because for example are downloaded using online resources.

Using MVVM Light together with its IoC container, it is straightforward to create View Models that uses a certain service at design time, and another one at runtime, without the need to change the code.

Suppose for example that we have a service defined by the following interface:

public interface IDataService
{
    IEnumerable<Person> GetPeople();
}    

public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

At runtime, people are retrieved through an online service (that may require authentication) and shown in a control like a GridView. But, in order to create the UI of the app, we need to get people also at design time, so we can style the GridView as we want.

To do this, we can define two implementations of the interface, one that actually uses the service, and another that returns dummy data to be used at design time:

public class RuntimeDataService : IDataService
{
    public IEnumerable<Person> GetPeople()
    {
        var people = new List<Person>();

        // In a real scenario, these people are retrived for example via a Web API.
        people.Add(new Person { FirstName = "Donald", LastName = "Duck" });
        people.Add(new Person { FirstName = "Mickey", LastName = "Mouse" });
        people.Add(new Person { FirstName = "Daisy", LastName = "Duck" });

        return people;
    }
}

public class DesignTimeDataService : IDataService
{
    public IEnumerable<Person> GetPeople()
    {
        var people = from n in Enumerable.Range(1, 100)
                     select new Person
                     {
                         FirstName = "Design Time First Name " + n,
                         LastName = "Design Time Last Name " + n
                     };

        return people;
    }
}

Now we need to register these implementations in the ViewModelLocator class (like the one we shown in the previous post about MVVM Light in Universal apps):

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

        if (ViewModelBase.IsInDesignModeStatic)
        {
            // We are at design time.
            SimpleIoc.Default.Register<IDataService, DesignTimeDataService>();
        }
        else
        {
            // We are at runtime.
            SimpleIoc.Default.Register<IDataService, RuntimeDataService>();
        }

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

    // ...
}

At line 7 we use the ViewModelBase.IsInDesignModeStatic property to check if we are at design time (in fact, since the ViewModelLocator is declared as a resource in the App.xaml file, it is automatically instantiated, even if the app isn’t explicitly executed). If so, we register in the MVVM Light SimpleIoC container the type DesignTimeDataService for the interface IDataService. Otherwise, if we are at execution time we register the type RuntimeDataService.

Now we can pass an object implementing the IDataService interface to our View Model:

public class MainViewModel : ViewModelBase
{
    public ObservableCollection<Person> People { get; set; }

    public MainViewModel(IDataService dataService)
    {
        var peopleList = dataService.GetPeople();
        People = new ObservableCollection<Person>(peopleList);
    }
}

In this way, when we are at design time, the type passed to MainViewModel is DesignTimeDataService, and so if we bind the People property to a GridView of a Windows Store app, we’ll obtain something like this in the Visual Studio Designer (it could be necessary to build the project to see the dummy data):

Design Time Data with MVVM Light

Design Time Data with MVVM Light

On the other hand, as we can imagine, at execution time that type received by MainViewModel is RuntimeDataService, so we’ll obtain:

Runtime Data with MVVM Light

Runtime Data with MVVM Light

Moreover, we can check if we are at design time or execution time also inside a ViewModel, using the IsInDesignMode property:

public class MainViewModel : ViewModelBase
{
    public MainViewModel()
    {
        if (IsInDesignMode)
        {
            // We are at design time.
            // ...
        }
        else
        {
            // We are at runtime.
            // ...
        }
    }
}

Note that this use of Design Time data is supported by Blend as well, so we can leverage the same approach to create our user interfaces also with this application.

Categories: C#, MVVM, Windows Phone, WinRT
  1. No comments yet.
  1. 14/05/2014 at 10:19
Comments are closed.
%d bloggers like this: