Xamarin.iOS – Create an Outlet with Interface Builder

In this lesson

  • Use Interface Builder to create an Outlet


Tap on time to skip ahead


Now that we’ve got the layout working, how do we actually interact with the elements that are in our nib? For example, if I come into our ViewDidLoad method here and I start typing this.StartButton, nothing is going to come up and I’m going to get a compiler error. That’s because our code doesn’t know about those items at all. How do we make it? With the way Apple has set up their SDK, is that you don’t just give it a simple name. If you take a look through the property inspector for the particular UI element, you won’t see any ID attributes or anything that can specify. Instead, what you have to do is create what’s known as an outlet, like an electrical outlet. You can think of it as a way to plug your code into it.


I’m going to select the two circle icon here in the upper right. You will see here we have some Objective-C code. One of the first things you’ll want to do, is you’ll see TimerViewController up here, which matches up with the name of our C# class. The .m is a convention used in C and Objective C to say, “Hey, this code is the actual implementation of the class interface.” If we go to the .h file, which stands for header, the interface header here, the .h file, acts as a blueprint that let’s other pieces of code know, “hey, these are going to be the things that you have available to you.”


Case in point, I’m going to select our label, and I’m going to control drag from our UI over here. This is when we start creating an outlet. Now, you can see the connection of type outlet. This is now where I can give the name to our layout. I’m going to call it Time Label.


Now, we have an outlet for our UILabel. If I close xCode and come back to Xamarin Studio, let it sync for a second. If we open up the designer part of our partial class, you will see we now have a property called Time Label. If we go to our main view controller class, I can now say this.TimeLabel.Text=this. If I run our application, you should be able to modify the text of our label, like so. That’s how you connect interface builder to your code.