MVVMCross support for Xamarin.iOS Storyboards

Question

With support for XS integration of iOS storyboards about to make the Stable stream, I would love to be able to use this feature in conjunction with MVVMCross.

Fundamentally it does seem a little like it should not work, as with storyboards indicate navigational hierarchy in the view project, rather than a viewmodel project like MVVMCross.

But it would be awesome if there is a way to make the 2 work together.

Does anyone know how this might be achieved?

Cheers, Tristan

Answer 1

There is at least one sample published showing the use of Storyboards - the rather oddly named eh - https://github.com/slodge/eh

This sample worked by:

• letting the Storyboard control the navigation
• using MvxViewController as a VC base class (in place of UIViewController)
• manually setting the ViewModel in one case - by setting it directly before calling base.ViewDidLoad() - see https://github.com/slodge/eh/blob/master/storyb/RootViewController.cs#L23
• manually setting the Request in one case - during the Segue navigation - see https://github.com/slodge/eh/blob/master/storyb/RootViewController.cs#L40

Using approaches like this it's pretty easy to add Mvx Data-Binding to an application that is primarily driven by the Storyboard.

---

Alternatively, if developers would prefer to let the Mvx ShowViewModel navigation system control the flow of screens - but would also prefer those screens to be designed within a storyboard, then this is possible by developing a normal MvvmCross application, but using a custom Presenter which loads ViewControllers from the storyboard.

In v3.1.1 of MvvmCross, you can do this at the ViewsContainer level:

• override a class MyContainer from MvxTouchViewsContainer.cs
• override the method protected virtual IMvxTouchView CreateViewOfType(Type viewType, MvxViewModelRequest request) - see https://github.com/MvvmCross/MvvmCross/blob/b8545752f28f4e569efeaa397c3085b0373e4d8b/Cirrious/Cirrious.MvvmCross.Touch/Views/MvxTouchViewsContainer.cs#L40

• in this override, load your Storyboard-based ViewControllers:

   protected override IMvxTouchView CreateViewOfType(Type viewType, MvxViewModelRequest request)
   {
       return (IMvxTouchView)UIStoryboard.FromName("MyStoryBoard", null)
                                         .InstantiateViewController(viewType.Name);
   }
  

• create your MyContainer during Setup -

  protected override IMvxTouchViewsContainer CreateTouchViewsContainer()
  {
      return new MyContainer();
  } 
  

• that should just then work...

Answer 2

Storyboard support is now a part of MvvmCross. Use the one ViewController per Storyboard approach as described in Geir's answer, setting the Storyboard ID, and decorate your MvxViewController partial classes with [MvxFromStoryboard]. See sample code on my blog.

Answer 3

In a large project, keeping all views in a single storyboard may be daunting.

I prefer creating one storyboard per view; I modified the Container in Stuart's answer to look for a storyboard matching the view class, and fall back to the main storyboard if not found:

public class StoryBoardContainer : MvxTouchViewsContainer
{
    protected override IMvxTouchView CreateViewOfType(Type viewType, MvxViewModelRequest request)
    {
        UIStoryboard storyboard;
        try
        {
            storyboard = UIStoryboard.FromName(viewType.Name, null);
        }
        catch (Exception)
        {
            storyboard = UIStoryboard.FromName("StoryBoard", null);
        }
        return (IMvxTouchView) storyboard.InstantiateViewController(viewType.Name);
    }
}

Caveat 1: To instantiate viewcontrollers this way, you must set the Storyboard ID in the editor:

Caveat 2: Make sure your views inheriting MvxViewController have the constructor public MyView(IntPtr handle) : base(handle), as this is used to instantiate the view controllers from the storyboard.

Answer 4

I've made a sample project (TipCalc) using mvvmcross and ios storyboard: https://github.com/nicruo/TipCalc.Storyboard