Toolbar In Xamarin.iOS Application View

Introduction

In this article, we are going to create a Xamarin application that contains toolbar items with respective tools and functionality. Tools like add, edit, refresh, search in the form of icons or text can be applied on the toolbar and the required specific functionality can be added to its event.

This article will cover the following.

Xamarin IOS native application.
Use of view controller.
Toolbar and its tool with the added event.

Prerequisites

Basic programming in c#.
Knowledge of Xamarin is a plus.

Implementation

Let us start implementing the application.

Start Visual Studio Community Edition.

Xamarin

Select single view app and click on Next.

Write the app name and click Next.

Xamarin

Set the project name and location and create the application. Open main.storyboard. You will have View controller.

Go to toolbox pad and add the toolbar view to your controller.

Xamarin

Drag and add the toolbar view to the controller and fix it to the exact position and set the width and position accordingly.

Click on Item that is the default tool item provided by the toolbar view and set the following properties.

On the bar button item strip:

set Style: Bordered and Identifier: Add

You can also set the background color of the toolbar. Eg: Cyan (I have taken in my app).

After the above setting, your toolbar will look like this.

Now, let us add some more items to the toolbar.

All you have to do is to add the bar button item from the toolbox pad. Then drag the bar button item to the toolbar view. This will add the new item and you can modify the icon as an identifier for its view.

Add the identifier as required.

Note

If you don't want icon and need simple text kind bar item button. Then you have to set the Title property of the Bar item.

Added the tools and done setting for its identifier as below.

Notice that, the tool bar button item we are adding are going from left to right respectively.

If you want to have any bar button item on the right corner then you have to create the space for that. Here I have added a new bar button item before the bookmark item.

Now set the Bar button item Identifier property to “Flexible space”.

You will have the toolbar look like this.

Xamarin

In above we have created flexible space and it will not look like this in dotted arrow at runtime.

Now we are adding Label and defining its text to the view and changing background color of the view controller.

Your final view will look like this.

Now we have to add the event that will execute when we click on any tool item.

How to Add event

Double click on any item in the toolbar. Let us suppose we double clicked on + tool item.

Xamarin

In the above screen, you can see that it is asking where you want to place the event and you can use the arrow to get the location and press enter to select the location.

Xamarin

The above example button event added with some unique identity and you will have different event name for every item you double-clicked.

Now implement some functionality to this newly added event.

Xamarin

Same as you can define the click event for each and every item button for the toolbar.

My ViewController.cs file is as below,

using System;
using UIKit;
namespace ToolbarAppIOS
{
public partial class ViewController : UIViewController
{
protected ViewController(IntPtr handle) : base(handle)
{
// Note: this .ctor should not contain any initialization logic.
}
public override void ViewDidLoad()
{
base.ViewDidLoad();
// Perform any additional setup after loading the view, typically from a nib.
}
public override void DidReceiveMemoryWarning()
{
base.DidReceiveMemoryWarning();
// Release any cached data, images, etc that aren't in use.
}
partial void UIBarButtonItem26_Activated(UIBarButtonItem sender)
{
var alert = UIAlertController.Create("alert", "You pressed add.", UIAlertControllerStyle.Alert);
alert.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, null));
PresentViewController(alert, true, null);
}
partial void UIBarButtonItem27_Activated(UIBarButtonItem sender)
{
var alert = UIAlertController.Create("alert", "You pressed search.", UIAlertControllerStyle.Alert);
alert.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, null));
PresentViewController(alert, true, null);
}
partial void UIBarButtonItem28_Activated(UIBarButtonItem sender)
{
var alert = UIAlertController.Create("alert", "You pressed refresh.", UIAlertControllerStyle.Alert);
alert.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, null));
PresentViewController(alert, true, null);
}
partial void UIBarButtonItem29_Activated(UIBarButtonItem sender)
{
var alert = UIAlertController.Create("alert", "You pressed comment.", UIAlertControllerStyle.Alert);
alert.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, null));
PresentViewController(alert, true, null);
}
partial void UIBarButtonItem30_Activated(UIBarButtonItem sender)
{
var alert = UIAlertController.Create("alert", "You pressed cancel.", UIAlertControllerStyle.Alert);
alert.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, null));
PresentViewController(alert, true, null);
}
partial void UIBarButtonItem31_Activated(UIBarButtonItem sender)
{
var alert = UIAlertController.Create("alert", "You pressed bookmark.", UIAlertControllerStyle.Alert);
alert.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, null));
PresentViewController(alert, true, null);
}
}
}

Now, build and run the application.

Click on the "+" button.

Click on the Bookmark item.

In this, we we can attach any type of functionality to the click event of the toolbar item button.