Creating a UIViewController and UITableView

Now that we have our new iOS project, we are going to start by creating a UIViewController. Right-click on the project file, select Add | New File, and select ViewController from the iOS menu selection in the left-hand box:

You will notice three files generated, a .xib, a .cs, and a .designer.cs file. We don't need to worry about the third file; this is automatically generated based upon the other two files.

Tip

Right-click on the project item and select Reveal in Finder,

This will bring up the finder where you will double-click on the GalleryCell.xib file; this will bring up the user interface designer in XCode. You should see automated text inserted into the document to help you get started.

Firstly, we must set our namespace accordingly, and import our libraries with using statements. In order to use the iOS user interface elements, we must import the UIKit and CoreGraphics libraries. Our class will inherit the UIViewController class in which we will override the ViewDidLoad function:

namespace Gallery.iOS  
{ 
    using System; 
    using System.Collections.Generic; 
 
    using CoreGraphics; 
    using UIKit; 
 
    public partial class MainController : UIViewController 
    { 
        private UITableView _tableView; 
 
        private TableSource _source; 
 
        private ImageHandler _imageHandler; 
 
        public MainController () : base ("MainController", null) 
        { 
            _source = new TableSource (); 
 
            _imageHandler = new ImageHandler (); 
            _imageHandler.AssetsLoaded += handleAssetsLoaded; 
        } 
 
        private void handleAssetsLoaded (object sender, EventArgs e) 
        { 
            _source.UpdateGalleryItems (_imageHandler.CreateGalleryItems()); 
            _tableView.ReloadData (); 
        } 
 
        public override void ViewDidLoad () 
        { 
            base.ViewDidLoad (); 
 
            var width = View.Bounds.Width; 
            var height = View.Bounds.Height; 
 
            tableView = new UITableView(new CGRect(0, 0, width, height)); 
            tableView.AutoresizingMask = UIViewAutoresizing.All; 
            tableView.Source = _source; 
 
            Add (_tableView); 
        } 
    } 
} 

Our first UI element created is UITableView. This will be used to insert into the UIView of the UIViewController, and we also retrieve width and height values of the UIView to stretch the UITableView to fit the entire bounds of the UIViewController. We must also call Add to insert the UITableView into the UIView. In order to fill the list with data, we need to create a UITableSource to contain the list of items to be displayed in the list. We will also need an object called GalleryModel; this will be the model of data to be displayed in each cell.

Follow the previous process for adding two new .cs files; one will be used to create our UITableSource class and the other for the GalleryModel class. In TableSource.cs, first we must import the Foundation library with the using statement:

using Foundation; 

Now for the rest of our class. Remember, we have to override specific functions for our UITableSource to describe its behavior. It must also include a list for containing the item view-models that will be used for the data displayed in each cell:

public class TableSource : UITableViewSource  
    { 
        protected List<GalleryItem> galleryItems; 
        protected string cellIdentifier = "GalleryCell"; 
 
        public TableSource (string[] items) 
        { 
            galleryItems = new List<GalleryItem> (); 
        } 
    } 

We must override the NumberOfSections function; in our case, it will always be one because we are not having list sections:

        public override nint NumberOfSections (UITableView tableView) 
        { 
            return 1; 
        } 

To determine the number of list items, we return the count of the list:

        public override nint RowsInSection (UITableView tableview, nint section) 
        { 
            return galleryItems.Count; 
        } 

Then we must add the GetCell function; this will be used to get the UITableViewCell to render for a particular row. But before we do this, we need to create a custom UITableViewCell.