Secondary Order ToolbarItems not displayed correctly on iOS

See original GitHub issue

Description

On iOS, ToolbarItems that have their Order="Secondary" are not displayed in the secondary level menu bar. Instead, they appear in line with the Primary items.

I have the following XAML setup:

<ContentPage.ToolbarItems>
  <ToolbarItem Command="{Binding SetLowBrightnessCommand}">
    <ToolbarItem.IconImageSource>
      <FontImageSource
        FontFamily="MaterialIconsOutlined-Regular"
        Glyph="&#xe51c;"
        Color="LightBlue"
        Size="20"/>
    </ToolbarItem.IconImageSource>
  </ToolbarItem>
  <ToolbarItem Command="{Binding SetHighBrightnessCommand}">
    <ToolbarItem.IconImageSource>
      <FontImageSource
        FontFamily="MaterialIconsOutlined-Regular"
        Glyph="&#xe518;"
        Color="LightPink"
        Size="32"/>
    </ToolbarItem.IconImageSource>
  </ToolbarItem>
  <ToolbarItem
    Order="Secondary"
    Text="Item 3" />
  <ToolbarItem
    Order="Secondary"
    Text="Item 4" />
</ContentPage.ToolbarItems>

On iOS the secondary items (Item 3, Item 4) are incorrectly displayed in the same level as the icons, which shouldn’t be the case:

On Android it works as expected:

Steps to Reproduce

  1. Create new MAUI project
  2. On MainPage, set <ContentPage.ToolbarItems>
  3. Add some instances of ToolbarItem with default setting or Order="Primary"
  4. Add one or more instances of ToolbarItem with Order="Secondary"
  5. Observe the incorrect behavior on iOS

Link to public reproduction project repository

https://github.com/ewerspej/maui-samples/

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16 (and possibly earlier versions)

Did you find any workaround?

No

Relevant log output

n/a

Issue Analytics

  • State:open
  • Created 5 months ago
  • Reactions:1
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
ewerspejcommented, Jun 28, 2023

Verified this on Visual Studio Enterprise 17.7.0 Preview 2.0. Repro on iOS 16.4 with below Project: https://github.com/ewerspej/maui-samples/

Yes, it should still be reproducible there. However, note that I’ve recently added Shane’s Workarounds NuGet package, which fixes a couple of things temporarily. The issue described here is not affected by that, though.

1reaction
ewerspejcommented, Jun 26, 2023

@thatkidyousaw1 No, I am not aware of a working workaround. However, I have also not invested much time into finding one, because this needs to work out-of-the-box. It’s clearly broken and I am categorically against workarounds for fundamental things. Workarounds for smaller bugs and issues are fine, but this is a showstopper for this feature and renders it utterly useless.

Read more comments on GitHub >

github_iconTop Results From Across the Web

ToolbarItems do not look right in iOS
1 Answer. On iOS, the Secondary items menu appears below the navigation bar as a horizontal list. if you want to acheve the...
Read more >
Display toolbar items - .NET MAUI
Order, of type ToolbarItemOrder, determines whether the ToolbarItem object displays in the primary or secondary menu.
Read more >
toolbar modifier positions button…
If the ToolbarItem wraps the button, they can be position in their expected positions and remain in place despite tapping either button. Now,...
Read more >
Creating a Secondary (bottom) iOS Toolbar in Xamarin ...
I recently spent a couple of days trying to coax this feature into working properly before finally finding a solution (many other folks...
Read more >
Working with Toolbar in SwiftUI
To show the system activity view in order to share the image. ... first one having a higher priority, so the second simply...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found