ToolbarItems do not look right in iOS

Question

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:

But at iPhone, it is quite different:

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?

Leo Zhu · Accepted Answer · 2020-01-08T02:56:51.803

3

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 :

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

1) the first page has the toolbar items:

2) all pages have the toolbar items:

edited Jan 08 '20 at 02:56

answered Jan 06 '20 at 02:47

Leo Zhu

15,726
1
7
23

Thank you for your answer. I am trying to apply this solution, but have a question. I see in the example's shared project CustomToolbarContentPage derived from IAddToolbarItem. It is not clear to me how I can apply it to my application. I do not want that custom renderer to affect my Android and UWP projects, only iOS. Could you please help? – David Shochet Jan 06 '20 at 18:21
1

@DavidShochet you just need to copy the `IAddToolbarItem` and `CustomToolbarContentPage` file to your share project,and the `RightToolbarMenuCustomRenderer` and `TableSource` to your ios project,the custom renderer only works when you run in ios. – Leo Zhu Jan 07 '20 at 03:03
But I see CustomToolbarContentPage not just exists in the shared project, but used in MainPage.xaml thereof. That is why I asked how I can apply it to my app. Or it is not necessary? – David Shochet Jan 07 '20 at 13:53
1

you should let your page extends CustomToolbarContentPage like the MainPage in the sample – Leo Zhu Jan 07 '20 at 13:56
Thank you again! The only question left so far is about the ToolbarItems. Currently, I use it as a property of the Page class, but the example has it on the MainPage: . Currently, I set the toolbar items in my base PageModel, so it is done once for all pages. How can I deal with it now? – David Shochet Jan 07 '20 at 14:27
all your pages need the toolbar items ？Usually，it only display in the first page of the navigation stack，if you need it in all pages，you may create a basepage with the toolbar items – Leo Zhu Jan 07 '20 at 14:41
Can it be the CustomToolbarContentPage, which is already a base page? And again, if I add the toolbar items there, it will not be accessible through the page model, right? – David Shochet Jan 07 '20 at 14:58
And I see that the in the MainPage is just a property of Page. So why do I need to add another property of the same type to the base page or to any page, if any page has it by default? – David Shochet Jan 07 '20 at 15:03
I tried this without , and it did not help with iOS issue. But then I realized that I do have already ContentPresenter in a ControlTemplate in App.xaml. Does it mean that I should remove that ContentPresenter from CustomToolbarContentPage.xaml? – David Shochet Jan 07 '20 at 19:22
1

@DavidShochet if you want all pages have the same toolbar items,you could let the pages extends the MainPage which in the sample (it has already extends the CustomToolbarContentPage and it will be a basepage),if you only need the first page has the toolbar items ,you just need let your first page extends the CustomToolbarContentPage like the MainPage.the effect above – Leo Zhu Jan 08 '20 at 02:57
Thanks. I do need the menu in all the pages. What about the existing ContentPresenter in my ControlTemplate? Isn't it possible to use somehow ControlTemplate instead of that MainPage? – David Shochet Jan 08 '20 at 12:51
@DavidShochet i think it could not ,usually ControlTemplate is used for adding a header and footer and then let the individual pages define the content,it could not instead of a page directly – Leo Zhu Jan 09 '20 at 01:26
Then how can I resolve between two ContentPresenters? As I have one in ControlTemplate to represent the content of each individual page. – David Shochet Jan 09 '20 at 13:15
Can I remove the whole CustomToolbarContentPage.xaml (as it has nothing but ContentPresenter which I already have in the ControlTemplate), and leave only CustomToolbarContentPage.xaml.cs? – David Shochet Jan 09 '20 at 14:49
i think you could use the ControlTemplate which defined in the app.xaml as usually,and you don't need to delete the CustomToolbarContentPage,it doesn't affect the ControlTemplate in your app.xaml – Leo Zhu Jan 10 '20 at 01:47
"Don't need" or "should not"? I took it as optional, and left only the .cs file, and tried... And nothing changed... If I had to have the CustomToolbarContentPage.xaml with the presenter, how would two presenters work with each other? – David Shochet Jan 10 '20 at 13:56
@DavidShochet i mean you could keep it ,and also delete it. – Leo Zhu Jan 13 '20 at 01:33
OK, I finally can debug remotely, so I found some bugs in my code. Yet it does not work correctly, as I use FreshMvvm, and this way the page is created and ToolbarItems added BEFORE the custom renderer's OnElementChanged() is called. Is there a way to use this solution with FreshMvvm? Thank you very much for your help. – David Shochet Jan 14 '20 at 21:07
@DavidShochet could you share a simple sample ? – Leo Zhu Jan 15 '20 at 02:05
OK, I found another bug, so now, if I add menu items like you do, the menu looks correct. But if I add the menu items through the page model (as you can see on the code I provided in my question), the menu looks wrong as before. Any idea? And thank you again. – David Shochet Jan 17 '20 at 18:13
i didn't try to test it with FrsshMvvm,i just test it In ordinary projects and it works – Leo Zhu Jan 21 '20 at 09:52
This solution works perfectly for me. But by now, the toolbar menu grew longer, and some of its elements do not fit the iPhone's screen. I can slide the menu and see all the elements, but as soon as I release the screen, the view jumps back up, and while it is held by a finger, the elements are not clickable. How can this be solved? Can the menu made to wrap, or something else? On Android, the menu stays where I scroll and I can click every item. Can it made stay where scrolled on iOS, too? – David Shochet Apr 22 '20 at 19:19

ToolbarItems do not look right in iOS

1 Answers1

Linked