Mac Apps with Xamarin – Hello World Tutorial

Some time ago I wrote an article about how to get started with Windows 10 App development. This article will introduce you to Mac-Apps and will guide you through the process of programming one with Xamarin and C#.

Easy to follow video included at the end of the article.

Setting everything up

Before you can start, you’ll need to download the latest version of XCode from the Mac App-Store:

Simply download the whole package, which might take some time, and then install it. Unfortunately you’ll need to install XCode, because Xamarin relies on XCode’s GUI editor.

Now go to the Xamarin website and download the version you want to use. There is a free version, which I’ll be using.

Simply download it and install the package. It’s a straight forward installer. Just select the platforms you want to support and you’re ready to go! If you are asked at some point wether you want to install the command line tools or not, choose ‘Yes’.

After the setup is finished, Xamarin should start and the window should look something like this, depending on your version, of course:

Create a new project

To create a new project, click on ‘File’ and select ‘New Solution…’ and a dialogue like this should pop up:

In this window choose ‘Mac’ and ‘App’ on the left hand side and from the center area choose ‘Cocoa App’ and the language you want to use for programming. I’ll use C# in this tutorial.

On the next page select a name for your app:

Now just create the project and you are ready to go!

Start designing!

On the left side of Xamarin Studio you should see the Solution Explorer. Locate the ‘Main.storyboard’ file and double click it. XCode should come up with it’s GUI editor:

I won’t go into the details of how Cocoa Apps are structured in this article, because this is meant to be a quick reference for beginners to get an idea on how to get started with Xamarin.

All the elements are placed on so called ‘View Controllers’. If you know Java/Swing GUI development, you can think of these as panels that group elements together. These view controllers can then be placed in various locations throughout your app, for example in the main window.

Drag a label somewhere onto the default view controller of your app. The controls are located in the bottom-right corner of the designer by default. You can scroll through all the elements or you can filter them by keywords, which is handy because there are a lot of elements in this list. Above that you can find the attributes of the selected element. We’ll look into that in a second:

After you dragged a label into the view controller you can either double click it, to change it’s text or edit the text in the attribute editor on the right. Either way will work just fine. Let’s change the text to ‘Hello World’, like I did above.

Next change the text colour and it’s size on your own, so you get an idea on how to navigate through the attributes! Note that you might have to adjust the label’s size afterwards.

Testing

When you are done designing your GUI, save the file and switch back to Xamarin. Don’t close XCode yet. The storyboard-files are being shared between Xamarin and XCode, sou you don’t have to worry about synchronising them. Just don’t forget to save, or it won’t work.

In Xamarin Studio use the play button in the top left corner to start your app. It should compile without any issues and a window like this should pop up:

Extending the example

Now we’ll extend the app, so that it looks and does the same as the one I showed you in  the Windows 10 tutorial. For this you’ll need to drag a textfield and a pushbutton into the app’s main view controller, so that it looks somewhat like this:

If you start the app now and resize it, you’ll notice, that something is wrong:

We’ll have to snap the UI-elements to the edges we want them to stay at when the window is resized. In XCode you can do this by selecting the UI-element you want to edit. In the attributes (see fig. 9), go to the fifth tab (the one with the little ruler-symbol, right next to the one, that’s selected in fig. 6). This tab should look something like this:

Left from the screenshot of the desktop you can see these 4 outer and 2 inner arrows in a box. You can use these to change the behaviour of an object. The screenshot itself is animated and when you hover it, it’ll show you, how the element is going to react on resize.

I want the button to always stay in the bottom right corner without resizing, when the window does. So I’m going to select the outer right and down arrows and deselect the up and left outer ones.

The textfield should always stay in the bottom left and right corner and it should resize itself, when the window does, so I’m going to select the horizontal inner arrow, so that it resizes itself on this axis, when the window does, and I’m going to select the down, left and right outer arrows, so that it stays in this corner.

Adding functionality and event handling

Now finally some programming!

I always thought that this concept is much more complicated to understand for Cocoa Apps than it is for Windows Apps, however I’m going to try to explain the concept as good as I can. Basically it’s the same, but the terminology is different.

In XCode, switch to the ‘Assistant Editor’ (see fig. 10) and select the file ‘ViewController.h’:

After selecting the right file, hold down the ctrl-key on your keyboard and click drag all the elements you want to use in your code later, into the window on the right side. In this case, you’ll have to drag all the elements into the code window on the right. When you drag an element into the code, a small window will pop up, asking you for the name. Simply input the name, you want to give to the UI element, and leave everything else untouched.

After dragging all the elements in the window on the right, your code should look somewhat like mine:

// WARNING
// This file has been generated automatically by Xamarin Studio to
// mirror C# types. Changes in this file made by drag-connecting
// from the UI designer will be synchronized back to C#, but
// more complex manual changes may not transfer correctly.

#import <Foundation/Foundation.h>
#import <AppKit/AppKit.h>

@interface ViewController : NSViewController {
    NSButton *okButton;
    NSTextField *inputTBox;
    NSTextField *outputLabel;
}
@property (assign) IBOutlet NSButton *okButton;
@property (assign) IBOutlet NSTextField *inputTBox;
@property (assign) IBOutlet NSTextField *outputLabel;

@end

After this is done, save the files and close XCode, you won’t need it any longer. Now switch back to Xamarin.

In Xamarin, open the file called ‘ViewController.cs’. In here you can now use Lambda-Expressions to define event handlers and you can reference to all the UI-elements via the names you gave them, while dragging them in the code in XCode.

Just override the AwakeFromNib()-Method:

public override void AwakeFromNib()
{
    base.AwakeFromNib();
// Lambda expression
    okButton.Activated += (sender, e) =>
    {
        outputLabel.StringValue = inputTBox.StringValue;
    };
}

The finished app

Now we can test it! So here it is, in all it’s glory:

Video

Conclusion

Creating Mac-Apps with Xamarin is much much easier than creating them with XCode only, at least it’s for me, because I know C# and like it much more than Swift. However the concept of outlets and actions is not as intuitive, as it could be. So I guess that’s easier to understand in Windows Apps, again, at least it is for me. I guess it’s due to the fact that I have been writing Windows Apps for years now and I’m still quite new to Mac-Apps.