Click here to Skip to main content
Click here to Skip to main content

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

By , 7 Nov 2011
Rate this:
Please Sign up or sign in to vote.

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.

img1.png

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

  • 7th November, 2011: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Nicolas Humann
Technical Lead
France France
Specialized in .net technologies for many years, I am a technology fan in both asp.net and wpf/silverlight, using c# and .NET 4.
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 4 PinmvpKanasz Robert21-Sep-12 0:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140415.2 | Last Updated 7 Nov 2011
Article Copyright 2011 by Nicolas Humann
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid