2

I am trying to understand how storyboards work in iOS development and how MVVMCross fits in. I thought the best solution would be to build an iOS version of the MVVMCRoss TipCalc Tutorial

I am using Storyboards as you cannot edit XIBs in Visual Studio. My current thinking is one Storyboard per screen.

I have it working but it feels like i did it with more luck than judgement. Therefore I want to check my understanding.

In TipCalc.UI.Touch I have

  • TipViewController.cs
  • TipViewController.storyboard

I have added a custom Mvx View Container as suggested in this SO answer. In the CreateViewOfType method of that container I am calling Storyboard.InstantiateViewController and casting that to an IMvxTouchView.

How can a controller be a View as well?

I am planning on having a "View" per storyboard.

If you have multiple views in a storyboard, would you have a controller per view?

When I bring up the Properties window for a "View" in the storyboard designer it has a Name and a class in the Identity section. What is the purpose of the Class property? Does that create a code-behind file?

I am creating the View-to-ViewModel bindings in the ViewDidLoad method of the Controller

public override void ViewDidLoad()
{
    base.ViewDidLoad();
    this.CreateBinding(this.tipValueText).To<TipViewModel>(vm => vm.Tip).Apply();
    this.CreateBinding(this.subTotalTextBox).To<TipViewModel>(vm => vm.SubTotal).Apply();
    this.CreateBinding(this.generositySlider).To<TipViewModel>(vm => vm.Generosity).Apply();
}

These bindings work but again I just wanted to check that it is how others do it too.

Community
  • 1
  • 1
Pat Long - Munkii Yebee
  • 3,592
  • 2
  • 34
  • 68

1 Answers1

1

The iOS ViewController is actually the View in an MVVMCross application. You can think of the view controller as the code behind for the view (so just like a Windows Phone/Windows Store app will have a XAML and related .cs file, or an Android app will have an axml and a java view class)

Yes, when using multiple views in a single storyboard each one will actually be a viewcontroller (since that's what a screen in a storyboard is)

The class property defines which viewcontroller class the layout in the storyboard uses (so which code behind class to use, and if it doesn't exist it will be created)

I prefer a single storyboard as most of my apps don't have too many screens so these are the steps I follow when creating a View in an existing storyboard

  1. Add a ViewController
  2. Type in the view name in the Class field (this name would correspond to the ViewModel name, so HomeView for HomeViewModel, etc.). As soon as you hit enter the ViewController class should be created.
  3. Type in the same view name as the Storyboard Id (this is used to fetch that view)
  4. Add controls and set their names. Setting a control's name will updated the .designer file that was created for the ViewController
  5. Create the ViewDidLoad override in the ViewController class and set up my bindings

If you use a storyboard per view, creating that storyboard with the correct name (HomeView for example) should create the ViewController and designer files for you and give you a storyboard with that one viewcontroller ready to go

edit: in your bindings, you can use one set.Apply(); at the end

EShy
  • 297
  • 4
  • 8