Xamarin Forms Toolbar

The 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. In this post, I will go through how to add and customize items in the toolbar, however I normally recommend to steer clear of this functionality, and create your own navigation bar from scratch, due to the limitations on customization.

Toolbar Items

First, lets have a look at how Toolbar Items look on each platform.

Android

In Android, the toolbar items are added to the App Bar (a.k.a Action Bar).

Both Primary Items

android

One Primary, One Secondary

androidsecondary

androidsecondaryclicked

iOS

In iOS, the toolbar items are added to the NavigationBar.

Both Primary

ios

 

One Primary, One Secondary

iossecondary

UWP

In UWP, the toolbar items are added to the Command Bar (App Bar prior to UWP).

Both Primary

uwpdesktopuwpphone

 

One Primary, One Secondary

uwpdesktopsecondary uwpphonesecondary

Toolbar Item

Here is an example of how to add ToolbarItems in Xamarin Forms, to a ContentPage.

<ContentPage.ToolbarItems>
    <ToolbarItem Name="MenuItem1" Order="Primary" Icon="Microsoft.png" Text="Item 1" Priority="0" />
    <ToolbarItem Name="MenuItem2" Order="Primary" Icon="Xamarin.png" Text="Item 2" Priority="1" />
</ContentPage.ToolbarItems>

The ContentPage must be part of a NavigationPage and the NavigationBar must not have been disabled. If your ContentPage isn’t inside a NavigationPage, or you disabled your NavigationBar, then the ToolbarItems will not be displayed.

Layout Options

There are a number of options that allow you to change certain visual aspects and location of each ToolbarItem.

Icons

You can specify icons to be displayed. UWP expects an icon and will leave a space there if none is specified. An interesting thing to note, is that icons will always be turned white or black in UWP, depending upon the theme of the app, and shrunk to size. In iOS they will be turned to the default theme color, and not shrunk. You can not have a color icon, in UWP or iOS. In Android, the icon is shown in full color. Note that I used the full color png for the icon image and it was automatically converted via the platform.

Android

androidicons

iOS

iosicons

UWP

uwpdesktop uwpphone

Text

Text is simple. Add text to the Text property and it will be displayed. If you type in a really long piece of text, interestingly, this toolbar is quite high on the priority of what gets displayed.

In UWP, it expands vertically, in both the desktop and phone version.

longtextuwp

In Android, it expands horizontally, even taking priority on the title.

androidlongtext

In iOS, the same again, as it expands horizontally, taking the top priority.

ioslongtext

Ordering

Ordering the icons, or text, is simply done by adding an integer from 0 to X, in order of left to right. You do this with the Priority Property, not the Ordering property.

Secondary Toolbar

The secondary toolbar, as you can see in the screenshots above, is either a drop down menu, with more menu options, or a secondary bar, underneath the primary. Depending upon where you want to place it, use the Order property and set to Primary or Secondary.

<ToolbarItem Name="MenuItem2" Order="Secondary" Icon="Xamarin.png" Text="Item 2" Priority="1" />

Note: Toolbar Items are not, by default, updatable, after they have been added to the toolbar , however there are ways around this.

On Click

If you want to perform an action when a toolbar item is clicked, you have the option of an event, or a command. Using an event, you simply use the Activated event.

Activated="MenuItem1_Activated"

Using a command, you bind to an ICommand, similar to many other controls.

Command="{Binding ToolbarItemCommand}" CommandParameter="1"
Microsoft MVP | Xamarin MVP | Xamarin Certified Developer |
Exrin MVVM Framework | Xamarin Forms Developer | Melbourne, Australia

Related Posts

13 Comments

  1. Stacy

    I cannot get my toolbar items to display in windows UWP. It displays properly in iOS and Windows Phone 8.1 but it will not display in Windows UWP? At least not in my Visual Studio simulator. What do I need to do to make it display?

    I have made sure that it is wrapped in a NavigationPage. I have made sure that the SetHasNavigationBar is true. Nothing works in UWP.

    Can you help point me in the right direction? I’ve been working on this for months and my deadline is coming up very quickly. Every article/forum/example I have found on the web has explained how to add the toolbar items (relatively all the same code) and I have tried every one that I have found — no luck! It just won’t display on the UWP simulator?

    I am also on the latest version of Xamarin.Forms as of 2/20/17 and I am using a PCL project.

    1. Graeme

      @Stacy I just had the same problem however it seems that if a Title is not set for the page then the nav bar is not shown. Try setting the Title in you content page constructor.

  2. mpalamos

    HI, I am new to xamarin forms and i want to ask you, how can i add the following code to App.xaml(Application.Resources) to have it on every content page.

    Will this work for both IOS , Android?

  3. mpalamos

    (Sry fro previous comment) .. I am new to xamarin forms and i want to ask you, how can i add the following code to App.xaml(Application.Resources) to have it on every content page.

    CODE:::
    ____________________________

    ContentPage.ToolbarItems
    ToolbarItem Order=”Primary” Priority=”1″
    ToolbarItem Order=”Secondary” Text=”change pass” Priority=”2″
    ToolbarItem Order=”Secondary” Text=”Έξοδος” Priority=”3″
    ContentPage.ToolbarItems
    ___________________________

    Will this work for both IOS , Android?

    1. Adam Pedley

      Create a new ContentPage, and we can call it BasePage.

      In that BasePage, put the Toolbar.

      Then in every other page, inherit from BasePage.

      e.g.

      public class MainPage: BasePage {}

      and in XAML, change it to include the below, instead of ContentPage.

      <local:BasePage xmlns:local=”clr-namespace:MobileApp.NamespaceTheBasePageIsIn” >

    1. Adam Pedley

      Unfortunately no. You would need to create your own Header/Toolbar from scratch to implement that. However this would be trying to make an iOS app like an Android app, which is usually not a recommended approach. Try to play to each platforms strengths, without making them look identical.

  4. Raja Babu

    How to get the toolbar across all the pages/views?
    Can I use Prism/MVVM for the same, I can’t get the ICommand working with this?

Leave A Comment?