How to Create a Simple TableView App in Xamarin iOS app.


Table View is one of the common UI elements in iOS apps. Most apps, in some ways, make use of Table View to display list of data. The best example is the built-in Phone app. Your contacts are displayed in a Table View. Another example is the Mail app. It uses Table View to display your mail boxes and emails. Not only designed for showing textual data, Table View allows you to present the data in the form of images. The built-in Video and YouTube app are great examples for the usage.

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:

4) Now in RowInSection:

5) In GetCell method:

Now our file look like this:

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:


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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">