Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NavigationView: settings button not using fluent #942

Closed
vgromfeld opened this issue Jun 25, 2019 · 11 comments · Fixed by #1236
Closed

NavigationView: settings button not using fluent #942

vgromfeld opened this issue Jun 25, 2019 · 11 comments · Fixed by #1236
Assignees
Labels
area-NavigationView NavView control bug Something isn't working team-Controls Issue for the Controls team

Comments

@vgromfeld
Copy link

vgromfeld commented Jun 25, 2019

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
@YuliKl
Copy link

YuliKl commented Jun 25, 2019

@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?

@jevansaks
Copy link
Member

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

@jevansaks jevansaks added area-NavigationView NavView control spec issue Issue with the feature specification labels Jun 26, 2019
@Noemata
Copy link

Noemata commented Jun 27, 2019

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.

@Felix-Dev
Copy link
Contributor

Felix-Dev commented Jun 27, 2019

@Noemata See #591.

@marcelwgn
Copy link
Collaborator

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?

@mdtauk
Copy link
Contributor

mdtauk commented Aug 28, 2019

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)

@marcelwgn
Copy link
Collaborator

@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 ^^

@jevansaks
Copy link
Member

@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 jevansaks added bug Something isn't working and removed spec issue Issue with the feature specification labels Aug 28, 2019
@marcelwgn
Copy link
Collaborator

@jevansaks Thank you for the clarification!

marcelwgn added a commit to marcelwgn/microsoft-ui-xaml that referenced this issue Aug 29, 2019
kaiguo pushed a commit to marcelwgn/microsoft-ui-xaml that referenced this issue Aug 31, 2019
msft-github-bot pushed a commit that referenced this issue Aug 31, 2019
 #942 (#1236)

* Add reveal style to Settings button in NavigationView in top mode,Closes #942

* Remove unnecessary contract check

* Add missing reveal state setters
@msft-github-bot
Copy link
Collaborator

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

Handy links:

jevansaks pushed a commit that referenced this issue Sep 12, 2019
 #942 (#1236)

* Add reveal style to Settings button in NavigationView in top mode,Closes #942

* Remove unnecessary contract check

* Add missing reveal state setters
@msft-github-bot
Copy link
Collaborator

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

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-NavigationView NavView control bug Something isn't working team-Controls Issue for the Controls team
Projects
None yet
9 participants