How to use Multiple View Controller in Single Page in Xamarin iOS
Tags: collection, howtousemultiple, ios, tableviewinxamari
Published: 2020-02-02 09:07:14

---
title: How to use Multiple View Controller in Single Page in Xamarin iOS
published: true
date: 2020-01-09 17:30:00 UTC
tags: Collection,How to use multiple ,iOS,Table View in Xamari
canonical_url: https://logeshpalani.blogspot.com/2020/01/how-to-use-multiple-view-controller-in.html
---

[![](https://1.bp.blogspot.com/-IbOXcfcYw3E/XhdilaLxOMI/AAAAAAAAPp8/sj3RYJxJdAI0hHOwcqvrBIGFVN8kUkJawCLcBGAsYHQ/s640/Blog%2BBanner.PNG)](https://1.bp.blogspot.com/-IbOXcfcYw3E/XhdilaLxOMI/AAAAAAAAPp8/sj3RYJxJdAI0hHOwcqvrBIGFVN8kUkJawCLcBGAsYHQ/s1600/Blog%2BBanner.PNG)

## **Introduction**

In this blog, I will explain how to handle multiple view controllers on a single page in Xamarin iOS. If you're interested in learning this, just read the entire post. Since there is no default functionality for showing multiple view controllers in iOS. Some of the application designs are complicated too. In such circumstances hiding & showing views in single _ViewController_ is really not the smart way. So, we need to separate the views. This sample, I have created multiple _ViewController'_s and to present on a single page. Here, I will show you to present multiple view controllers in a single page.

  

## iOS output

[![](https://1.bp.blogspot.com/-fsoVekErkY8/XhYMNLlyEeI/AAAAAAAAPoA/ctsUuDIX9vEFkUcNWlmZgaCfXbqZgrvYQCLcBGAsYHQ/s320/ezgif.com-resize.gif)](https://1.bp.blogspot.com/-fsoVekErkY8/XhYMNLlyEeI/AAAAAAAAPoA/ctsUuDIX9vEFkUcNWlmZgaCfXbqZgrvYQCLcBGAsYHQ/s1600/ezgif.com-resize.gif)
  

## Prerequisites 

- Visual Studio 2019 
- XCode 10.0 or above
- Physical device or simulator 
- This project created in Visual Studio 2019 for Mac

## Let's start

### Step 1:

Create Xamarin iOS  Single View Application by navigating to Visual Studio File Menu  >> New Project >> In the dialog window >> select left plane _App_ under _iOS_ and center plane select _Single View Application_ and click _Next_.  
  

[![](https://1.bp.blogspot.com/-Z8Oq5WH1aos/XZZJP1gNaOI/AAAAAAAAPFg/xsUQoXD0wY8u0HfYMWvv5ubGSvXoAvuGQCPcBGAYYCw/s320/Xamarin%2BiOS%2B1.png)](https://1.bp.blogspot.com/-Z8Oq5WH1aos/XZZJP1gNaOI/AAAAAAAAPFg/xsUQoXD0wY8u0HfYMWvv5ubGSvXoAvuGQCPcBGAYYCw/s1600/Xamarin%2BiOS%2B1.png)
  

  

### Step 2:

In the next window, give your application a name, target version & device type (tab or mobile), organize & bundle identifier and click _OK_.

  

[![](https://1.bp.blogspot.com/-SJScZDMzZjs/XZZJ1HeesxI/AAAAAAAAPFo/f6OwS-yY3ioZLvxdLLuttHvuO5ZeEealwCPcBGAYYCw/s320/Xamarin%2BiOS%2B2.png)](https://1.bp.blogspot.com/-SJScZDMzZjs/XZZJ1HeesxI/AAAAAAAAPFo/f6OwS-yY3ioZLvxdLLuttHvuO5ZeEealwCPcBGAYYCw/s1600/Xamarin%2BiOS%2B2.png)
  

### Step 3:

After the project creation, you will get a folder structure like below.  
  

[![](https://1.bp.blogspot.com/-57PuP2t3S1I/XZZKryC1Q9I/AAAAAAAAPGI/RrvCnVFow6YXKKzqimzRrwjjPEMJPhcPgCPcBGAYYCw/s320/Xamarin%2BiOS%2BProject%2BStructure.png)](https://1.bp.blogspot.com/-57PuP2t3S1I/XZZKryC1Q9I/AAAAAAAAPGI/RrvCnVFow6YXKKzqimzRrwjjPEMJPhcPgCPcBGAYYCw/s1600/Xamarin%2BiOS%2BProject%2BStructure.png)
  

  

Now, open storyboard in you interface builder using the right click of Main.Storyboard >> in the context menu select _Open with >>_ forwarded by XCode Interface Builder.

  

[![](https://1.bp.blogspot.com/-8aZ87Lyzd7A/XZZKr1Wv0MI/AAAAAAAAPGE/hYAg1aLP62gtrU2jPSIKEcuIKwd7kn8SACPcBGAYYCw/s320/Xamarin%2BiOS%2B3.png)](https://1.bp.blogspot.com/-8aZ87Lyzd7A/XZZKr1Wv0MI/AAAAAAAAPGE/hYAg1aLP62gtrU2jPSIKEcuIKwd7kn8SACPcBGAYYCw/s1600/Xamarin%2BiOS%2B3.png)
  

### Step 4:

It's time to design our interface. Default one view controller will be there, We should place _Navigation Controller_ in-front of Initial _View Controller._ Drag and drop the _UICollectionView_ and _View. _ Here, collection view for creating a tabbed  page and view for set another controller view to this view. Because there is no default control for the tabbed page and set this collection view height and constraints as per your requirements. Create an outlet for _CollectionView and View_ as  _collectionView_ and _baseView_

[![](https://1.bp.blogspot.com/-2_P3EwqUdlw/XhYQE6srRqI/AAAAAAAAPoc/Oj9jKT4ZjeIddPkl4b6idGXyHkjVPIfhgCLcBGAsYHQ/s320/Screenshot%2B2019-12-13%2Bat%2B6.35.53%2BPM.png)](https://1.bp.blogspot.com/-2_P3EwqUdlw/XhYQE6srRqI/AAAAAAAAPoc/Oj9jKT4ZjeIddPkl4b6idGXyHkjVPIfhgCLcBGAsYHQ/s1600/Screenshot%2B2019-12-13%2Bat%2B6.35.53%2BPM.png)
  

  

Next, select collection view and open properties plane and set the size is _None._

  
  

[![](https://1.bp.blogspot.com/-mpQXspcaqRY/XhYQD352zmI/AAAAAAAAPoQ/uDJikABTio8IzXefDpLk3Ep1jB04f5taQCEwYBhgL/s1600/Screenshot%2B2019-12-13%2Bat%2B6.34.38%2BPM.png)](https://1.bp.blogspot.com/-mpQXspcaqRY/XhYQD352zmI/AAAAAAAAPoQ/uDJikABTio8IzXefDpLk3Ep1jB04f5taQCEwYBhgL/s1600/Screenshot%2B2019-12-13%2Bat%2B6.34.38%2BPM.png)
  

## Add First View Controller 

Next, drag and drop the new view controller and set the background color as red and add label view in the center of the page. Create a new _ViewController_ class named as _FirstViewController to assign this ViewController._  
  
  

[![](https://1.bp.blogspot.com/-gYfJeKWYbHU/XhYQFUmmN8I/AAAAAAAAPog/xbjHomJ0MVEllu6a12l1AHfJCYq7VpbygCEwYBhgL/s320/Screenshot%2B2019-12-13%2Bat%2B6.37.22%2BPM.png)](https://1.bp.blogspot.com/-gYfJeKWYbHU/XhYQFUmmN8I/AAAAAAAAPog/xbjHomJ0MVEllu6a12l1AHfJCYq7VpbygCEwYBhgL/s1600/Screenshot%2B2019-12-13%2Bat%2B6.37.22%2BPM.png)
  

  

## Add Second View Controller

Similarly, create another view controller and set the background color as yellow and place one label in the center of the page. As well as create another view controller class named _SecondViewController_ to assign to this View Controller.

  

  

[![](https://1.bp.blogspot.com/-LmTfqxfKVVk/XhYQFdfItOI/AAAAAAAAPok/93dWwk48fZA_YlHgFYsX3bu2pJuF5a38wCEwYBhgL/s320/Screenshot%2B2019-12-13%2Bat%2B6.37.28%2BPM.png)](https://1.bp.blogspot.com/-LmTfqxfKVVk/XhYQFdfItOI/AAAAAAAAPok/93dWwk48fZA_YlHgFYsX3bu2pJuF5a38wCEwYBhgL/s1600/Screenshot%2B2019-12-13%2Bat%2B6.37.28%2BPM.png)

  

finally, your storyboard looks like below

  

[![](https://1.bp.blogspot.com/-8_g0ArzmFsY/XhYQD6Lv_BI/AAAAAAAAPo8/MZ0_SGmgV4IblwzYWzdFFh8x1_UrmX0MACEwYBhgL/s320/Screenshot%2B2019-12-13%2Bat%2B6.34.18%2BPM.png)](https://1.bp.blogspot.com/-8_g0ArzmFsY/XhYQD6Lv_BI/AAAAAAAAPo8/MZ0_SGmgV4IblwzYWzdFFh8x1_UrmX0MACEwYBhgL/s1600/Screenshot%2B2019-12-13%2Bat%2B6.34.18%2BPM.png)

  

  

### Step 5:

Now, add new Collection View Cell for tab design using right-click the solution >> add >> new _File_ >> new dialog window will appear, in the left plane select iOS,>> center plane, select _Collection View Cell _and give the name as _TabCollectionViewCell_ and then click Add.

  

[![](https://1.bp.blogspot.com/-CjBeecaw3GU/Xhda6etJrLI/AAAAAAAAPpw/JyH-s5AM7J8ucpJev-PGx4SkJ4Nd6AD8QCLcBGAsYHQ/s400/collection%2Bview%2Bcell.png)](https://1.bp.blogspot.com/-CjBeecaw3GU/Xhda6etJrLI/AAAAAAAAPpw/JyH-s5AM7J8ucpJev-PGx4SkJ4Nd6AD8QCLcBGAsYHQ/s1600/collection%2Bview%2Bcell.png)
  

## **Design Collection View Cell**

Next, open this Collection View Cell in an Interface builder. Add the following views in the collection view cell.

- Label - Tab title
- View - Active tab indicator

The label in the center of the cell and view height 5. Set the perfect constraint for this view. If the constraint are missing, no view will be present in the view controller. Create an outlet for this view to access from the code behind.  
  

[![](https://1.bp.blogspot.com/-lq9u2o7ugLo/XhdX_mPq6mI/AAAAAAAAPpk/0v7aS4BStXc6CrCHJJRTSy-1SuI8GTh-QCLcBGAsYHQ/s320/Screenshot%2B2020-01-09%2Bat%2B6.20.02%2BPM.png)](https://1.bp.blogspot.com/-lq9u2o7ugLo/XhdX_mPq6mI/AAAAAAAAPpk/0v7aS4BStXc6CrCHJJRTSy-1SuI8GTh-QCLcBGAsYHQ/s1600/Screenshot%2B2020-01-09%2Bat%2B6.20.02%2BPM.png)
  

  

There is one problem to apply data to view, you couldn't access this outlet's from any other class, so we can create one method to update data for views  
  

  

```
internal void UpdateCell(string title, bool visible)  
{
            titleLabel.Text = title;
            titleLabel.TextColor = UIColor.White;

if (visible)
                indicatorline.Hidden = false;
else
                indicatorline.Hidden = true;
        }
```

  

###   
Step 6:

Next moving into the coding part. First, we are going to write a code for the collection view. The view needs _CollectionView_ needs collection view source and delegate class. The collection view there is no way to give input directly, so we need to write source class and pass your data to this class. The delegate class for cell item sizing and handle the item click event. Afterward, apply these two classes to this collection view.

  

## Add Collection View Source Class

First, create a source class named _CollectionViewSource _and this class should be inherited from _UICollectionViewSource _and pass the data through the contractor. This page code is given below.  
  
  

```
public class CollectionViewSource : UICollectionViewSource
    {
private List<string> titles;
public static int selectedIndex;

public CollectionViewSource(List<string> titles, int Index)  
{
this.titles = titles;
            selectedIndex = Index;
        }
public override UICollectionViewCell GetCell(UICollectionView collectionView, NSIndexPath indexPath)  
{
var cell = collectionView.DequeueReusableCell("TabCollectionViewCell", indexPath) as TabCollectionViewCell;

if (indexPath.Row == selectedIndex)
                cell.UpdateCell(this.titles[indexPath.Row], true);
else
                cell.UpdateCell(this.titles[indexPath.Row], false);

return cell;
        }
public override nint GetItemsCount(UICollectionView collectionView, nint section)  
{
return titles.Count;
        }
    }
```

  
  

## Add the Collection View Delegate Class

Create another delegate class named _CollectionViewSourceDelegate_ and this class should be inherited from _UICollectionViewDelegateFlowLayout._ In this class, constructor is passing one ITab interface to the view controller.

  

```
public class CollectionViewSourceDelegate : UICollectionViewDelegateFlowLayout
    {
int listCount;
        ITab iTab;
public CollectionViewSourceDelegate(int count, ITab iTab)  
{
this.listCount = count;
this.iTab = iTab;
        }
public override nfloat GetMinimumInteritemSpacingForSection(UICollectionView collectionView, UICollectionViewLayout layout, nint section)  
{
return 0;
        }
public override CGSize GetSizeForItem(UICollectionView collectionView, UICollectionViewLayout layout, NSIndexPath indexPath)  
{
var size = new CGSize();
            size.Width = collectionView.Frame.Width / 2;
            size.Height = collectionView.Frame.Height;
return size;
        }
public override void ItemSelected(UICollectionView collectionView, NSIndexPath indexPath)  
{
            iTab.OnTabChange(indexPath.Row);
            CollectionViewSource.selectedIndex = indexPath.Row;
            collectionView.ReloadData();
        }
    }
```

  

## Create ITab interface

Create a new Interface named _ITab.cs_ by going to Solution Explorer >> Add new file >>  select Interface and give the name as ITab and click Add. Add one method OntabChange and one integer parameter value.

  

```
public interface ITab
    {
void OnTabChange(int indexPath);
    }
```

  
Next, open _ViewController.cs_ file. First, we need to setup view controllers and present them into view. Add the _FirstViewController_ and _SecondViewController _as _Child View Controller_ of this class and set the bounds equal of _baseView_ view. Load the view controller based on Index selection. In the _OnTabMethod _ call the _LoadViewMethod_ and pass the index. create a static string list and pass to collection view source class.
  

```
using Foundation;
using System;
using System.Collections.Generic;
using UIKit;

namespace ManageChildVC
{
public partial class ViewController : UIViewController, ITab
    {
private FirstChildViewController firstController;
private SecondChildViewController secondController;

public ViewController(IntPtr handle) : base(handle)  
{
        }

public override void ViewDidLoad()  
{
base.ViewDidLoad();
// Perform any additional setup after loading the view, typically from a nib.

var tabTitles = new List<string>() { "Tab 1 💝", "Tab 2 👨🏻‍💻" };

            SetUpChildViewControllers();

            collectionView.RegisterNibForCell(TabCollectionViewCell.Nib, "TabCollectionViewCell");
            collectionView.Source = new CollectionViewSource(tabTitles, 0);
            collectionView.Delegate = new CollectionViewSourceDelegate(tabTitles.Count, this);
            collectionView.ReloadData();

            LoadController(0);
        }

private void SetUpChildViewControllers()  
{
            AddViewControllerAsChildViewController(FirstTabViewController());
            AddViewControllerAsChildViewController(SecondTabViewController());
        }
public UIViewController FirstTabViewController()  
{
            firstController = this.Storyboard.InstantiateViewController("FirstChildViewController") as FirstChildViewController;
return firstController;
        }
public UIViewController SecondTabViewController()  
{
            secondController = this.Storyboard.InstantiateViewController("SecondChildViewController") as SecondChildViewController;
return secondController;
        }

private void AddViewControllerAsChildViewController(UIViewController viewController)  
{
this.AddChildViewController(viewController);
            View.AddSubview(viewController.View);
            viewController.View.Frame = ViewControllerSpace.Frame;
            viewController.DidMoveToParentViewController(this);
            viewController.View.Hidden = true;
        }

public override void DidReceiveMemoryWarning()  
{
base.DidReceiveMemoryWarning();
// Release any cached data, images, etc that aren't in use.
        }

public void OnTabChange(int indexPath)  
{
            LoadController(indexPath);
        }

private void LoadController(int indexPath)  
{
            collectionView.ReloadData();

if (indexPath == 0)
            {
                firstController.View.Hidden = false;
                secondController.View.Hidden = true;
            }
else if (indexPath == 1)  
{
                firstController.View.Hidden = true;
                secondController.View.Hidden = false;
            }
        }
    }
}
```
  

  

### Step 7:
Now, run the application, you will get a view like below, select the tabs, based on tab selection the view will change.  
  

[![](https://1.bp.blogspot.com/-fsoVekErkY8/XhYMNLlyEeI/AAAAAAAAPoA/FGN5Vzt9ph4kf1J8RZldXpMch-OPjiIBgCEwYBhgL/s320/ezgif.com-resize.gif)](https://1.bp.blogspot.com/-fsoVekErkY8/XhYMNLlyEeI/AAAAAAAAPoA/FGN5Vzt9ph4kf1J8RZldXpMch-OPjiIBgCEwYBhgL/s1600/ezgif.com-resize.gif)
  
The full source code is [here](https://github.com/logeshpalani98/Xamarin.iOS-Samples) -      ![](https://unpkg.com/simple-icons@latest/icons/github.svg)  
  

## Conclusion

In this blog, we learned to handle the view controllers in iOS. Thanks for reading and share your comments.