Navigation Menu Display Issue

[jeromelaban]

From @InfographieCarrera in #19548:

We’re experiencing a problem where our navigation menu behaves differently in Figma preview versus when the developer runs the project in their IDE.

• Expected Behavior: The menu displays correctly when previewed in Figma (see Screenshot 1).
• Actual Behavior: When running the project in an IDE, the menu has display issues and does not render correctly (see Screenshot 2).

We are unsure whether this issue stems from the Figma design, the XAML implementation, or something else entirely. To help with debugging, our developer has created a demo repository:

➡️ GitHub Repository: UnoAppDemo

Any insights into what might be causing this discrepancy would be greatly appreciated!

[kazo0]

Hello @InfographieCarrera !

This is indeed a result of the exported XAML from the Figma Plugin being slightly different than the XAML that is used to display the page in the Figma Plugin Previewer.

By default, the NavigationBar assumes a value of Back for its MainCommandMode property. Meaning it will only display the MainCommand as Visible when the Page's Frame is able to navigate backward in the stack. See: NavigationBar Docs re: MainCommandMode

The only change you should need to make in your XAML, using the UnoAppDemo code as an example, is to add MainCommandMode="Action" to your NavigationBar here: https://github.com/fburel/UnoAppDemo/blob/3af058552325510a084e3a981cdc79b349c3092d/UnoApp1/Pages/Control/HomeControlPage.xaml#L10

[kazo0]

Also, I noticed that the generated XAML from the Figma Plugin has used a PathIcon for the AppBarButton.Icon in your MainCommand. There is currently a limitation on Android (if this is one of the platforms you are targeting) that limits the usage of AppBarButton.Icon to only work with BitmapIcon, specifically for the MainCommand property. Other AppBarButton usages, such as within the NavigationBar.PrimaryCommands, can continue to use any Icon type.

As a quick example of that type of usage, you can take a look at some of our sample reference apps. Such as ToDo, where we are using a BitmapIcon for the MainCommand here: https://github.com/unoplatform/Uno.Samples/blob/be7d580845bedd7d5963b32b3febd20d0671cde5/reference/ToDo/src/ToDo/Views/Dialogs/SettingsFlyout.xaml#L23-L29

If you would rather keep the PathIcon for most platforms and only use a BitmapIcon specifically for Android, you can use the XAML platform conditional prefixes to define a <android:BitmapIcon ... /> and a <not_android:PathIcon ... />