10 minute guide to building mobile apps in C#

AndroidiOS

1. Jump Right In

Welcome to Xamarin.iOS! Once the installation is complete, follow these simple instructions to write and test your first iOS C# code in minutes! You can also visit our Developer Center.

1.1. Running the Sample Application

First, let’s open the Tasky sample application. Tasky is a simple To-Do application that you can use to track tasks. It’s a cross-platform sample that shares its core code between iOS and Android and illustrates good cross-platform architectural design including data access, business logic, and native-UI elements.

The solution and project structure in the Solution pane shows all the files in the solution and should look familiar to any Modern IDE user. It consists of two projects containing a number of C# files.

If you cannot see the solution tree, choose View → Solution from the menu.

Introduction to Xamarin.iOS Solution

Watch the video

Check that the Debug configuration is selected in the toolbar and choose Run → Debug from the menu or press Command + Return (or the ‘play’ button) to start debugging with the iOS Simulator:

The app looks pretty empty to start with – press the plus button and add a few tasks to see how it works.

Before looking at the code more closely, let’s revisit the solution and application architecture. There are two projects, which help facilitate a cross-platform solution when combined with Xamarin.Android:

1.1.1. TaskyiOS

An iOS application project containing the user-interface and application layer for iPhones & iPads.

1.1.2. Tasky.Core.iOS

A Core library project which contains platform-independent code. This code is shared between different device platforms such as Android, iOS, and Windows Phone. Each platform has a different .csproj file (e.g. Tasky.Core.Android, Tasky.Core.iOS) but share the same C# code files.

1.2. Understanding the Architecture

The architecture and project structure of the Tasky application is shown in the following diagram:

  • User Interface - The screens, controls and data presentation code. In Xamarin.iOS these classes are wrappers around the iOS CocoaTouch frameworks. The user interface that you build looks, feels and performs like a native Objective-C application.
  • App Layer - Custom classes to bind the business layer to the user interface, typically requiring platform specific features.
  • Business Layer - Business object classes and business logic.
  • Data Access Layer - Abstraction layer between the business logic and the data layer.
  • Data Layer - Low-level data persistence and retrieval; the Tasky sample uses a SQLite database binding.

2. Modifying Tasky

As it sits, Tasky lacks a basic feature of any decent task application: the ability to mark a task complete. We’re going to add that functionality by making the following modifications:

  1. Implement a new property on the Task object called Done.
  2. Add a mechanism in the UI to allow users to mark a task as completed.
  3. Change the home screen to display whether a task is completed.

We’re also going to spruce up the design of the application a bit by modifying the navigation bar style:

2.1. Implement a new property on the Task class

Add a new property to the Tasky class
Watch the video

Open the Task.cs file in Tasky.Core.iOS and notice the class has the following property:

public bool Done { get; set; }

Tasky uses ADO.NET to store and retrieve data using the built-in SQLite database engine. All data operations can be performed with familiar SQL syntax and ADO.NET classes. Here's an example of how ADO Connection and Command objects can be used to access data stored in SQLite on an Android device:

using (var command = connection.CreateCommand ()) {
    command.CommandText = "SELECT [_id], [Name], [Notes], [Done] from [Items] WHERE [_id] = ?";
    command.Parameters.Add (new SqliteParameter (DbType.Int32) { Value = id });
    var reader = command.ExecuteReader ();
    if (reader.Read ())
        task = FromReader (reader);
}

Now we need to modify the UI to support this change.

2.2. Add a corresponding property to the Task Details screen in the Application Layer

Add a Done input control to the user interface
Watch the video

Now that we’ve modified our Task object, let’s modify the user interface to allow users to mark them as complete.

Tasky uses MonoTouch.Dialog to define its User Interface. MonoTouch.Dialog is a library that makes it easy to create user interfaces in code. It will automatically build out editable screens based on the underlying class objects and some attributes to give it hints.

Read more about MonoTouch.Dialog

The Task Details screen is defined in the TaskDialog.cs file in the TaskyiOS folder. It already contains properties that represent the Task Name and Notes, plus properties that have the [OnTap] attribute to behave as Save and Delete buttons. The TaskDialog class accepts the Task object to display in the constructor.

To display the new Task Done property we must add this property with an [Entry] attribute:

[Entry("Done")]
public bool Done { get; set; }

and ensure the property is populated in the constructor with this code:

Done = task.Done;

The Task Details screen will now render the new property as a switch control (the default MonoTouch.Dialog rendering for a boolean).

2.3. Sync changes made in the user interface back to the business object so they are saved

Displaying the Done value is only half of the data binding job – we must also persist any changes made when the Save button is touched. Retrieving the state of the UI controls is done in the HomeScreen.cs file in /Screens/ in the SaveTask method.

MonoTouch.Dialog requires the context.Fetch call to re-populate the taskDialog properties with their user-edited values, which we then assign to our business object. Add the following line of code to retrieve the current value of the Done switch and set our business object’s property correctly:

currentTask.Done = taskDialog.Done;

The updated currentTask business object is then saved to the database via the Business Layer’s TaskManager class. This completes the changes to the Task Details screen – it will now display and save the new property we added to our business object.

2.4. Alter the Home screen so that the Done status is displayed in the list

Add a Done indicator to the list view
Watch the video

To complete our new feature, we need to display the completion status of each task on the home screen.

Each row in the task list is rendered via the Linq statement in the PopulateTable method of HomeScreen.cs file in /Screens/. Change the StringElement to CheckboxElement and add the Done property to the constructor instead of the Notes:

select (Element) new CheckboxElement((t.Name==""?"<new task>":t.Name), t.Done)

The application now looks like this – the task completion status is visible in the list and can be marked as Done on the Task Details screen using the On/Off switch control:

Awesome, we’ve now played with our first application in Xamarin.iOS. We’ve seen Visual Studio for Mac and we built and tested an application in the simulator.


3. Next Steps

Great job! You're on your way to becoming an awesome mobile developer.

Now, we recommend going through our iOS Getting Started Tutorial Series

  1. Hello, iPhone, where we’ll create an iOS application from scratch
  2. Hello, MVC tutorial which will introduce the Model, View, Controller pattern in iOS.
  3. Application Fundamentals where you'll learn more details about iOS development.
  4. Join the community on Xamarin Forums.

You’ll soon have a solid understanding of Xamarin.iOS applications and be building your own apps!