Xamarin iOS Designer and Storyboards – Part 2

By August 21, 2013Uncategorized

In our last installment we introduced the Xamarin iOS Designer and briefly discussed using it to build “scenes” in iOS Storyboards. This time around we are going to take a quick look at how we use the Xamarin iOS Designer to make UI widgets accessible from our code. Let’s start by fleshing out our main scene a bit for a simple hello world with adjustable text size:


Our storyboard scene contains a UILabel for the Hello World message, a UISlider to adjust the text size, a UITextField and a UIButton. We are going to need to manipulate the UILabel at the top when the text size slider is used or when the “Say Hello” button is touched, so this widget will need to be accessible from code.

When using Xcode’s Interface Builder with either xib’s or storyboards, creating “code behind” for a widget or event involves and somewhat tricky process of splitting your editor and dragging a widget or event from the visual storyboard into the proper implementation file within the code editor. Xamarin’s iOS Designer does things in a somewhat simpler fashion. Simply give the widget (the UILabel in this case) in the Identity section of the UILabel properties, and the Xamarin iOS designer will generate the proper “outlet” that will enable this control to be accessed with code.


We will also create an outlet for the UITextField so that our code can retrieve the value input by the user. We can now do something similar in order to wire up events, called Actions in Interface Builder. Like before, with the Xamarin iOS Designer there is no need to CTRL-drag lines between visual and code editors, just type in a new event handler name or choose an existing one.


Once we have done this for the UISlider as well, we can take a look at the “code behind” file that has been generated by Xamarin.iOS, in this case it is called StoryboardSampleViewController.designer.cs. This file is maintained by the designer, there will be one for each view controller in the storyboard, and it should not be edited manually. A partial class has been declared that defines the outlets (control references) and actions (events) that you have defined in the designer.

// WARNING
//
// This file has been generated automatically by Xamarin Studio to store outlets and
// actions made in the UI designer. If it is removed, they will be lost.
// Manual changes to this file may not be handled correctly.
//
using MonoTouch.Foundation;
using System.CodeDom.Compiler;
 
namespace StoryboardSample
{
    [Register ("StoryboardSampleViewController")]
    partial class StoryboardSampleViewController
    {
        [Outlet]
        MonoTouch.UIKit.UILabel HelloWorldLabel { get; set; }
 
        [Action ("HelloButtonTouched:")]
        partial void HelloButtonTouched (MonoTouch.UIKit.UIButton sender);
 
        [Action ("SliderChanged:")]
        [GeneratedCodeAttribute ("iOS Designer", "1.0")]
        partial void SliderChanged (MonoTouch.UIKit.UISlider sender);
         
        void ReleaseDesignerOutlets ()
        {
            if (HelloWorldLabel != null) {
                HelloWorldLabel.Dispose ();
                HelloWorldLabel = null;
            }
        }
    }
}

For the events, or actions, we must manually implement the handler in the StoryboardSampleViewController.cs file. We can use some help from code completion here, just type “partial ” and you will be presented with a code completion for the handlers we have configured in the storyboard.

Finally, we might implement our event handlers something like the following:

partial void HelloButtonTouched(MonoTouch.UIKit.UIButton sender)
{
    this.HelloWorldLabel.Text = String.Format("Hello {0}, welcome to Xamarin.iOS",this.NameTextField.Text);
}
 
partial void SliderChanged(MonoTouch.UIKit.UISlider sender)
{
    this.HelloWorldLabel.Font = this.HelloWorldLabel.Font.WithSize(sender.Value);
}

That’s it! Look Ma, no Xcode. In Part 3 we will learn to add additional scenes (view controllers) to our storyboard and a quick Xamarin iOS Designer trick for creating the skeleton view controller code.

The following two tabs change content below.