Storyboards let you easily design adaptive user interface and layout for various kind of iOS devices with different screen sizes. In addition, other benefits of using storyboards over the traditional single interface (.xib) are:
- More convenience and simple way to design iOS interface. Instead of working with different IDE, you simply open the storyboard and work from within a single IDE, Xamarin Studio.
- Leverage iOS modern auto layout and universal design. Since iOS 8, Apple encourages developers to design interfaces that are optimized for different orientation and size, also known as universal design. This type of design is only supported in storyboard format.
- Rich design-time experience. You can now find Crosslight iOS components in the toolbox and easily drop them to the designer surface. Then, you can easily set the properties and set the control name in the Name textbox – all within the property window.
- Streamlined workflow. You will find that auto-generated code from Xamarin iOS Designer is faster and more reliable as the designer is built into Xamarin's own development environment. This allows you to rapidly edit the interface and run the application to see the result.
- Design multiple interface. You can design multiple interfaces in a single storyboard, allowing you to easily overview the related interfaces, preview and edit them simultaneously in different size and orientation. Thanks to the loosely-coupled integration to Crosslight navigation framework, each view controller will be automatically mapped to the respective named interface in the storyboard.
Working with Storyboards
In addition to Apple's Xcode, you can now use Xamarin's iOS designer to build interface using storyboard format. The latest Xamarin release, starting from version 5, has included full designer support for adaptive layout through size classes options. With Crosslight supporting storyboards, this means you can now streamline your development workflow entirely in Xamarin Studio.
By default, Crosslight iOS project templates do not include storyboard file. You can add a new storyboard file from the New Project Item dialog in either Xamarin Studio or Visual Studio on Windows. Once a storyboard file is added to your project, simply double click on the storyboard file to open the Xamarin iOS designer.
The following figure shows an overview of the iOS storyboard designer in Xamarin Studio.
Defining Class and Storyboard ID
Making storyboard works in Crosslight is straightforward with just a couple steps. You simply need to choose the View Controller to be associated to the particular view, and then set the Storyboard ID to the same name with the specified View Controller class name.
To do this, first click on the View Controller icon in Xamarin iOS Designer which will bring up the property window for the controller, then you can choose the View Controller from the Class dropdown as well as specifying the Storyboard ID provided in the property window. See the following figure.
Defining Storyboard Attribute
Once the designer configuration is completed as described in the previous section, the final step is to link the storyboard file name in the view controller class. Crosslight has provided a new attribute called StoryboardAttribute which determine which storyboard file in the project that contains the interface associated to the view controller. This attribute is required because your project may contain multiple storyboard files, so it's important for the view controller to aware which storyboard file to use to locate the target view.
Here is an example code of the StoryboardAttribute usage which refers to the MainStoryboard file in the project.
In addition, if your view controller was previously created along with an XIB definition, you will need to modify the constructor to use IntPtr handle overload such as shown in the example below.
Navigating to the View
With several adjustments to the designer and code as described above, you can continue using Crosslight navigation API in the ViewModel – exactly the same code you already accustomed to. So if you are migrating an existing view controller from XIB to storyboard, there are no changes required at the core (ViewModel) layer.
For clarity, here is the example code to perform screen navigation with Crosslight navigation framework.