Recipe

To create a Storyboard-based application using a TableView:

• Create a new iPhone Storyboard Master-Detail Application with Xamarin Studio:

• Double-click on the .storyboard file to see the default user interface consisting of a UINavigationController that contains a UITableViewController and a UIViewController. You can skip to step 8 and add code to these existing screens, however to gain an understanding of how Storyboards work you should select and delete the Master and Detail screens from the Storyboard.

• Drag a new Table View Controller onto the design surface. 

• Drag a new UIViewController onto the design surface

• The Storyboard should now look like this (you can delete the Prototype Cell from the Table View, it will not be used):

• Hold down the Control key and click then drag from the Navigation Controller into the Table View Controller. When you ‘mouse up’ the following options appear – choose Relationship – Root View Controller.

• Now repeat by Control-dragging from the Table View’s Cell to the View Controller. Choose a Push segue from the list.

• Drag a Web View control onto the View Controller – this will be the ‘detail’ part of the user interface. Double-click on the Navigation Bar and type a Title for the View Controller – the example uses Vege.

• Click on the Table View then select the Identity Inspector.  Type a Class for the Table View – the example uses myTableViewCtrl (you can also double-click and set the navigation bar title to Vegetables).

• Repeat to set a Class for the UIViewController – the example uses myVegeViewCtrl.

• With the View Controller still selected, switch to the Attributes Inspector and enter an Identifier for it – the example uses vegeIdentifier.

• Save and close the Storyboard within Xcode and switch to Xamarin Studio. You should see new c# files created for the elements created above. Now double-click to re-open the .storyboard file. Open the Assistant Editor and Control-drag from the UIWebView into myVegeViewCtrl.h to create an outlet – the example calls the outlet webview.

• The Xcode design surface should now look like this. Close Xcode and return to Xamarin Studio to populate the Table View in code. 

• Open the myVegeViewCtrl.cs file and implement these methods to allow a URL to be loaded into the UIWebView control:

public void LoadUrl (string address) {
    this.address = address;
}

public override void ViewWillAppear (bool animated)
{
    base.ViewWillAppear (animated);
    UIApplication.SharedApplication.NetworkActivityIndicatorVisible = true;
    var url = new NSUrl(address);
    var req = new NSUrlRequest(url);
    webview.LoadRequest (req);
    webview.LoadFinished += (sender, e) => {
        UIApplication.SharedApplication.NetworkActivityIndicatorVisible = false;
    };
}

• The example code includes a TableSource and TableItem class in the Code folder, plus some images. Add these to your project:

• Open the myTableViewCtrl.cs file and add code to populate the table with data:

tableItems.Add (new TableItem("Vegetables") { SubHeading="65 items", ImageName="Vegetables.jpg", Url="http://en.wikipedia.org/wiki/List_of_leaf_vegetables"});

tableItems.Add (new TableItem("Fruits") { SubHeading="17 items", ImageName="Fruits.jpg", Url="http://en.wikipedia.org/wiki/List_of_gourds_and_squashes"});

tableItems.Add (new TableItem("Flower Buds") { SubHeading="5 items", ImageName="Flower Buds.jpg", Url="http://en.wikipedia.org/wiki/Edible_flowers"});

tableItems.Add (new TableItem("Legumes") { SubHeading="33 items", ImageName="Legumes.jpg", Url="http://en.wikipedia.org/wiki/Bean#Types"});

tableItems.Add (new TableItem("Bulbs") { SubHeading="18 items", ImageName="Bulbs.jpg", Url="http://en.wikipedia.org/wiki/Garlic"});

tableItems.Add (new TableItem("Tubers") { SubHeading="43 items", ImageName="Tubers.jpg", Url="http://en.wikipedia.org/wiki/List_of_root_vegetables"});

TableView.Source = new TableSource(this, tableItems);

• Open the Code/TableSource.cs file and review the RowSelected method.  This is where we reference the identifier set in step 11.

var detail = viewController.Storyboard.InstantiateViewController("vegeIdentifier") as myVegeViewCtrl;
detail.Title = tableItems[indexPath.Row].Heading;
detail.LoadUrl (tableItems[indexPath.Row].Url);
viewController.NavigationController.PushViewController (detail, true);

If you run the sample, it should look like this:

Storyboard support is not available in Visual Studio.