Xamarin & MvvmCross Handbook
  • Introduction
  • Using MvvmCross to create your first Xamarin App
    • Creating the Core project
      • Understanding MVVM
      • Adding a simple Service
      • Adding a ViewModel
      • Adding an App class
    • Creating the Android project
      • Adding an Android Application class
      • Adding the Android Layout View (AXML)
      • Understanding the data-binding syntax
      • Adding the View class
    • Creating the iOS project
      • Updating the AppDelegate class
      • Adding the iOS View for the first ViewModel
      • Understanding the data-binding syntax
    • Creating the UWP project
      • Updating the App.xaml.cs and the App.xaml
      • Adding the UWP View
      • Understanding the data-binding syntax
    • Creating the REST API Service
      • Creating the models
      • Creating the interface and the implementation for the PostService
      • Creating the ViewModel
      • Adding the View for the Android project
      • Adding the View for the iOS project
      • Adding the View for the UWP project
    • Navigation
      • Creating the PostDetail View & ViewModel
      • Command with the parameter
      • Retrieving the param from the previous ViewModel
      • Understanding the IMvxNavigationService
      • Responding the events from different controls in the ListView
      • Retrieving the return result from the previous ViewModel
    • Creating the Xamarin.Forms project
      • Creating the Forms.UI project
      • Adding the App.xaml and the App.xaml.cs
      • Adding the View
      • Creating the Android project
      • Creating the iOS project
      • Creating the UWP project
      • Summary For Forms
    • Summary
  • Implementing MasterDetail layout in Xamarin.Forms by MvvmCross
    • Introduction
    • Creating the project by MvxScaffolding
    • Creating the MasterDetailPage
      • Creating the ViewModel
      • Creating the XAML file
    • Creating the MasterPage
      • Creating the ViewModel
      • Creating the XAML file
    • Creating the DetailPages
      • Creating the ViewModels
      • Creating the XAML files
    • Implementing the Menu functionalities
      • Displaying the MasterPage and the DetailPage
      • Setting the menu navigation
      • The other approaches to set the data-binding
    • Fine-tuning the UI
      • Adding the hamburger icon for iOS
      • Adding the header bar for Android and iOS
      • Adjust the height of the item for UWP
    • Summary
Powered by GitBook
On this page

Was this helpful?

  1. Using MvvmCross to create your first Xamarin App
  2. Creating the iOS project

Adding the iOS View for the first ViewModel

PreviousUpdating the AppDelegate classNextUnderstanding the data-binding syntax

Last updated 6 years ago

Was this helpful?

Keep in mind that although you can place multiple view controllers on one storyboard, the better way to use MvvmCross for iOS is to create one storyboard per view, which unify the navigation pattern with the other platforms. So we can have a clear structure, rather than placing multiple views in one storyboard.

To build and debug the iOS App, you need to pair to Mac first. When you build the project, you might encounter an error that is:

Could not find any available provisioning profiles for iOS.

Open options dialog of VS 2017 and select Xamarin > Apple Accounts, then click the Install Fastlane button. Also, make sure to check the Remote Simulator to Windows checkbox so we can use the iOS simulator on our Windows.

Create a new folder called Views into the root folder of the MvvmCrossDemo.iOS project. Then create an empty StoryBoard called FirstView.storyboard to the Views folder:

Use the designer and drag a ViewController from the Toolbox to the FirstView.Storyboard like this:

Click the bottom bar of the ViewController to select it:

Then set the Class property and the Storyboard ID of it to FirstView. Make sure the Use Storyboard ID checkbox is checked, as shown below:

Then it will create two associated files: the FirstView.cs and the FirstView.designer.cs. Move them to the Views folder. Change the namespace of the FirstView.cs and the FirstView.designer.cs from Blank to MvvmCrossDemo.iOS.Views. Update the FirstView class to inherit from MvxViewController<FirstViewModel>, and add an attribute called MvxFromStoryboard with a parameter FirstView , which indicates the name of the storyboard file, as shown below:

using MvvmCross.Binding.BindingContext;
using MvvmCross.Platforms.Ios.Views;
using MvvmCrossDemo.Core.ViewModels;
using System;

namespace MvvmCrossDemo.iOS.Views
{
    [MvxFromStoryboard("FistView")]
    public partial class FirstView : MvxViewController<FirstViewModel>
    {
        public FirstView (IntPtr handle) : base (handle)
        {
        }

    }
}

The Xamarin Designer for iOS allows us to drag and drop controls to edit the UI. Also, we can use it to set up the event handlers. Drag some controls from the Toolbox and place them on the ViewController:

  • A Lable control. Set the Text property to Your Name;

  • A Text Field control to accept the input from users. Set the Name property to txtUserName;

  • A Button to respond the click event. Set the Name property to btnShowGreeting and the Title property to Click Me! .

  • A Label to show the greeting message. Set the Name property to lblGreeting.

The controls must have the names so it can be accessed in the code. Now we have an UI like this:

The FirstView.designer.cs file is generated by iOS Designer to map the visually-constructed interface to code. Usually, do not modify this file manually. But sometimes, I found that the namespace of this file cannot be updated correctly if you update the namespace of the FirstView.cs file. So be carefully to check it and make sure they have the same namespace.