[Fluent] The buttons in `NavigationBar` are very different

[MartinZikmund]

Current behavior

The buttons in NavigationBar have quite different design - back button has sharp corners and aligns with window edges, three dots button has margin and rounded corners

Expected behavior

How to reproduce it (as minimally and precisely as possible)

Environment

Nuget Package:

Package Version(s):

Affected platform(s):

• [ ] iOS
• [ ] Android
• [ ] WebAssembly
• [ ] WebAssembly renders for Xamarin.Forms
• [ ] Windows
• [ ] Build tasks

Visual Studio:

• [ ] 2017 (version: )
• [ ] 2019 (version: )
• [ ] for Mac (version: )

Relevant plugins:

• [ ] Resharper (version: )

Anything else we need to know?

[nickrandolph]

@MartinZikmund which browser is this on and can you provide the XAML for the navigationbar that you're using. I just tried this on Chrome/Edge and am seeing square layout

[MartinZikmund]

@nickrandolph think this is again quite likely because do the Fluent vs. Material template. That being said, I think the rounded version would mat h both themes better than sharp 🤔

[nickrandolph]

@kazo0 reassigning this to toolkit as it's related to the broken fluent styles but perhaps it should be in the themes repo?

[kazo0]

NavigationBar bar styles live in Toolkit so this is the right repo

[agneszitte]

@MartinZikmund, @Arieldelossantos did some tests yesterday and could not reproduce the issue. Are you still able to reproduce on your side? Can you share more details for @Arieldelossantos please (Proper repro steps or a sample project)? Thank you in advance!

[MartinZikmund]

@Arieldelossantos I just created a new Uno app with the Default template but switched from Material to Fluent in the wizard in the Theme section. It seems to reproduce even with the latest bits:

I run the app, for example on Windows and click the Go to Second Page button. The top right button clearly has margin and rounded corners when hovered:

The top left button has no margin and sharp corners when hovered: