Wiki

Case Status Kiln
Register Log In

Wiki

 
Create a View screen for Xamar…
  • RSS Feed

Last modified on 3/4/2019 1:11 PM by User.

Tags:

Create a View screen for Xamarin iOS

The process is a bit cumbersome and there are a lot of gotchas, this guide will help avoiding common issues.

  • Basically there is only one supported way to create working views for Xamarin iOS that have a working designer: Storyboards - all other options are bad: in code View/ViewController/Model will not support a designer, .xib files are supported in the designer, but don't work in code and can't be loaded or connected due to bugs in Xamarin, and finally Xamarin.Forms is a great multiplatform solution and works on iOS as well, but there is no working designer for it either (plus it is slow, cumbersome and limiting).
  • Once the basics are set, it is very easy to use, test, design and work with.
  1. In the iOS project add a new View Controller with Storyboard (do not use Empty, which is hard to fix, View .xib files are completely broken and the other options usually only work with code only, except for Dialog View Controller, which works nicely as well)
  2. Open the new storyboard file, it will be empty. To make it work drag in a View Controller from the toolbox. Also make sure you have "Document Outline" and "Properties" toolbars open (use Quick Launch on the top right to open them or use Ctrl+Q)
  3. Click on the View Controller you just dragged in and make sure it is connected to the class you just created, e.g. NewViewController or OtherViewController, also set the same to the Storyboard ID. Note: Each storyboard can have multiple view controllers and many other things, this guide just shows one way to use them.
  4. Finally add this method in the code to make creating and using thew new view controller (replace NewViewController with the name of your class):

            public static NewViewController Create()
            {
                if (storyboard == null)
                    storyboard = UIStoryboard.FromName(nameof(NewViewController), null);
                return (NewViewController)storyboard.InstantiateViewController(nameof(NewViewController));
            }
            private static UIStoryboard storyboard;

     
  5. That's it, any control you create will also be available and usable in the code via the ViewController, which manages the creation of the view and add any code behind logic. Make sure to name all important controls with proper names so they can be found in the code (e.g. QuestionLabel, DefaultImage, MenuIcon, etc.)

IMPORTANT

  • The Visual Studio Xamarin Storyboard Designer works most of the time, but for complex layouts, especially using constraints or autosizing, it often has no effect and can be very frustrating to work with
  • Also the properties do often not show up and the connection to the Mac might crash and leave you with an unusable editor, the document outline works well and when the connection is there you can preview storyboards also quite nicely, just editing them can be a pain
  • An alternative is to use XCode on the Mac to edit Storyboards, simply copy over any .storyboard file (and preferably all needed resources) to a folder on the Mac and edit it there, when done copy back into the project and use. The preview is much better on the mac and many of the bugs of Xamarin don't exist there, editing is still cumbersome and strange in an apple-kind-of-way.