Introduction
Before Storyboards, you had to use XIB files and you could only use one XIB file per view (UITableViewCell, UITableView or other supported UIView types).
A Storyboard is the visual representation of all the screens in an application. It contains a sequence of scenes, with each scene representing a View Controller and its Views. These views may contain objects and controls that will allow your user to interact with your application.
Storyboard is a collection of views and controls (or subviews) known as a Content View Hierarchy. Scenes are connected by segue objects, which represent a transition between view controllers. This is normally achieved by creating a segue between an object on the initial view, and the connecting view.
The following image shows what a storyboard looks like, and it’s similar to the storyboard you’ll build the Storyboard at the end of the article.
Create New Xamarin.iOS Application
In order to learn the storyboard, let’s start creating a new Xamarin.iOS project using Visual Studio 2019 or VS for Mac. When using Visual Studio 2019 on Windows machine, you will need to pair the mac machine.
Open Visual Studio 2019 >>Create New Project or select "Open Recent Application" and the available templates will appear on Windows, like below. Select Xamarin.iOS app and click on “Next”
Create an Empty iPhone/iPad Single View Storyboard Application
The content of a storyboard is stored as an XML file. Storyboard files are compiled into binary files known as nibs. At runtime, these nibs are initialized and instantiated to create new views. After the selection of single view application, solutions template will generate as below.
Main StoryBoard
Open Main.storyboard where you can find a single view controller. Add one more view controller and update the view controllers as shown below.
View Controller Segue
Let us now connect both the view controllers. Segue is used in iOS development to represent a transition between scenes. To create a segue, hold down the Ctrl key and click-drag from one scene to another. As we drag our mouse, a blue connector appears and select as Show/Push as in the image below.
Change View Properties
Add Controls into the view controller and Select the properties. Change the styles as per your needs.
Output
When we run the application in an iPhone device, we'll get the following output and click on the button, it will navigate to a new screen.
Summary
This article has demonstrated how to create an iOS Storyboard using Xamairn iOS. I hope this article will help you. Please leave your feedback/query using the comments box, and if you like this article, please share it with your friends.