iosiphonexamarin.formsfreshmvvmtoolbaritems

ToolbarItems do not look right in iOS


I have a Xamarin.Forms app with FreshMvvm, and am trying to use secondary ToolbarItems. Here is a part of my PageModel code:

  public override void Init(object initData)
  {
      CurrentPage.ToolbarItems.Add(new ToolbarItem() { Text = "About LATICRETE", Command = AboutCommand, Priority = 0, Order = ToolbarItemOrder.Secondary });
      CurrentPage.ToolbarItems.Add(new ToolbarItem() { Text = "Call LATICRETE", Command = CallCommand, Priority = 0, Order = ToolbarItemOrder.Secondary });
      CurrentPage.ToolbarItems.Add(new ToolbarItem() { Text = "Email Technical Support", Command = EmailTechSupportCommand, Priority = 0, Order = ToolbarItemOrder.Secondary });
      CurrentPage.ToolbarItems.Add(new ToolbarItem() { Text = "Visit LATICRETE Website", Command = VisitWebsiteCommand, Priority = 0, Order = ToolbarItemOrder.Secondary });

For Android, after pressing the hamburger button, the menu looks like I expect:

enter image description here

But at iPhone, it is quite different:

enter image description here

As you can see, there is no hamburger button, and all the ToolbarItems are placed horizontally next to each other, and as they do not fit withing the width of the screen, they overlap. I realize that this is the normal behavior for iOS, and yet it is not acceptable for me. Is there any way to fix it?


Solution

  • On iOS, the Secondary items menu appears below the navigation bar as a horizontal list.

    if you want to acheve the effect like in Android,you could create a custom PageRenderer.

    here is a sample,you could refer to it iOSSecondaryToolbarMenubar

    the effect in Android :

    enter image description here

    the effect in ios (you could change the icon in your renderer):

    1) the first page has the toolbar items: enter image description here

    2) all pages have the toolbar items:

    enter image description here