MonoTouch Navigation Controller Tutorial

This lesson will walk you through the creation of a simple iPhone application that has two views which are navigated between using a Navigation Controller

Generate a new “Navigation-based Project” in MonoDevelop

wpid4620-media-1271724833921.png

View the glory of your generated tableview

wpid4621-media-1271725016006.png

Run the generated application the simulator. Ooh!

Edit RootViewController.xib.cs to put some data in the table

wpid4622-media-1271725383786.png

Click on the RootViewController.xib element in the Solution Explorer and open the RootViewController.xib.cs file. Scroll down to the definition of DataSource : UITableViewSource and change the code in RowsInSection() and GetCell() as displayed above.

Much Better…

wpid4623-media-1271725489052.png

Generate a new view controller

wpid4624-media-1271725614355.png

Right Click on the NavControllerTutorial project, select “Add…/New File…” and from the iPhone group, select “View Interface Definition with Controller”. Name it “FontListController”

Edit your newly created FontListController.xib.cs

wpid4625-media-1271726398380.png

Click on the FontListController.xib and edit FontListController.xib.cs

override ViewDidLoad() so that it replaces the View with a TableView, and then define a private class to supply the data for that table

Add a button to your navigation controller that will instantiate and navigate to your newly defined View

wpid4626-media-1271726846229.png

Open RootViewController.xib.cs and modify the ViewDidLoad() method. This is actually where all the action is! When you want to switch between views (in this case, in response to clicking the “Fonts” button), you simply use PushViewController() to put it onto the NavigationController’s stack. Couldn’t be easier, really.

Forward navigation works…

wpid4627-media-1271726925334.png

Click on Fonts…

But it’s not obvious that reverse navigation works…

wpid4628-media-1271726971123.png

The weird thing here is that if you click on the left-hand side of the navigation bar, you will return to the Fruit Table View. But the navigation is invisible. To change that, you have to set a name for the View in MainWindow.xib

Set the title in the navigation bar of the MainWindow.xib

wpid4629-media-1271727087920.png

Bob’s Your Uncle…

wpid4630-media-1271727588372.png

div>