What we are going to cover in this tutorial:

• Introduction to Xamarin Studio – Introduction to Xamarin Studio and creating a new application.
• User Interface (UI) – Creating user interfaces with the iOS Designer.
• View Controllers and the View Lifecycle – An introduction to the View Lifecycle and managing Content View Hierarchies with the View Controller.

Introduction to Xamarin Studio:

Xamarin Studio is a free, open-source IDE that combines features from Visual Studio and XCode. It features a fully integrated visual designer, a text editor complete with refactoring tools, an assembly browser, source code integration, and more. In this guide we’ll learn to use some basic Xamarin Studio features, but if you’re new to Xamarin Studio you will want tUser Interface:o check out the in-depth Introduction to Xamarin Studio.

User Interface:

As same as iOS Xcode Xamarin uses same User Interface builder Storyboard to develop GUI for user.
The iOS Designer is a visual tool for building user interfaces in Xamarin. We can launch the Designer by double-clicking on any Storyboard (.storyboard) file, which will open to a view that resembles the following screenshot:

This storyboard is a file that contains visual design of your application’s all the screens and views as well as transitions and relationships between different screens of application.

View Controllers and the View Lifecycle:

Storyboard provides us user interface to display the controls and contents but what about interaction with these controls? For this we need a View Controllers file, View Controllers are used to manage View in Content hierarchy.
It contains code that gives power to interact with controls.

View Controllers and Storyboards:

We can specify custom view controller class name for view controller by editing Class property in the identity section of properties pad. We have here Hello_WorldViewController.

This links the Storyboard representation of the View Controller to the Hello_WorldViewController C# class. If we open the Hello_WorldViewController.cs file, we see that our View Controller is a subclassof UIViewController, as illustrated by the code below:

public partial class Hello_WorldViewController : UIViewController
{
      public Hello_WorldViewController (IntPtr handle) : base (handle)
      {
      }
 }

The Hello_WorldViewController now drives the interactions of the Content View Hierarchy associated with this View Controller in the Storyboard. Next we’ll learn about the View Controller’s role in managing the Views by introducing a process called the View lifecycle.

View Lifecycle:
The View Controller is in charge of loading and unloading Content View Hierarchies from the Window. When something of importance happens to a View in the Content View Hierarchy, the operating system notifies the View Controller through events in the View lifecycle. By overriding methods in the View lifecycle, we can interact with the objects on the screen and create a dynamic, responsive user interface.

These are the basic lifecycle methods and their function:

• ViewDidLoad – Called once the first time the View Controller loads its Content View Hierarchy into memory. This is a good place to do initial setup because it is when Subviews first become available in code.
• ViewWillAppear – Called every time a View Controller’s View is about to be added to a Content View Hierarchy and appear on the screen.
• ViewWillDisappear – Called every time a View Controller’s View is about to be removed from a Content View Hierarchy and disappear from the screen. This lifecycle event is used for cleanup and saving state.
• ViewDidAppear and ViewDidDisappear – Called when a View gets added or removed from the Content View Hierarchy, respectively.

When we add custom code to any stage of the Lifecycle, we override that Lifecycle method’s base implementation. We tap into the existing Lifecycle method, which has some code already attached to it, and we extend it with our own code. We call the base implementation from inside our method to make sure the original code runs before our new code.

Responding to User Interaction:

When user interact with view controller like button presses, navigations, and more. The simplest way to handle user interaction is to wire up a control to listen to user input and attach an event handler to respond to the input.

In our previous project we create a Click here button to prompt alertview.

When we assigned a Name to the Button control in the Properties Pad, the iOS designer automatically mapped it to a control in the Hello_WorldViewController.cs, making the btn_click available to us inside the Hello_WorldViewController class.

In the btn_click method

partial void btn_click (UIButton sender)
{
      var av = new UIAlertView ("Hello","hello world",null, "OK",null);
      av.Show ();
}

I hope this gives you somewhat understanding of Xamarin iOS app development.

If you like this tutorial then you can download full copy of the code from github. 

Before we go into the coding part, let’s first take a look at our version of the “Hello World” app. The final deliverable will look like this

Start Coding!

