Xamarin

Getting Started with iOS Storyboards in Xamarin.IOS

By   Sunday, September 22, 2019 comments
reads
React:
Storyboards feature first introduced in iOS 5 that save time building user interfaces for iOS mobile apps. Storyboards allow you to prototype and design multiple view controller views within one file. 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.

The storyboard is a collection of views and controls (or subviews) is 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 in the initial view, and the connecting view. The relationships on the design surface.

The following image shows what a storyboard looks like, and it’s similar to the storyboard you’ll build the Storyboard in the end of the article.

Getting Started with iOS Storyboards in Xamarin.IOS

Create New Xamarin.iOS Application In order to learn the storyboard, let’s start creating a new Xamarin.iOSproject using Visual Studio 2019 or VS for Mac. When using Visual Studio 2019 on a 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 a Windows like below. Select Xamarin.iOS app and click on “Next”
Getting Started with iOS Storyboards in Xamarin.IOS


Create a Empty iPhone/iPad Single View Storyboard Application

Getting Started with iOS Storyboards in Xamarin.IOS

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 selection of single view application, solutions template will generate as below

Getting Started with iOS Storyboards in Xamarin.IOS


Main StoryBoard: Open Main.storyboard where you can find single view controller. Add one more view controller and update the view controllers as shown below.

Getting Started with iOS Storyboards in Xamarin.IOS


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 image below

Getting Started with iOS Storyboards in Xamarin.IOS



Change View Properties: Add Controls into the view controller and Select the properties, Change the styles as per your needs

Getting Started with iOS Storyboards in Xamarin.IOS


Output: When we run the application in an iPhone device, we'll get the following output and click on button, it will navigate to new screen.
Getting Started with iOS Storyboards in Xamarin.IOS



Summary: 


This article has demonstrated how to create a iOS Storyboards 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.

SJ
Suthahar Jegatheesan

Senior Solutions Architect · Microsoft Azure, AI & Mobile. Author of the Xamarin Q&A Book.

More in this series

1 comment:

  1. Nice post. I was checking continuously this blog and I’m impressed! Extremely useful info specially the last part I care for such info much. I was looking for this particular info for a very long time. Thank you and good luck.
    Hire Xamarin Developer
    Xamarin Development Company

    ReplyDelete

sponsored

What Colleagues Say

“Suthahar is one of the most thorough and knowledgeable cloud architects I’ve worked with. His depth on Azure and ability to make complex mobile solutions work cross-platform is remarkable. He always delivers beyond expectations.”

AT Arun T. Senior Engineering Manager · Direct Manager

“I’ve followed Suthahar’s MSDEVBUILD blog for years — practical, deep, always current. Working alongside him confirmed what I suspected: he’s as sharp in person as on paper, and a genuinely generous mentor and architect.”

RK Rajesh K. Lead Developer · Mindtree

Certifications & Recognition

AZ-300 · Azure Architect Technologies AZ-301 · Azure Architect Design AZ-104 · Azure Administrator Associate AI-100 · Designing Azure AI Solutions DP-900 · Azure Data Fundamentals MCPD · Windows Phone Certified SAFe® 4 Scrum Master

Technical Expertise

☁ Cloud Platforms Microsoft Azure — Expert · 18 yrs App Services · AKS · Functions · Cosmos DB · APIM · Entra ID AWS & Google Cloud — Advanced
πŸ€– AI & Automation Azure OpenAI / GenAI — Advanced · 5 yrs RAG Pipelines · Bot Framework · Cognitive Services · Vision & Speech AI · ML.NET
πŸ“± Mobile Architecture .NET MAUI & Xamarin — Expert · 12 yrs Flutter · Native iOS/Android · Offline-First · Secure Storage & Auth
πŸ”’ Identity & Security Microsoft Entra ID — Expert OAuth 2.0 · OIDC · Zero Trust · Conditional Access · RBAC · Key Vault

Speaking & Community

Microsoft User Group Malaysia Recurring speaker on Azure architecture, AI integration and .NET mobile development across Malaysia and APAC.
Global Azure Bootcamp — Chennai Presented “AI into Xamarin Mobile Apps” at GAB Chennai, part of the worldwide Global Azure community event.
AI & Azure OpenAI Community Events Workshops and live demos on RAG pipelines, AI agents and intelligent workflow automation since 2023.
Mobile & Cloud Workshops — Coimbatore Multi-day deep-dive sessions at GRG Computer Technology, KG Microsoft Innovation Center and RVS College of Arts and Science.
500+Blog Articles
50+Conference Talks
10K+Monthly Readers
30Public Repositories
3Continents Delivered
MSDEVBUILD Assistant Ask about Suthahar, Azure, AI or mentorship
Hi! I’m a simple FAQ bot for MSDEVBUILD. Tap a question below or type your own.