Toolbar Icon In Xamarin Cross Platform With Example

Xamarin ToolbarItem

Xamarin Forms Toolbar is an abstraction of the extensions, which you can add to the Navigation bar on each platform. Toolbar Items are the individual items, which you add to the Navigation bar. The difficult part with this abstraction is the need for it to be separate or included in the Navigation bar.

Step 1

Go to Visual Studio.

Click File -> New -> Project.

Click C# -> Cross Platform -> Cross Platform App(Xamarin.Forms.Portable).

Enter the Application Name and click OK.

Step 2

In this step, go to Solution Explorer -> Portable Class Library, click XAML and insert the code given below XAML page and save it.

Step 3

In this step, put an image in an Android and iOS folder (shown in the image).

For WinPhone, click Winphone Project and paste the image.

Step 4

Open App.Xaml.cs and set the page name.

public App()
{
InitializeComponent();
MainPage = new Page1();
}

Step 5

Open Page1.Xaml and add the code in this page.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ToolbarIconExample.Page1">
<ContentPage.Content>
</ContentPage.Content>
<ContentPage.ToolbarItems>
<ToolbarItem Name="iconexample" Icon="icon.png" Priority="0" Order="Primary" Activated="Onclick" />
</ContentPage.ToolbarItems>
</ContentPage>

Step 6

Open Page1.Xaml.cs and the add code in this page. (You will also get toolbar code in cs page).

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace ToolbarIconExample
{
public partial class Page1 : ContentPage
{
public Page1()
{
InitializeComponent();
//var cartimg = new ToolbarItem
// {
// Icon = "download.png",
// Priority = 0,
// Order = ToolbarItemOrder.Primary
// };
}
private void Onclick(object sender, EventArgs e)
{
}
}
}

Step 7

Click Build menu, go to Configuration Manager

Configure your Android, Windows, iOS Depoly & Build Setting and click Close.

Step 8

In this step, select Build & Deploy option, click Start your Application.

Now, go to Run option, choose Debug from the list of Android or IOS or UWP Simulators, which are available. You can choose any one Simulator and run it.

Step 9

Output

After a few seconds, the app will start running on your Android Simulator. You will see your app is working successfully.

3 Comments

Join the conversation! Your thoughts help the community grow.

Sandip Variya6y ago
Hello, Disha I'm followed your tutorial but i have faced one issue when i set on place { Icon="any.png" } but not showed. can we set any image in there ?
Sandip Variya6y ago
Hello, Disha I'm followed your tutorial but i have faced one issue when i set on place { Icon="any.png" } but not showed. can we set any image in there ?
- Disha Raval6y ago
  Have you put any image in the drawable folder?