Corrado's Blog 2.0

Online thoughts of a technology funatic

ToolbarItems in Xamarin Forms

A interesting Xamarin Forms feature well hidden inside documentation is that Page class exposes a collection of ToolbarItems. a ToolbarItem is an element that renders a “menu” on each platform letting you add elements like Menu on Android/iOS or ApplicationBar/MenuItems in Windows Phone.

To use Toolbaitems just create a new Xamarin Forms solutions and update all Xamarin related packages to latest version (there are several fixes related to Toolbaritems since v.1.0) then create a new MainView.xaml page (you can use code if you prefer, but I like XAML…) and add a couple of ToolBarItems to Page’s ToolbarItems collection:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        x:Class="ToolbarItems.Views.MainView">
 <ContentPage.ToolbarItems>
  <ToolbarItem Name="Menu1" Activated="OnClick"  Order="Primary" Priority="0" />
  <ToolbarItem Name="Menu2" Activated="OnClick"  Order="Primary" Priority="1" />
 </ContentPage.ToolbarItems>

</ContentPage>

and this is code-behind:

void OnClick(object sender, EventArgs e)
  {
   ToolbarItem tbi = (ToolbarItem) sender;
   this.DisplayAlert("Selected!", tbi.Name,"OK");
  }

Change the startup page embedding MainView.xaml in a Navigation Page (this step is required in order to have menus available on Android platform)

namespace ToolbarItems
{
 public class App
 {
  public static Page GetMainPage()
  {
   return new NavigationPage(new MainView());
  }
 }
}

Here’s what you get on different platforms:

imageimageimage

please note how menus in iOS are in opposite direction compared to Android and Windows Phone, and how Windows Phone obviously miss the appropriate icons.

Let’s fix both issues with a little help from OnPlatform (used both resources and Property elements to cover both usage scenarios)

<?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="ToolbarItems.Views.MainView">
 <ContentPage.Resources>
  <ResourceDictionary>
   <OnPlatform x:Key="Priority1" x:TypeArguments="x:Int32"
      iOS="0"
      Android="1"
      WinPhone="1" />
   <OnPlatform x:Key="Priority2" x:TypeArguments="x:Int32"
      iOS="1"
      Android="0"
      WinPhone="0" />
  </ResourceDictionary>
 </ContentPage.Resources>

 <ContentPage.ToolbarItems>
  <ToolbarItem Name="Menu1" Activated="OnClick" Order="Primary" Priority="{StaticResource Priority1}"  >
   <ToolbarItem.Icon>
    <OnPlatform x:TypeArguments="FileImageSource"
      WinPhone="Toolkit.Content/ApplicationBar.Add.png" />
   </ToolbarItem.Icon>
  </ToolbarItem>
  <ToolbarItem Name="Menu2" Activated="OnClick" Order="Primary" Priority="{StaticResource Priority2}" >
   <ToolbarItem.Icon>
    <OnPlatform x:TypeArguments="FileImageSource"
     WinPhone="Toolkit.Content/ApplicationBar.Check.png" />
   </ToolbarItem.Icon>
  </ToolbarItem>
 </ContentPage.ToolbarItems>
</ContentPage>

Of course you can use Icon property on each platform (see Android sample below)

image

The role of Order property depends on platform, on Windows Phone using Secondary  creates MenuItems, on Android it adds entries to Page menu and on iOS render menu as horizontally aligned buttons.

Android

image

Windows Phone

image

iOS

image

I took a while for me to know about this feature, glad I’ve found it.

16 Responses to “ToolbarItems in Xamarin Forms”

  1. This post will be on Xamarin Weekly Newsletter Issue #7

    Comment by Adam J WOlf — 25/09/2014 @ 16:01

  2. I must set
    Order=”Secondary”
    in order to get the items to show up under the : item container. Otherwise they show up across the top of the bar.

    Comment by Barton — 22/11/2014 @ 01:25

  3. Really useful, thank you

    Comment by Matt Whetton — 29/12/2014 @ 16:20

  4. [Obsolete("Now that ToolbarItem is based on MenuItem, .Text has replaced .Name")]
    public string Name {
    get;
    set;
    }

    Comment by Barton — 05/02/2015 @ 23:08

  5. Hi,

    I would like to know what if I want to place toolbarITems at bottom of the page.

    As with order=”Secondary” It places toolbarItems at top of contentpage.

    I am talking about default behavior of ToolBarITems in iOS. How this could be done in Xamarin forms.

    Comment by hrishikesh — 07/05/2015 @ 11:31

  6. Ciao Corrado.
    E’ possibile che se uso icone nella toolbaritems “colorate”, le vedo correttamente colorate in Android ma in iOS le vedo bianche?
    E’ un comportamento proprio di iOS?
    Grazie

    Comment by Alessandro — 12/05/2015 @ 12:52

  7. Ciao Corrado.
    E’ possibile che se uso icone nella toolbaritems “colorate”, le vedo correttamente colorate in Android ma in iOS le vedo bianche?
    E’ un comportamento proprio di iOS?
    Grazie

    Comment by Alessandro — 12/05/2015 @ 12:53

  8. Great! That was so useful to me :)

    Comment by Erick — 25/05/2015 @ 21:50

  9. Hi thanks for the post.
    How do i change the default display icon / text of the overflow menu? EG instead of displaying ellipsis or the text ‘more’ can i display something else?

    Comment by George — 03/03/2016 @ 10:24

  10. regarding: Change the startup page embedding MainView.xaml in a Navigation Page (this step is required in order to have menus available on Android platform)

    how to handle this in case where startup page is “app.xaml” and not “app.cs” ?

    Comment by Rick — 06/07/2016 @ 23:55

  11. I have strange bug. when I am running app on android emulator, I can see tootlbaritems (set to secondary).but can not see on phone. but working fine o ios phone.
    Any idea, what’s going wrong?

    Comment by ak — 21/07/2016 @ 01:43

  12. Hi! Thanks for publishing this. It really helped me a lot.

    Comment by Joseph — 19/08/2016 @ 15:35

  13. This blog was… how do you say it? Relevant!!
    Finally I have found something which helped me. Appreciate
    it!

    Comment by Gilberto — 20/08/2016 @ 11:14

  14. Very nice post. Can you explain how to change the icon on toolbar. (the android image in your screen shot post)

    Comment by Bala — 28/11/2016 @ 14:25

  15. Good day very cool blog!! Man .. Beautiful .. Amazing ..
    I will bookmark your website and take the feeds also?

    I am satisfied to find so many helpful information right here within the publish, we need develop extra
    techniques in this regard, thanks for sharing.

    . . . . .

    Comment by Wiktor Pacocha — 26/02/2017 @ 18:56

  16. I blog quite often and I genuinely appreciate your content.
    This article has really peaked my interest.
    I will bookmark your blog and keep checking for new details about once a week.
    I subscribed to your Feed too.

    Comment by law — 22/04/2017 @ 11:08

RSS feed for comments on this post. TrackBack URL

Leave a Response