MartinNeumann.se

I’m going to show you how to combine Xamarin.Forms pages and native iOS pages created in a storyboard. I’m using Xamarin.Forms 1.3.1, Xamarin 3.9, Xamarin.iOS, 8.6 and Visual Studio 2013.

Create project

We start by creating a Blank App (Xamarin.Forms Portable) named MyFormsNativeProject. The project contains four projects but we are only interested in the PCL, which is named MyFormsNativeProject, and the iOS project, named MyFormsNativeProject.iOS.

PCL project

In the PCL project, create a Forms ContentPage called MyiOsPage.cs. This is the Xamarin.Forms file that we are going to override for iOS with a view controller from a storyboard. Go to App.cs and create a new object of class MyiOsPage that we assign to MainPage in the App constructor:

public App()
{
   MainPage = new MyiOsPage();
}

Now we move on to the iOS project where the real work is being done.

iOS project

In this simple setup we start by creating a storyboard from Visual Studio. I use a iPhone Storyboard View Controller named MainStoryboard just to make it simple. This will generate two files: MainStoryBoard.cs and MainStoryBoard.storyboard. We’re going to concentrate on the MainStoryboard.storyboard file where we will add our controls.

When you open up the .storyboard file you see a view controller that is created by default. Click on the bottom gray area of the view controller. In the Properties window you see three tabs, click on the one named Widgets. The class name is MainStoryboard but we want to change that to MainViewController. This will generate a new file called MainViewController.cs in the iOS project. The Storyboard ID and the Restoration ID in the Widgets tab are by default empty but add MainViewController to them as well.
When that is done you can add the controls that you want to the page. For this, I just add a UILabel and a UIButton that shows some text on the label when the button is pressed. If you double-click on the button in the design view, an event is created in the MainViewController.cs file. Add code that updates the label with some text. Now we are done with the design of our page in iOS.

Next we create the storyboard programmatically in the AppDelegate.cs file by adding a static field like this:

public static UIStoryboard Storyboard = UIStoryboard.FromName("MainViewController", null);

Now we are at our final stage in the process, overriding MyiOsPage from the PCL project. To do this we create a class file named MyiOsPageRenderer that inherits from PageRenderer. Between the usings section and the namespace, add the following line:

[assembly:ExportRenderer(typeof(MyFormsNativeProject.MyiOsPage),typeof(MyFormsNativeProject.iOS.MyiOsPageRenderer))]

Then we override the OnElementChanged method like this:

protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
    base.OnElementChanged(e);

    var hostViewController = ViewController;

    var viewController = (MainViewController)AppDelegate.Storyboard.InstantiateViewController("MainViewController");

    hostViewController.AddChildViewController(viewController);
    hostViewController.View.Add(viewController.View);

    viewController.DidMoveToParentViewController(hostViewController);
}

That’s it! When we run the iOS project we are greeted with the iOS page that we created using a storyboard and called from a Xamarin.Forms page.

Any comments or question are appreciated and I will answer them as quickly as I can.

Good luck in your Xamarin coding!