Xamarin ToolbarItem

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

Two Type of order in toolbar

  • Primary Toolbar
  • secondary toolbar

What is a Primary and secondary Toolbar?

Xamarin Forms supports the notion of Page-level toolbars. These are represented by the Page.ToolbarItems collection, and each ToolbarItem represents a clickable button that is hosted within the toolbar. In fact, there are two toolbars – the main “primary” toolbar that fills the right end of the navigation bar at the top of your screen, and also a “secondary” toolbar. You can only fit a few (two or three at most) toolbar items on the primary toolbar, and the rest are generally expected to go into the secondary toolbar. On Android this is done by adding an expansion button to the far right end of the primary toolbar which drops down a vertical menu containing the secondary toolbar items. That’s a fine and reasonable implementation for Android. On iOS, there is a native “bottom” toolbar that is intended to be used for this type of thing. But Xamarin Forms doesn’t use that native toolbar and instead creates its own custom panel below the primary toolbar and renders some rather ugly buttons there. Not only does this look very out of place in an iOS app, but it also prevents you from using the built-in system toolbar icons.

Step 1

Go to the Visual Studio

Click File -> New -> Project

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

Enter the Application Name, then Click ok.

Step 2

In this step go to Solution Explorer -> Portable Class Library, then Click Xaml, Insert the code given below the Xaml Page, then save it.

Step 3

Open App.Xaml.cs and set Page name

  1. public App()
  3. {
  5. InitializeComponent();
  7. MainPage = new Page1();
  9. }

Step 4

Open Page1.Xaml and add 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="App5.Page1"
  5. BackgroundColor="White">
  6. <ContentPage.ToolbarItems>
  7. <ToolbarItem Text ="Item 1"
  8. Priority="0" Order="Primary" />
  9. <ToolbarItem Text ="Item 2"
  10. Priority="1" Order="Primary" />
  11. <!--<ToolbarItem Text ="Item 2"
  12. Priority="1" Order="Secondary" />-->
  13. </ContentPage.ToolbarItems>
  14. </ContentPage>

Step 5

Open Page1.Xaml.cs and add code in this page.(You also 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;
  7. using Xamarin.Forms;
  9. namespace App5
  10. {
  11. public partial class Page1 : ContentPage
  12. {
  13. public Page1()
  14. {
  15. InitializeComponent();
  17. /* When toolbar item code is write cs page */
  19. // var Item1 = new ToolbarItem
  20. //{
  21. // Text = "Item 1"
  23. //};
  24. // var Item2 = new ToolbarItem
  25. // {
  26. // Text = "Item 2",
  27. // Order = ToolbarItemOrder.Secondary
  29. // };
  31. // this.ToolbarItems.Add(Item1);
  32. // this.ToolbarItems.Add(Item2);
  33. }
  34. }
  35. }

Step 6

Click build menu, then go to Configuration Manager

Configure your Android, Windows, IOS Depoly & Build Setting, then Click Close.

Step 7

In this step

Select build & Depoly Option, then Click to Start your the 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 8

Output

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

When Toolbar order is Primary
When order is primary and secondary
  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="App5.Page1"
  5. BackgroundColor="White">
  6. <ContentPage.ToolbarItems>
  7. <ToolbarItem Text ="Item 1"
  8. Priority="0" Order="Primary" />
  9. <!--<ToolbarItem Text ="Item 2"
  10. Priority="1" Order="Primary" />-->
  11. <ToolbarItem Text ="Item 2"
  12. Priority="1" Order="Secondary" />
  13. </ContentPage.ToolbarItems>
  14. </ContentPage>
Click secondary toolbar.