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.

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.

We are now going to design our cells that will appear for every model found in the TableSource class. Add a new .cs file for our custom UITableViewCell.

Now for the implementation:

public class GalleryCell: UITableViewCell   
    { 
        private UIImageView _imageView; 
 
        private UILabel _titleLabel; 
 
        private UILabel _dateLabel; 
 
        public GalleryCell (string cellId) : base (UITableViewCellStyle.Default, cellId) 
        { 
            SelectionStyle = UITableViewCellSelectionStyle.Gray; 
 
            _imageView = new UIImageView() 
            { 
                TranslatesAutoresizingMaskIntoConstraints = false, 
            }; 
 
            _titleLabel = new UILabel ()  
            { 
                TranslatesAutoresizingMaskIntoConstraints = false, 
            }; 
 
            _dateLabel = new UILabel ()  
            { 
                TranslatesAutoresizingMaskIntoConstraints = false, 
            }; 
 
            ContentView.Add (imageView); 
            ContentView.Add (titleLabel); 
            ContentView.Add (dateLabel); 
        } 
    } 

Our constructor must call the base constructor, as we need to initialize each cell with a cell style and cell identifier. We then add a UIImageView and two UILabels for each cell, one for the filename and one for the date. Finally, we add all three elements to the main content view of the cell.

When we have our initializer, we add the following:

public void UpdateCell (GalleryItem gallery) 
        { 
            _imageView.Image = UIImage.LoadFromData (NSData.FromArray (gallery.ImageData)); 
            _titleLabel.Text = gallery.Title; 
            _dateLabel.Text = gallery.Date; 
        } 
 
        public override void LayoutSubviews () 
        { 
            base.LayoutSubviews (); 
 
            ContentView.TranslatesAutoresizingMaskIntoConstraints = false; 
 
            // set layout constraints for main view 
            AddConstraints (NSLayoutConstraint.FromVisualFormat("V:|[imageView(100)]|", NSLayoutFormatOptions.DirectionLeftToRight, null, new NSDictionary("imageView", imageView))); 
            AddConstraints (NSLayoutConstraint.FromVisualFormat("V:|[titleLabel]|", NSLayoutFormatOptions.DirectionLeftToRight, null, new NSDictionary("titleLabel", titleLabel))); 
            AddConstraints (NSLayoutConstraint.FromVisualFormat("H:|-10-[imageView(100)]-10-[titleLabel]-10-|", NSLayoutFormatOptions.AlignAllTop, null, new NSDictionary ("imageView", imageView, "titleLabel", titleLabel))); 
            AddConstraints (NSLayoutConstraint.FromVisualFormat("H:|-10-[imageView(100)]-10-[dateLabel]-10-|", NSLayoutFormatOptions.AlignAllTop, null, new NSDictionary ("imageView", imageView, "dateLabel", dateLabel))); 
        } 

Our first function, UpdateCell, simply adds the model data to the view, and our second function overrides the LayoutSubViews method of the UITableViewCell class (equivalent to the ViewDidLoad function of a UIViewController).

Now that we have our cell design, let's create the properties required for the view-model. We only want to store data in our GalleryItem model, meaning we want to store images as byte arrays. Let's create a property for the item model:

namespace Gallery.iOS 
{ 
    using System; 
 
    public class GalleryItem 
    { 
        public byte[] ImageData; 
 
        public string ImageUri; 
 
        public string Title; 
 
        public string Date; 
 
        public GalleryItem () 
        { 
        } 
    } 
} 

Now back to our TableSource class. The next step is to implement the GetCell function:

public override UITableViewCell GetCell (UITableView tableView, NSIndexPath indexPath) 
        { 
            var cell = (GalleryCell)tableView.DequeueReusableCell (CellIdentifier); 
            var galleryItem = galleryItems[indexPath.Row]; 
 
            if (cell == null) 
            {  
                // we create a new cell if this row has not been created yet 
                cell = new GalleryCell (CellIdentifier);  
            } 
 
            cell.UpdateCell (galleryItem); 
 
            return cell; 
        } 

Notice the cell reuse on the if statement; you should be familiar with this type of approach, it is a common pattern for reusing cell views and is the same as the Objective-C implementation (this is a very basic cell reuse implementation). We also call the UpdateCell method to pass in the required GalleryItem data to show in the cell. Let's also set a constant height for all cells. Add the following to your TableSource class:

public override nfloat GetHeightForRow (UITableView tableView, NSIndexPath indexPath) 
        { 
            return 100; 
        } 

So what is next?

public override void ViewDidLoad () 
{ 
.. 
table.Source = new TableSource(); 
.. 
} 

Let's stop development and have a look at what we have achieved so far. We have created our first UIViewController, UITableView, UITableViewSource, and UITableViewCell, and bound them all together. Fantastic!

We now need to access the local storage of the phone to pull out the required gallery items. But before we do this, we are going to create an Android project and replicate what we have done with iOS.

Our first step is to create new general Android app:

The first screen you will land on is MainActivity. This is our starting activity, which will inflate the first user interface; take notice of the configuration attributes:

[Activity (Label = "Gallery.Droid", MainLauncher = true, Icon = "@mipmap/icon")] 

The MainLauncher flag indicates the starting activity; one activity must have this flag set to true so the application knows what activity to load first. The icon property is used to set the application icon, and the Label property is used to set the text of the application, which appears in the top left of the navigation bar:

namespace Gallery.Droid 
{ 
    using Android.App; 
    using Android.Widget; 
    using Android.OS; 
 
    [Activity (Label = "Gallery.Droid", MainLauncher = true, Icon = "@mipmap/icon")] 
    public class MainActivity : Activity 
    { 
        int count = 1; 
 
        protected override void OnCreate (Bundle savedInstanceState) 
        { 
            base.OnCreate (savedInstanceState); 
 
            // Set our view from the "main" layout resource 
            SetContentView (Resource.Layout.Main); 
        } 
    } 
} 

The formula for our activities is the same as Java; we must override the OnCreate method for each activity where we will inflate the first XML interface Main.xml.

Our starting point is the main.xml sheet; this is where we will be creating the ListView:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"> 
    <ListView 
        android:id="@+id/listView" 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" 
        android:layout_marginBottom="10dp" 
        android:layout_marginTop="5dp" 
        android:background="@android:color/transparent" 
        android:cacheColorHint="@android:color/transparent" 
        android:divider="#CCCCCC" 
        android:dividerHeight="1dp" 
        android:paddingLeft="2dp" /> 
</LinearLayout> 

Excellent! We now have our starting activity and interface, so now we have to create a ListAdapter for our ListView. An adapter works very much like a UITableSource, where we must override functions to determine cell data, row design, and the number of items in the list.

Right-click on the Android project and add a new empty class file for our adapter class. Our class must inherit the BaseAdapter class, and we are going to override the following functions:

public override long GetItemId(int position); 
 
public override View GetView(int position, View convertView, ViewGroup parent); 

Before we go any further, we need to create a model for the objects used to contain the data to be presented in each row. In our iOS project, we created a GalleryItem to hold the byte array of image data used to create each UIImage. We have two approaches here: we could create another object to do the same as the GalleryItem, or even better, why don't we reuse this object using a shared project?