# Adding the iOS View for the first ViewModel

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.

![](/files/-LPPMPyQg-viLi6JRr49)

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:

![](/files/-LPonyVUeKnnopncw-Nv)

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

![](/files/-LPPLaiuVCbIL7-Zvodb)

Click the bottom bar of the `ViewController` to select it:

![](/files/-LPPM_d2D7-7XvA7t7L6)

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:

![](/files/-LPPLi9zsr8AHBOKgjXh)

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:

```csharp
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`;&#x20;
* A `Text Field` control to accept the input from users. Set the `Name` property to `txtUserName`;&#x20;
* 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:

![](/files/-LPPNJ95PNdrWpPcNMBi)

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yanxiaodi.gitbook.io/xamarin-mvvmcross-handbook/using-mvvmcross-to-create-your-first-xamarin-app/creating-the-ios-project/adding-the-ios-view-for-the-first-viewmodel.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.