Use Multiple Detail Controllers

PDF for offline use
Sample Code:

Let us know how you feel about this

Translation Quality


0/250

This recipe shows how to use multiple detail controllers, where the controller that is loaded changes based upon the row that is selected in the master controller’s table.

Recipe

This recipes uses MonoTouch.Dialog to build the user interface. To include MonoTouch.Dialog in your app, right click on the iOS project's References node and select Edit References, then ensure the MonoTouch.Dialog-1 assembly is ticked.

  1. Create a new solution from the iPad Empty Project template named SplitMultiDetailDemo.
  1. Set the RootViewController of the window to a UISplitViewController, which we’ll implement next, in the AppDelegate:
public partial class AppDelegate : UIApplicationDelegate
{
      UIWindow window;
      SplitViewContoller splitController;
      public override bool FinishedLaunching (UIApplication app, NSDictionary options)
      {
              window = new UIWindow (UIScreen.MainScreen.Bounds);
              splitController = new SplitViewContoller ();
              window.RootViewController = splitController;
              window.MakeKeyAndVisible ();
              return true;
      }
}
  1. Add a class called SpiltViewController that inherits from UISplitViewController containing the following implementation:
public class SplitViewContoller : UISplitViewController
{
      SplitDelegate sd;
      ColorsController colorsController;
      UIViewController redVC, greenVC;
      UIViewController detailContainer;
      public SplitViewContoller () : base()
      {
              sd = new SplitDelegate ();
              Delegate = sd;
              colorsController = new ColorsController ();
              redVC = new UIViewController ();
              redVC.View.BackgroundColor = UIColor.Red;
              colorsController.ColorSelected += (sender, e) => {
                     if (e.Color == "Red") {
                            detailContainer = redVC;
                     } else if (e.Color == "Green") {
                            if (greenVC == null) {
                                   greenVC = new UIViewController ();
                                   greenVC.View.BackgroundColor = UIColor.Green;
                            }
                            detailContainer = greenVC;
                    }
                    ViewControllers = new UIViewController[] {
                        colorsController,
                        detailContainer
                   };
            };
            detailContainer = redVC;
            ViewControllers = new UIViewController[] {
                     colorsController,
                     detailContainer
             };
      }
      public override void ViewDidLoad ()
      {
              base.ViewDidLoad ();
      }
      class SplitDelegate : UISplitViewControllerDelegate
      {
              public override bool ShouldHideViewController (UISplitViewController svc,
        UIViewController viewController, UIInterfaceOrientation inOrientation)
              {
                     return false;
              }
      }
}
  1. Add a new class called ColorsController that inherits from DialogViewController (you may need to add using MonoTouch.Dialog; to the top of the page, and ensure the MonoTouch.Dialog-1 assembly is referenced, as described at the top of this page). This class will be the master controller in the master-detail scenario.
  2. Add the following code for the ColorsController:
using MonoTouch.Dialog;
...
public class ColorsController : DialogViewController
{
      public event EventHandler<ColorSelectedEventArgs> ColorSelected;
      List<string> colors = new List<string>{"Red", "Green"};
      public List<string> Colors {
              get {
                     return colors;
              }
      }
      public ColorsController () : base (null)
      {
              Root = new RootElement ("Colors") {
        new Section () {
            from color in colors
                select (Element) new StringElement(color, () => {
                    if(ColorSelected != null)
                        ColorSelected(this, new ColorSelectedEventArgs{Color = color});
                })
        }
    };
      }
}
public class ColorSelectedEventArgs : EventArgs
{
      public string Color { get; set; }
}
  1. Run the project and select a row in the master table and a new controller instance will load for the detail.

Additional Information

The UISplitViewController sets the master and detail controllers based upon the controllers added to the ViewControllers array. By raising an event from the master controller, the UISplitViewController can reload this array, keeping the same instance of the master controller but changing the detail controller in the array as needed.

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.