Post
Ask Question

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.

  1. public App()  
  2.        {  
  3.            InitializeComponent();  
  4.   
  5.            MainPage = new Page1();  
  6.        }  
Step 5

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

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

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

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6.   
  7. using Xamarin.Forms;  
  8.   
  9. namespace ToolbarIconExample  
  10. {  
  11.     public partial class Page1 : ContentPage  
  12.     {  
  13.         public Page1()  
  14.         {  
  15.             InitializeComponent();  
  16.             //var cartimg = new ToolbarItem  
  17.             //    {  
  18.             //        Icon = "download.png",  
  19.             //        Priority = 0,  
  20.             //        Order = ToolbarItemOrder.Primary  
  21.             //    };  
  22.         }  
  23.         private void Onclick(object sender, EventArgs e)  
  24.         {  
  25.         }  
  26.     }  
  27. }  
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.


Similar Articles