AutoWireModel and ViewModelLocator in Xamarin Forms with IOC container

AutoWireModel and ViewModelLocator in Xamarin Forms with IOC container

For Xamarin Forms the recommended pattern for apps is the MVVM pattern. This means we create view using XAML (or C#) and connect it with a view-model using data binding. The view-model contains all the UI logic and connects to other service classes to retrieve data from a server.

What we like to do is view-models instantiated automatically using an IOC container, so all the constructor injection takes place. As the view-models are the central part of MVVM apps, we get IoC for the majority of the app just with this piece of code.

How to integrate an IOC container so the views get the viewmodels injected and all dependencies are resolved as part of the constructor injection?

Solution

We will use SimpleInjector but you can do basically the same with every other container that runs on .net Core and the Xamarin Forms. To use simple injector with Xamarin Forms the only thing I had to do was to add the SimpleInjector NuGet package to the project.

Following steps we need to follow to create AutoWireModel with ViewModelLocator

1. Create a ViewModelLocator which creates an attached property for the views called AutoWireViewModel (boolean).
2. When the AutoWireViewModel is set the ViewModelLocator looks for a matching view model class using a naming convention.
3. The view model gets resolved using SimpleInjector IoC container.
4. The view model instance then gets set as the views BindingContext.
5. The normal binding sets in because BindingContext was set.

Set Up ViewModelLocator

Create a folder named ViewModelLocator and create a staticclass ViewModelLocator that will hold a singleton reference to the SimpleInjector container. It also defines the AutoWireViewModel property. In the change handler OnAutoWireViewModelChanged youfind the resolving of the view model and its assignment to BindingContext of the view.

In the static constructor we instantiate the SimpleInjectorcontainer called Container. And then we will call ourhelper IoCRegistrations.RegisterDependencies todo all the registrations.

Usage of the View Model Locator in the View

Create a BaseView and add your set your AutoWireModelproperty as True.

Now you can create any view and inherit it with your Base View, and your View Model will get automatically binded with your View. Creating a BaseView helps us to avoid setting up AutoWireModel property as True in every View.

Please note: The naming convention should be followed in same way as we have mentioned in our AutoWireModel. We have kept our View name with postfix View and our View Model with postfix ViewModel or else based on your naming convention you can update the code in OnAutoWireViewModelChanged method.

Image credit: Image by vectorjuice on Freepik

‍