Getting ready

In the previous recipe, we learned how to add controls to form a basic interface for our app. In this recipe, we will discuss how to access and use these controls in our code. Launch Xamarin Studio and open the project ButtonInput we created earlier. Open the project's ButtonInputViewController.xib in Interface Builder by double-clicking on it in the Solution pad.

How to do it...

Perform the following steps to access the UI with Outlets:

That was it! Our app is now ready with functional controls. Compile and run it on the simulator. See the label changing its text when you tap on the button.

How it works...

The Outlet mechanism is basically a way of connecting Interface Builder objects with the code. It is necessary since it is the only way we can access user interface objects that we create with Interface Builder. This is how Interface Builder works, and it is not just a Xamarin.iOS workaround. An Outlet of an object provides a variable of this object so that we will be able to use it in a project. Xamarin.iOS makes a developer's life much easier because when we create Outlets in Interface Builder and connect them, Xamarin Studio works in the background by autogenerating code regarding these Outlets. This is what the ButtonInputViewController.designer.cs file has added to provide us access to the controls we created:

[Outlet]
MonoTouch.UIKit.UILabel labelStatus { get; set; }

[Outlet]
MonoTouch.UIKit.UIButton buttonTap { get; set; }

These are the properties which provide us access to the controls. They are decorated with the Outlet attribute. You can see that the names of the properties are exactly the same names we entered for our Outlets. This is very important since we only have to provide names once for the Outlets, and we do not have to worry about repeating the same naming conventions in different parts of our code. Also, notice that the types of variables of the controls are exactly the same as the types of controls we dragged-and-dropped in our user interface. This information is stored in the XIB file, and Xamarin Studio reads this information accordingly.

There's more...

To remove Outlets, you first have to disconnect them. For example, to remove the buttonTap Outlet, press Ctrl and click on the button. In the panel that will appear, click on the x button next to the Outlet, as shown in the following screenshot. This will disconnect the Outlet.

After this, delete the following code from the Objective-C source file:

@property (retain, nonatomic) IBOutlet UIButton *buttonTap;

When you save the document, the Outlet will be removed from the Xamarin Studio project.

Adding Outlets through code

Another way of adding Outlets is to create a property in your C# class and decorate it with the Outlet attribute:

[Outlet]
UIButton ButtonTap { get;       set; }

When you open the XIB file in Interface Builder, the Outlet will be added to the user interface. However, you would still have to connect it to the corresponding control. The easiest way to do this is to press Ctrl, click on the control the Outlet corresponds to, and click-and-drag from New Referencing Outlet to the File's Owner object on the left of the designer area, as shown in the following screenshot:

When you release the cursor, select the ButtonTap Outlet from the small context menu that will appear.

Note

Note that it is Xamarin Studio that monitors for changes made in Interface Builder, and not the other way around. When making changes in the Xamarin project, make sure to always open the XIB file from Xamarin Studio.

See also