1. Computing

iOS Development in C# with Xamarin Studio and Visual Studio

Tutorial Three on Buttons


Buttons running on my iPhone

This is the third in a series of iPhone tutorials on programming iPhone and iPad Apps in C#. You might want to start with the first tutorial.

Note to follow these tutorials you will need a Mac computer and Xamarin Studio. The good news is that Xamarin provides a free version of Xamarin Studio though you are limited to small Apps. You should install Xcode on your Mac (It's free from the Mac Store).

Fun With Buttons

This tutorial is to teach you about Buttons plus we'll have just one UIViewController with two UIView subclasses. However to be a bit different, one of these views will be inherited from the other and the other one will reconfigure itself when you press a buttons.

Again this will be nibless. I may use nibs in one or two of the tutorials, but my preference is to go nibless when possible.

What is a Button?

Well specifically it's an instance of a UIButton, you'd think. Oh I'll create my own subclass from this (i.e. one that inherits from UIButton). But you shouldn't do that if you want to change its appearence, say create a glass Button. Why not?

Well Apple, who probably know a thing or two are adamant about this. In Apple View Programming Guide for iOS The last paragraph says "Although it is technically possible to add subviews to the standard system controls—objects that inherit from UIControl—you should never customize them in this way."

So how do you create a customized button? In my case, I wanted a glass button and I got a mate of mine to create a blue tinged glass PNG. I added this to a Resources folder I created. This is where the two graphics I created for the App Icon (standard and retina). Standard is 57 x 57 and retina is 114 x 114. Again these are PNG filess. In Xamarin Studio or the Visual Studio plugin look at the project properties and set them there. They get added into the Info.plist file like this:


When you add external resources to the project such as uiglassbutton.png, make sure that you set the Build Action to BundleResource or they won't be included.

The Buttons App

If you can't see this image, please click this to see it.

This is a simple App that creates a number of buttons. When you click a button, it creates some more.

The bulk of this program is in two files. MainView.cs and Support.cs. That latter file is a dumping ground for useful classes and data. For instance to make use of the glass button it has to be allocated storage in a UIImage glassimage and then loaded into memory and converted into a stretchable image. This is done in the Support static constructor.

static Support()
        glassimage = UIImage.FromFile("uiglassbutton.png") ;
        glassimage = glassimage.StretchableImage(9, 0) ;

The Support class also provides static methods for creating Glass buttons. To simplify the button clicking, I make on the parameters that creates it is a delegate - a method that is called when the button is clicked.

internal delegate void ActionEventHandler(object sender, EventArgs args);

This is the getGlassButton static method. Call this to create a glass button.

internal static UIButton getGlassButton(string _title, int _x, int _y, ActionEventHandler d)
        var button = new UIButton(new RectangleF(_x, _y, buttonDimensions, buttonDimensions)) ;
        button.SetBackgroundImage(glassimage, UIControlState.Normal) ;
        button.BackgroundColor = UIColor.Clear;
        button.Font = UIFont.BoldSystemFontOfSize(20) ;
        button.SetTitle(_title, UIControlState.Normal) ;
        button.Font = UIFont.SystemFontOfSize(24) ;
        button.TouchUpInside += (o, e) => d(o, e) ;
        return button;

Buttons are square shaped with rounded corners and the buttonDimensions is an int field that holds the value. This is calculated in the Main View when the program starts. The idea is that this works on an iPad or iPhone irrespective of the display size.

If you can't see this image, please click this to see it.

This line is what maps the button click to the delegate.

button.TouchUpInside += (o, e) => d(o, e);

It's a Lambda expression that calls the assigned ActionEventHandler with two parameters object ender and EventArgs e). For any method to be assignable it just needs to have these two params in the methods signature.


This is where all the action is. This one view handles all the buttons and creates them on the fly.

When the MainView constructor runs, it picks up the frame size and uses this to work out the buttonDimensions and then where three buttons can be arranged in rows at the bottom of the screen.

Each method Start(), One() and OneButton() starts by calling TidyViews() then assigning another method to the class member backAction.

TidyViews removes all subviews, ie buttons, labels etc in this view so think of it as a sort of Clear Screen() command.

private void TidyViews()
        foreach (var view in Subviews)
                 view.RemoveFromSuperview() ;

The methods Start(), One() and OneButton() implement a form of state machine and clicking any buttons shifts this "machine" to a display with different buttons. So when it starts there are three buttons One, Two and Three.

Pressing One invokes the One() method which adds six buttons in two rows of three. Then if you click Eight it invokes OneButton() and shifts to a display with one large Wide button. Clicking that invokes backAction which then returns to One state.

Not all iOS applications need a bunch of View Controllers. This one works quite nicely with just one controller and one view.

I deployed this App to my iPhone and that's the image at the top.

In the next tutorial, we'll look at other View Controllers and develop another App.

©2014 About.com. All rights reserved.