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

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. If you need more details on IOC and MVVM, take a look of the definition in Wikipedia: MVVM - IOC.

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 implement IView, the 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 provide 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<IHelloServiceHelloService>();
}

The ViewModel

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

The attribut 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 instanciated 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 usefull 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 cointainer with the MVVM pattern is very usefull and easy in a WP7 project.

You can find the complete source code here: Phone7.fx.IOC-MVVM.zip (139,99 kb)

Comments are closed

Hi there !

 

Specialized in .net technologies for many years, I am a technology fan in both asp.net and wpf/silverlight, using c# and .net 4.

Taking advantages of new opportunities offered by the Windows Azure platform and WP7, I develop applications for Windows 7 Phone, 2 of them are already available on the market place.


 

 

Month List