First, launch Xamarin. Once launched, Xamarin displays a welcome dialog. From here, choose “New Solution” to start a new project:

From the New Solution Dialogue, we’ll choose C# > iOS > Unified API > iPhone > Single View Application  template. Let’s give it the  Name Hello_world, and the Solution Name Hello_world:

Next, we’ll open the MainStoryboard.storyboard file by double-clicking on it in the Solution pad:

From the Toolbox (the area on the right), let’s type “Button” into the search bar and drag a Button onto the design surface (the area in the center)

With the Button selected on the design surface, change the Name property in the Identity section of the Property Pad to btn_. Change the Title property to “Click Here”:

Next, grab the handles of the Dragging Controls (the circles around the control) and make the button wider:

Now go to Event tag in button property and write event name in Up Side property. This is the method or event name that has the code that you want to execute when button will press.

Next we’re going to add code to wire up the user interface. Let’s add the code to power the user interface into the Hello_WorldViewController class. Double-click on Hello_WorldViewController.cs in the Solution Pad to open it.

You will find btn_click event

partial void btn_click(UIButton sender)
{
    var av= new UIAlertView(“Hello”,
    “hello world”,
    null,
    “OK”,
    unll);
    av.show();
}

Just write above code into btn_click event to prompt alertview and that’s it.

Let’s save our work, and then build the application by choosing Build=>Build All. If our application compiles, we will get a success message at the top of the IDE:

If there are errors, we can go through the previous steps and correct any mistakes until the application builds successfully.

Finally, let’s test our application in the iOS Simulator. In the top left of the IDE, choose Debug from the first dropdown, and iPhone from second dropdown, and press Start (the round button that resembles a Play button):

This will launch our application inside the iOS Simulator:

If you like this tutorial then you can download full copy of the code from github. 

• ActionSheet
• Buttons
• Label
• ImageView

ActionSheet: Action sheets consist of a really convenient and fast way to display a bunch of options that the user should select from, and it is widely used in great number of applications. Its disadvantage though is that it adopts the iOS’s look and feel without being able to be graphically modified; therefore it might not fit to applications with customized GUI.

We are going to see a small tutorial that display ActionSheet when press on certain buttons. When we complete our tutorial it will look like this:

Select Unified API and iPhone , we are going to need only 1 screen so we are taking Single View Application. Give name of application “ActionSheet_Demo”.

Let’s begin: Go on New Solution and create new iOS solution.

Select Unified API and iPhone , we are going to need only 1 screen so we are taking Single View Application. Give name of application “ActionSheet_Demo”.

Now we get a blank storyboard where we take 2 buttons for using storyboard. When you clink on these buttons it invokes a ActionSheet controller.

Now go and declare name in identity to access button click event or touch up inside. Here we give btn_normal for Simple Action Sheet and btn_option for Delete Confirmation Action Sheet.

In ActionSheet_DemoViewController file declare UIActionSheet object.

public partial class ActionSheet_DemoViewController : UIViewController
{
    UIActionSheet normal;
    UIActionSheet option;
}

Now go in ViewDidLoad method and write code below

public override void ViewDidLoad ()
{
      string[] tableItems = new string[] {"Move","Fruits","Duplicate"};
      base.ViewDidLoad ();
      normal = new UIActionSheet ("Simple ActionSheet", null, "Cancel", "Delete", n	ull);
      option = new UIActionSheet ("ActionSheet with option", null, "Delete it", "Copy", 	tableItems);
         
}

We’re almost done here, now just call the object ob UIActionSheet and you get ActionSheet.
Find TouchUpInside method of buttons that we were created earlier and call actionsheet method with the help of object.

Write the code below to get it done:

partial void btn_normal_TouchUpInside (UIButton sender)
{
    normal.ShowInView (View);
}

partial void btn_delete_TouchUpInside (UIButton sender)
{
    option.ShowInView (View);
}

We’ve created UIActionSheet object and used with button actions but what about using this actionsheet buttons???

For that, we’ve to use

normal.Clicked += (btn_sender, args) => Console.WriteLine("{0} Clicked", args.ButtonIndex);
and
option.Clicked += (btn_sender, args) => Console.WriteLine("{0} Clicked", args.ButtonIndex);

