Getting Started with Xamarin & MVVM Light - iOS Step By Step

iOS BasicNavigation App implementation

This post details the Step by Step instructions to re-create the iOS implementation of the BasicNavigation example. It should be read in conjunction with the post Getting Started with Xamarin & MVVM Light.

The application consists of two pages which demonstrate using the MVVM Light Navigation Service.

Main Page

Second Page

Note when using iOS Storyboard’s the ViewController’s should derive from ControllerBase which itself derives from UIViewController.

Open the AppDelegate class and add these using statements:-

using GalaSoft.MvvmLight.Ioc;
using GalaSoft.MvvmLight.Threading;
using GalaSoft.MvvmLight.Views;
using BasicNavigation.ViewModel;

Next edit the FinishedLaunching method to initialise the MVVM Light DispatcherHelper, create the NavigationService and register it with the SimpleIoc container and configure the navigation service.

Note that the configure method of the Navigation Service is overloaded, for iOS storyboards the version with two strings should be used, the second parameter is the StoryboardId. When using iOS XIB’s (and Android) the overload of the Configure method with string and Type parameters should be used.:-

using UIKit;
using BasicNavigation.ViewModel;
namespace BasicNavigation.iOS
{
public class Application
{
private static ViewModelLocator locator;
// This is the main entry point of the application.
static void Main (string[] args)
{
// if you want to use a different Application Delegate class
// from "AppDelegate"
// you can specify it here.
UIApplication.Main (args, null, "AppDelegate");
}
public static ViewModelLocator Locator
{
get
{
return locator ?? (locator = new ViewModelLocator());
}
}
}
}

The Single View App project template creates a ViewController as shown in the Main.Storyboard in the designer below.

Right click the Black Bar labelled View Controller and choose the Delete option.

Next Right click the ViewController.cs class which was also created by the Single App project template. Select the Remove option.

Now return to the Main.storyboard open in the designer. Select the Navigation Controller in the Toolbox.

Now drag it onto the design surface. This will create a Navigation Controller and a Root View Controller.

Click the black bar at the bottom of the Root View Controller and set the Class property to MainViewController. when Return is pressed the class will be created.

Click on the top of this MainViewController on the text ‘Root View Controller’ and change the Title property from ‘Root View Controller’ to ‘First Page’.

Drag a Label onto the MainViewController and set the name property to WelcomeText.

Drag a Button onto the MainViewController and set the Name property to NavigateButton and the Title to ’Navigate to Second Page’.

Now zoom out a little so there is a little more room and drag another ViewController onto the designer. This will be the second page of the application. Edit the properties of this view controller so the Class property = ‘SecondViewController’ (the class will be created when the Return key is pressed), Storyboard Id property = ‘SecondPage’, Restoration ID = ‘Second Page’ and the Tile property = ‘Second Page’. The StoryboardId is used by the NavigationService.

Drag a Button onto the SecondViewController and set the Name property to BackButton and the Title to ’Back’.

Open the MainViewController class and add the using statements:-

using System;
using System.Collections.Generic;
using GalaSoft.MvvmLight.Helpers;
using BasicNavigation.ViewModel;
using GalaSoft.MvvmLight.Views;

Change the class to derive from ControllerBase.

partial class MainViewController : ControllerBase

Now add the private member variable to retain the bindings and prevent them from being garbage collected:-