Eric Polerecky bio photo

Director, Professional Services @RightBrain_Net - 50% engineer, 50% entrepreneur. Former: CTO @Wantify, @agilesoftware, @grasshopper

Eric Polerecky

Email Twitter LinkedIn Github Stackoverflow

Certifications

Xamarin (expired)

Speaking

Microservices? Real World FRP Xamarin Forms Case Study

All Posts

All Posts

There are plenty of examples of create List Detail style application workflow using either UITableViewController or without using a Storyboard. Of course; I wanted to use a Storyboard and to use a UITableView

Working with Storyboards

Getting started; I added a UINavigationController which comes with a “Root View Controller”. On the root view controller I added my UITableView

Getting started

Prototype Cells

The default UITableView comes with 3 prototype cells.

  • The UITableView can display different data in different formats.
  • You can use these prototype cells to design how they display.

If all your data is of the same type and displayed the same way you can change the number of prototype cells down to 1.

Cell Identifier

ViewCells don’t have a Cell Identifier by default. You will want to add one so you can decided which Prototype Cell will be returned by your custom UITableViewSource

Getting started

The arrow below shows where you decide which type of cell to dequeue. The string value passed into DequeueReusableCell must be the Cell Identifier of one of your Prototype Cells

dequeue)

All of my troubles started when trying to implment a simple list to details navigation. Without dequeuing the correct reusuable cell, by ensuring the name Cell Identifier; my navigation would never happen.

As long as you wire-up the Cell Identifier and Prototype Cell configuring navigation using a segue is pretty straight forward.

Simply, ctrl+drag from one of your Cell Prototypes; you likley only have one, to the details view controller. Now; when someone clicks on your UITableViewCell the segue will fire and navigation will happen from the list to the details.

Passing Data

Unlike normal navigation there is not an event to connect to when the UITableViewCell (Prototype Cell) is clicked. Instead; you override the PrepareForSegue method from the view controller that holds your UITableView.

public override void PrepareForSegue (UIStoryboardSegue segue, NSObject sender)
{
    if (segue.Identifier == "TaskSegue") { // set in Storyboard
        var navctlr = segue.DestinationViewController as TaskDetailViewController;
        if (navctlr != null) {
            var source = TableView.Source as RootTableSource;
            var rowPath = TableView.IndexPathForSelectedRow;
            var item = source.GetItem(rowPath.Row);
            navctlr.SetTask (this, item); // to be defined on the TaskDetailViewController
        }
    }
}

Conclusion

There are many different little gotchas that can getya when you are setting up simple list details view navigation. In this post I highlighted the Cell Identifier of the Prototype Cell because that is the one that got me.

You can also find a good overview of this navigation pattern in the Xamarin developer center.

Creating Tables in a Storyboard