Add these lines before you call the methods of ActionSheet ShowInView in button action event.
And that’s it, you get index number of button in your Application Output. Just run and check it.

If you like this tutorial then you can download full copy of the code from github. 

• System
• DetailDisclosure
• InfoDark
• InfoLight
• ContactAdd
• Custom

Adding buttons in our view is very simple just drag and drop button control from toolbox.

To change type of the button go to the property and select widget, go to the Type and select any of the button types

Manually create button in code:

var buttonRect = UIButton.FromType(UIButtonType.System);
buttonRect.SetTitle ("Button!", UIControlState.Normal);

How to handle Click event of Button:

1. Button1.TouchUpInside += delegate {     
      new UIAlertView("Button1", "TouchUpInside handled", null, "OK", null).Show(); 
};

2. Button2.TouchUpInside += (sender, ea) => {     
	new UIAlertView("Button2", "TouchUpInside handled", null, "OK", null).Show(); 
};

And that’s it. You have all the things that are needed for a button control.

If you like this tutorial then you can download full copy of the code from github. 

After completion of this demo it’ll look like this:

Create a new Solution in Xamarin studio and give it any name and select Single Screen Application.

Now just drag and drop a ImageView and Label Control on View hierarchy, now it looks like this:

In ImageView name property write imageView and in Label name property write lbl_name.

Now go to your controller.cs file and in ViewDidload method write:

imageView.Image =  UIImage.FromBundle ("image1.png");
lbl_name.Text = "Image";

That’s it. With this you can write any text to label runtime with coding or select image runtime with imageview control.

If you like this tutorial then you can download full copy of the code from github. 

After we complete our sample app it will look like this:

Create Sample Project:

Open Xamarin and select New Solution

Select iOS inside C# and iPhone Unified API, we are going to develop a single view application so select it. Give this project name SampleTableView:

in the newly created project we have some default files and a storyboard that we are going to use further in our sample application

Now open MainStoryboard.storyboard and drag and drop TableView from ToolBox and give it name=”tableData”:

For assigning data to the TableView we need a source class that pass data and information like how many rows and which type of cell we are going to use for TableView.

For that we are going to use implementation of UITableViewSource and assign it to the UITableView.
There are only two mandatory methods to make a table display data:

RowsInSection – return an nint count of the total number of rows of data the table should display

GetCell – return a UITableCellView populated with data for the corresponding row index passed to the method.

For adding this file into your project go to the solution and select add new file:

Now select General and Empty Class, give it name TableSource. It will create a blank file that we are going to use as Table Source.

Find this TableSouce file from solution and open it.

We need to implement UITableViewSource file into our TableSource file, For that:

1) Import UIKit into TableSource file with “using UIKit”
2) Now you can add UITableViewSource to your file and implement its methods : RowsInSection and GetCell
3) Declare a string array named tableData and a string variable named cellIdentifier.

In TableSource method insert a string array parameter:

public TableSource (string[] items)     
{         
    tableData = items;     
}

4) Now in RowInSection:

public override nint RowsInSection (UITableView tableview, nint section)
{
    return itemData.Length;
}

5) In GetCell method:

public override UITableViewCell GetCell (UITableView tableView, Foundation.NSIndexPath indexPath)
{
            UITableViewCell cell = tableView.DequeueReusableCell (cellIdentifier);
            // if there are no cells to reuse, create a new one
            if (cell == null)
                cell = new UITableViewCell (UITableViewCellStyle.Default, cellIdentifier);
            cell.TextLabel.Text = itemData[indexPath.Row];
            return cell;
}

Now our file look like this:

using System;
using UIKit;

namespace SampleTableView
{
    public class TableSource : UITableViewSource
    {
        string[] itemData;
        string cellIdentifier = "TableCell";
        public TableSource (string[] items)
        {
            itemData = items;
        }
        public override nint RowsInSection (UITableView tableview, nint section)
        {
            return itemData.Length;
        }
        public override UITableViewCell GetCell (UITableView tableView, Foundation.NSIndexPath indexPath)
        {
            UITableViewCell cell = tableView.DequeueReusableCell (cellIdentifier);
            // if there are no cells to reuse, create a new one
            if (cell == null)
                cell = new UITableViewCell (UITableViewCellStyle.Default, cellIdentifier);
            cell.TextLabel.Text = itemData[indexPath.Row];
            return cell;
        }
    }
}

