User Interface

UX and controls

PDF for offline use

Let us know how you feel about this

Translation Quality


General User Experience (UX) coverage including controls, the designer and UX design principles.

iOS Designer

We have built a designer for the iOS storyboard format which is fully integrated into Xamarin Studio. TThe iOS designer maintains full compatibility with the storyboard format, so that files can be edited in either Xcode or Xamarin Studio. Additionally, the editor supports advanced features, such as custom controls that render at design-time in the editor.

Introduction to Storyboards

A Storyboard is a visual representation of the appearance and flow of your application. Xamarin has introduced a Designer to allow Xamarin.iOS applications to take advantage of storyboards, so you can design your application screen visually and access the views, controllers and segues with C# for more control. You can also refer to this guide for an explanation and walkthrough of the Xamarin Designer for iOS

User Interface Controls

Xamarin.iOS exposes all the native user interface objects provided by Apple. They are easily added to Xamarin.iOS applications using the iOS Designer, Xcode's Interface Buildier or programmatically. Regardless of which method you choose, Xamarin.iOS exposes all the user interface object properties and methods in C#.

Tables and Cells

UITableView is the most common layout and data display tool in iOS. Sometimes the display is obviously a list of rows (such as the Music app) and other times it is difficult to recognize the table control (such as editing in the Contacts app, or a conversation in Messages app).

This document introduces the classes used to create and display tables and provides examples of how to use them in Xamarin.iOS. It will cover using the default appearance for tables, customizing the layout, implementing editing and designing a table visually.

Collection Views

Collection Views allow content to be displayed using arbitrary layouts. They allow easily creating grid-like layouts out of the box, while supporting custom layouts as well.

Creating a Tab Bar

iOS applications using a tab-navigation UI are built using the UITabBarController class. In this article we’ll walk through how to set up a tabbed application that contains several controllers and views. We’ll then examine how to load a UITabBarController when it is not the root controller, such as after a login screen.

Appearance API

iOS 5 introduced a new way to style an application, by applying visual property settings at a static class level rather than on individual objects so that the change applies to all instances of that control in the application. This functionality is exposed in Xamarin.iOS via a static Appearance property on all UIKit controls that support it. Visual appearance (properties like as tint color and background image) can therefore be easily customized to give your application a consistent look.

Introduction to MonoTouch.Dialog

The  MonoTouch.Dialog ( MT.D) toolkit is an indispensable framework for rapid application UI development in Xamarin.iOS. MT.D makes it fast and easy to define complex application UIs using a declarative approach, rather than the tedium of navigation controllers, tables, etc. Additionally, MT.D has a flexible set of APIs that provide developers with a complete control or hands off approach, as well as additional features such as pull-to-refresh, background image loading, search support, and dynamic UI generation via JSON data. This guide introduces the different ways to work with MT.D and then dives deep into advanced usage.

Web Views

Over the lifetime of iOS Apple has released a number of ways for app developers to incorporate web view functionality in their apps. Most users utilize the built-in Safari web browser on their iOS device, and therefore expect that web-view functionality from other apps is consistant with this experience. They expect the same gestures to work, the performance to be on par, and the functionality the same.

In this article, we will explore each of the three Web Views provided by Apple: UIWebView, WKWebview, and SFSafariViewController, their similarities and differences, and how they can be used.

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.