Microsoft-ui-xaml: NavigationView: settings button not using fluent

Created on 25 Jun 2019  路  11Comments  路  Source: microsoft/microsoft-ui-xaml

Describe the bug
The settings and the back buttons from NavigationView are not using the default fluent effects as the other buttons (background reveal, lights...) that we can add to the PaneFooter/PaneHeader. This is breaking the visual experience if we add some items in the pane footer/header.

Steps to reproduce the bug

  1. Create a new app with the following code snippet
<mux:NavigationView IsBackEnabled="True" PaneDisplayMode="Top">
    <mux:NavigationView.MenuItems>
        <mux:NavigationViewItem Content="Item A" />
        <mux:NavigationViewItem Content="Item B" />
    </mux:NavigationView.MenuItems>
    <mux:NavigationView.PaneFooter>
        <mux:NavigationViewItem Icon="People" />
    </mux:NavigationView.PaneFooter>
</mux:NavigationView>
  1. Run the application and move the mouse over the people and the settings buttons.
  2. Notice that the people button is well highlighted using reveal and lights
  3. Notice that the settings or back buttons do not have any fluent effects.

Expected behavior
Settings and back buttons have the same rendering as the PaneFooter buttons using the fluent effects.
For consistency, we should see the same effect in all the buttons.

Screenshots
Footer NavigationViewItem with mouse hover
image

Settings button with mouse hover
image

Back button with mouse hover
image

Version Info
NuGet package version:
Microsoft.UI.Xaml 2.1.190606001
Microsoft.UI.Xaml 2.2.190611001-prerelease


| Windows 10 version | Saw the problem? |
| :--------------------------------- | :-------------------- |
| Insider Build (xxxxx) | |
| May 2019 Update (18362) | Yes |
| October 2018 Update (17763) | |
| April 2018 Update (17134) | |
| Fall Creators Update (16299) | |
| Creators Update (15063) | |
| Anniversary Update (14393) | |

| Device form factor | Saw the problem? |
| :-------------------- | :------------------- |
| Desktop | Yes |
| Mobile | |
| Xbox | |
| Surface Hub | |
| IoT | |

area-NavigationView bug team-Controls

Most helpful comment

All 11 comments

@kikisaints, I remember that the lack of reveal highlight on the back and settings buttons was a deliberate design decision. Should we keep that design or re-evaluate? @chigy, what's your take on this design?

Based on the guidelines for reveal, I'm pretty sure it should have reveal in top nav. @kikisaints, what about in left nav?

I'm curious why the Setup button appears to lag in positioning when a window is being resized. Aesthetically, I would expect to see it locked in position like all the other buttons. It's not a good look as is.

Is this something one can work on? Or is there still discussion whether the back and the settings button should have the reveal affect applied?

I would like to know the rationale for why the Navigation Items, but not the buttons, should have Reveal?

It seems like a mis-step, like with the removal of Acrylic on the NavigationView pane, and the move away from extending into the TitleBar (made sense when Sets was coming, but now its gone, the guidance should change back)

@mdtauk I agree that this is sort of incosistent behaviour.
However I do not think that the removal of the acrylic for the navigation view pane was a mis-step, since I personally actually find the acrylic a bit distracting for the navigation. But I guess that's just my taste ^^

@chingucoding I think it was an oversight and so I would accept a contribution for this change. The settings button has reveal in left-mode and I think it's just a bug that it doesn't in top mode.

@jevansaks Thank you for the clarification!

:tada:This issue was addressed in #1236, which has now been successfully released as Microsoft.UI.Xaml v2.3.190909001-prerelease.:tada:

Handy links:

:tada:This issue was addressed in #1236, which has now been successfully released as Microsoft.UI.Xaml v2.2.190917002.:tada:

Handy links:

Was this page helpful?
0 / 5 - 0 ratings