Question

I am trying to build an app using MonoTouch and MonoTouch.Dialog.

I really like the way dropbox have designed their welcome view. When the app opens up for the 1st time you are presented with a screen like

Its similar to what I need to do. I first need to check if my user is new to the product or already has an account.

Their welcome screen looks to me like a navigation controller (excuse me if im wrong)

I want to be able to add my business logo into the view similar to dropboxes and add the navigation buttons at the bottom of the view

Can MonoTouch.Dialog do something like this?

Answer 1

I think Anuj answered most of it – except the logo part. You likely want a nice, gradient-like, background like he propose (and should get the credit for ;-).

From there it might be easier to create a transparent (background) logo and add it on top of the background. To do this you can add an UIImage in the TableView inside the DialogViewController that you’ll use.

There are many other ways to do it. This one ensure your MT.D elements will be shown just under the TableHeaderView where your logo resides.

Here’s a quick (and very dirty) sample code to add an image in the header:

    public override bool FinishedLaunching (UIApplication app, NSDictionary options)
    {
       var root = new RootElement ("Welcome to MonoTouch") {
            new Section (String.Empty) {
                new StyledStringElement ("I'm already a MonoTouch user") {
                    Accessory = UITableViewCellAccessory.DisclosureIndicator
                },
                new StyledStringElement ("I'm new to MonoTouch") {
                    Accessory = UITableViewCellAccessory.DisclosureIndicator
                }
            }
        };

        var dv = new DialogViewController (root) {
            Autorotate = true
        };
        var data = NSData.FromUrl (new NSUrl ("https://github.com/xamarin/monotouch-samples/blob/master/AVCaptureFrames/Images/Icons/114_icon.png?raw=true"));
        var logo = UIImage.LoadFromData (data);
        dv.TableView.TableHeaderView = new UIImageView (logo);
        navigation.PushViewController (dv, true);               

        window.MakeKeyAndVisible ();

        // On iOS5 we use the new window.RootViewController, on older versions, we add the subview
        if (UIDevice.CurrentDevice.CheckSystemVersion (5, 0))
            window.RootViewController = navigation; 
        else
            window.AddSubview (navigation.View);

        return true;
    }