How to use the IOC Container and MVVM with Phone7.Fx

• Download source - 132.04 KB

Introduction

I will explain in this post how to use the IOC container of the Phone7.Fx with the MVVM pattern in a simple Windows Phone app.

Background

If you need more details on IOC and MVVM, take a look at the definition in Wikipedia: MVVM - IOC.

Using the Code 

The sample (you can find the download link below) contains a View, a view model and service.

The View

The view is a simple XAML page located in the Views directory (it's not mandatory, but it's cleaner in Visual Studio). The first step is to add a behavior called ViewModelBehavior in the XAML code:

<i:Interaction.Behaviors><Mvvm:ViewModelBehavior/></i:Interaction.Behaviors> 

The behavior is used to automatically find the associated ViewModel and to bind it to the datacontext of the View.
The next step is to add an IMainView which implements IView, in the code behind, the MainView class implements the IMainView interface.

public interface IMainView:IView{    }

public partial class MainView : IMainView
{
   // Constructor
   public MainView()
   {
     InitializeComponent();
   }
}

Register a service. In our case, the HelloService provides some data. The service implements the IHelloService.

public class HelloService:IHelloService
{
   public string SayHello()
   {
     return "Hello Phone7.Fx !"
   }
}

With an IOC container, it's not our work to build and to manage the lifetime of the HelloService instance.

In the Application_Launching method in the App.xaml.cs file, we register the mapping between the IHelloService and the HelloService. In this case, when we will need an implementation of IHelloService, the IOC container will resolve the mapping and provide an instance of HelloService.

private void Application_Launching(object sender, LaunchingEventArgs e)
{
    Container.Current.RegisterType<IHelloService, HelloService>();
}

The ViewModel

The viewmodel is automatically bound to the view datacontext with the ViewModelBehavior. To really link them, we have to add some attributes on the View Model class.

The attribute ViewModel links the ViewModel to the View. In our case, the viewmodel needs an implementation of IHelloService. Thanks to the IOC container, the MainViewModel object is automatically instantiated and an instance of IHelloService is provided.

Now, it's possible to call the method SayHello of IHelloService and to set the value of the Message property.

Using the IOC on a viewmodel is very useful because it's now very easy to mock and to implement unit tests on the view model.

[ViewModel(typeof(MainView))]
public class MainViewModel : ViewModelBase<IMainView>
{
    private readonly IHelloService _helloService;
    [Injection]
    public MainViewModel(IMainView view, IHelloService helloService) : base(view)
    {
      _helloService = helloService;
    }

    public override void InitalizeData()
    {
      Message = _helloService.SayHello();
      base.InitalizeData();
    }

    private string _message;
    public string Message
    {
      get { return _message; }
      set { _message = value; RaisePropertyChanged("Message"); }
    }
}

The View Again

The view model is bind to the view datacontext, we can now bind the view model properties to view controls in the XAML code:

<TextBlock Text="{Binding Message}" />

Conclusion

In this article, we have seen that using an IOC container with the MVVM pattern is very useful and easy in a WP7 project.

History

• 7^th November, 2011: Initial post