Xamarin iOS Designer and Storyboards – Part 1

By August 10, 2013Mobile, Xamarin

In this series we will take an introductory look at building some basic iOS App UI using Xamarin.iOS and Xamarin Studio. I will take this opportunity to go “bleeding edge” and introduce the Xamarin Studio’s new iOS Designer which is currently available in their Alpha channel. Although Xamarin is now offering a Visual Studio plugin for developing iOS Apps using Visual Studio, Xamarin Studio is your only choice for building the user interface. Either Xamarin Studio in conjunction with Apple’s Interface Builder, or Xamarin Studio with the new iOS Designer. Currently, only the Mac version of Xamarin Studio features the iOS Designer, so the reality is that, although you can write code with Visual Studio or Xamarin Studio on Windows, and build with a Mac on the network, UI Development is still a Mac based process.

This post will focus on getting started, understanding a bit about iOS UI, and just a quick trick to enhance your productivity. Let’s start by creating a new iPhone project in Xamarin Studio:

Notice that on the left side you can choose iPhone or iPhone Storyboard. There are 2 ways that iOS UI is hosted. In something called a xib/nib or in a storyboard. A xib is basically a “freeze dried” archive of the UI objects and their connections, with no real flow or logical representation of the UI beyond just the screens. A storyboard allows you to see in one big picture, the logical flow, relationships, and transitions of the “scenes”. Choosing iPhone will give you a xib UI container, and choosing iPhone Storyboard will give you a storyboard. There are 2 primary factors here when deciding how to proceed, target platform and designer tool. Storyboards were introduced in iOS 5, so if you are targeting an earlier version of iOS then you should not choose the iPhone Storyboard UI option. The second consideration is that the Xamarin iOS Designer currently only works with storyboards, xib files must be edited with Apple’s Interface Builder in Xcode. Post iOS 5, we can freely mix xib’s and storyboards, but this is not really a topic we need to address for beginning UI work.

Tip: Choose the iPhone/iPad/Universal Storyboard project templates if you want to use the Xamarin Studio iOS designer. You app must target iOS 5 or later.

Selecting a “Single View Application” will give us a storyboard with an initial View Controller and an embedded View. iOS development follows the MVC pattern, where the View Controller is the C (for controller) and the V is the embedded view hierarchy. The M will be your model code which (in this case) will be written using C#, the .NET framework, and the Xamarin Mono wrappers around the iOS frameworks. We will also be writing code in the controller to define the relationship and behavior between the view and the model. You can see on the left side of Xamarin Studio that the project template has generated a “code behind” file (StoryboardSampleViewController.cs), this is where we will write our controller code.

You are now free to experiment with the Xamarin iOS designer by dropping various iOS into the View Controller’s View and observing how they look and behave.

In Part 2 we discuss how to access storyboard UI controls from code.

The following two tabs change content below.