To use this subclass, the sample file SampleTableViewViewController.cs creates a string array to construct the source then assigns it to a UITableView instance. The SampleTableViewViewController ViewDidLoad method looks like this:

public override void ViewDidLoad ()
{
        base.ViewDidLoad ();
        string[] itemData = new string[] {"Vegetables","Fruits","Flower Buds","Legumes","Bulbs","Tubers"};
        tableData.Source = new TableSource (itemData);
}

Now try to build and run the app. If you done all the things right it’ll look like this:

If you like this tutorial then you can download full copy of the code from github. 

Creating a Custom Cell:

Create a New Solution and Select Unified API for iPhone and select Single View Application and give solution name as “CustomCellTableview.iOS”.

Please refer our last tutorial where we created simple table view and add data into it and implement it in this project so we move further.

Creating a Custom Cell:

First go into storyboard and add a imageview and label into table cell. And give
imageview name as “img_profile” and label as “name”.

Give identifier of cell as “TableCell”.

For creating a custom cell we have to implement UITableViewCell class and its methods. Add new file from general and name it CustomCell.

Open CustomCell file and import UIKit in the file.
Extend class with UITableViewCell and create a method named UpdateCell that we are going to call when we want to update the cell.

Write below code into file:

partial class CustomCell : UITableViewCell
{
        public CustomCell (IntPtr handle) : base (handle)
        {
            SelectionStyle = UITableViewCellSelectionStyle.Gray;
        }
        public void UpdateCell (string name, UIImage image)
        {
            img_profile.Image = image;
            lbl_name.Text = name;
        }
}

Now we are done with this file, we call UpdateCell method and get name and Image from there and update it.

Go into TableSource file and we just need to update GetCell method, just write below code:

public override UITableViewCell GetCell (UITableView tableView, Foundation.NSIndexPath indexPath)
{
            var cell = tableView.DequeueReusableCell (cellIdentifier) as CustomCell;
            cell.UpdateCell(itemData[indexPath.Row]
                , UIImage.FromFile ("Images/ic_facebook.png") );
            return cell;

}

Don’t forget to create a folder named Images and inset file in it.
Now we are ready to Build the app, just run the app if everything is OK you will see result as:

If you like this tutorial then you can download full copy of the code from github. 

After we complete our tutorial it will look like:

Let’s Start:

In our last tutorial we have seen how to create a simple table view and how to create a custom table cell. Just refer our previous tutorial because we are going to continue from there.

Handle Row Selection:

To handle user row selection we have to override RowSelection method UITableViewSource, using NSIndexPath indexpath to determine which row was selected.

Just add this method in TableSource:

public override void RowSelected (UITableView tableView, Foundation.NSIndexPath indexPath)
{
            new UIAlertView("Row Selected", itemData[indexPath.Row], null, "OK", null).Show();
        
            tableView.DeselectRow (indexPath, true); // iOS convention is to remove the highlight
}

Now try to run the project and you will get your selected row in Alert.

Delete a row in TableView by Swipe:

To delete a row in TableView you have to override a method in UITableViewSource subclass.It provides swipe to delete gesture that can implemented with single mode override.

There are 3 method override that affect the swipe gesture to show a Delete button in cell:

CommitEditingStyle:

The table source detects if this method is overridden and automatically enables the swipe-to-delete gesture. The method’s implementation should call DeleteRows on the UITableView to cause the cells to disappear, and also remove the underlying data from your model (for example, an array, dictionary or database).

CanEditRow:  If CommitEditingStyle is overridden, all rows are assumed to be editable. If this method is implemented and returns false (for some specific rows, or for all rows) then the swipe-to-delete gesture will not be available in that cell.

TitleForDeleteConfirmation: Optionally specifies the text for the Delete button. If this method is not implemented the button text will be “Delete”.

Before going to start the code we have to understand that we cannot simply delete data from array, so we have to take a List to perform this operation.

So first, create a List of String type and insert data into it in ViewDidLoad method of CustomCellTableview_iOSViewController.

Now your ViewDidLoad should look like this:

public override void ViewDidLoad ()
{
            base.ViewDidLoad ();
            List<string> itemData= new List<string>();
            itemTable.Add ("Vegetables");
            itemTable.Add ("Fruits");
            itemTable.Add ("Flower Buds");
            itemTable.Add ("Legumes");
            itemTable.Add ("Bulbs");
            itemTable.Add ("Tubers");
            tableData.Source = new TableSource (itemData);
}

Then we have to also update our TableSource file because we pass string array in its constructor and now we have a List.

So in TableSource.cs file we have to change the Constructor and in override method RowsInSection we have to change accounting to the List.
Your updated TableSource file will look like this:

namespace CustomCellTableview.iOS
{
    public class TableSource : UITableViewSource
    {
        //string[] itemData;
        List<string> itemData= new List<string>();
        string cellIdentifier="TableCell";
        public TableSource (List<string> items)
        {
            itemData = items;
        }
        public override nint RowsInSection (UITableView tableview, nint section)
        {
            return itemData.Count;
        }
    }
}

Now we are going to user override method of CommitEditingStyle in our TableSource file, here we simply going to remove the data from itemData List and remove TableView row.

The finale code of these 3-override methods will look like:

public override void CommitEditingStyle (UITableView tableView, UITableViewCellEditingStyle editingStyle, Foundation.NSIndexPath indexPath)
        {
            switch (editingStyle) {
            case UITableViewCellEditingStyle.Delete:
                // remove the item from the underlying data source
                itemData.RemoveAt(indexPath.Row);
                // delete the row from the table

                tableView.DeleteRows (new NSIndexPath[] { indexPath }, UITableViewRowAnimation.Fade);
                break;
            case UITableViewCellEditingStyle.None:
                Console.WriteLine ("CommitEditingStyle:None called");
                break;
            }
        }
        public override bool CanEditRow (UITableView tableView, Foundation.NSIndexPath indexPath)
        {
            return true;
        }
        public override string TitleForDeleteConfirmation (UITableView tableView, Foundation.NSIndexPath indexPath)
        {
            return "Delete";
        }

We are done with updating and inserting code for the Swipe to delete in our project. Try to build and run the project, if everything is ok as I mention then your app will look like this:

If you like this tutorial then you can download full copy of the code from github. 

There are strict instructions about setting icons and images in iPhones and iPads.

Applications that targets iOS 7 and early require following icons:

With Application icons there are iTunes images and launch images should supplied. Dimensions of this images are:

Application Icons

Every iOS app has application icon that is used to launch the application. This icon is also used in game center.
For example:

To add Application icons we have to edit in info.plist file in our Xamarin Project.
For this we are going to create a new solution and give it name “SampleApplicationIcon.iOS”.

Now go into info.plist file and find iPhone Icons and in Source select “Don’t use Asset Catalog “

Here you’ll find space for add images according to iOS and resolutions. You can directly drag and drop images on this or you can select it from finder. After you add images to Application images it will look like:

Now Run the application and you’ll see the Application icon in the Home Screen.

Setting Launch Screens

Launch screen is the screen that appear when application launch. For Launch screen Xamarin iOS provides Xamarin Launch images, same as Application Icons.

You can drag and drop Images into this space and run the app. You will see launch screen.

If you like this tutorial then you can download full copy of the code from github. 

A Segue, or Segue Object, 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, indicating where the segue will lead as

demonstrated in the image below:

On mouse-up, a menu will appear letting us choose the action for our segue. It may look similar to the image below:

Create a new Solution:
We are going to see how to create a Segue between 2 views and how to transfer data between them.
Create a new solution and give it name “NavigationSegue.iOS” and select single view controller.

Go to storyboard and delete default view controller. Now add new navigation view controller into storyboard. Also add a normal view controller into storyboard. Now holddown the control key and click from button to second view controller. When we release the mouse it will ask for type of segue, select push.

Now build and run the application, you will see transfer of 1 view to another.