microsoft / microsoft-ui-xaml

Windows UI Library: the latest Windows 10 native controls and Fluent styles for your applications
MIT License
6.28k stars 675 forks source link

Proposal: Add an inset facing shadow to NavigationView in expanded mode #1291

Closed carmellolb closed 3 years ago

carmellolb commented 5 years ago

Proposal: Add an inset facing shadow to NavigationView in expanded mode and an outset shadow to small and opened mode

Summary

Add an inset shadow when NavigationView is in expanded mode and an outset shadow when in small and opened mode.

Rationale

Adding an inset shadow to expanded NavigationView would add more visual hierarchy by implying that the content on the right is the focus. When in small and opened mode, an outset shadow should be used because it is transient and the user initiated the opening of it, so it is the focus.

jevansaks commented 5 years ago

In transient mode where the navigation pane slides out, we do have a shadow when running on Windows 1903 and up. I don't see it in XAML Controls Gallery though, that may be a bug.

For the other suggestion of having the content cast a shadow onto the navigationview pane, that's an interesting idea.

mdtauk commented 5 years ago

blade-view-ideas-v2 master-detail-view

These are some changes I proposed in the Community Toolkit a while back, to try to bring a consistent approach to Layering with Acrylic Panes.

carmellolb commented 4 years ago

In transient mode where the navigation pane slides out, we do have a shadow when running on Windows 1903 and up. I don't see it in XAML Controls Gallery though, that may be a bug.

For the other suggestion of having the content cast a shadow onto the navigationview pane, that's an interesting idea.

@jevansaks Sorry for the late reply. Yes and it would provide visual hierarchy by giving the impression that the pane on the right (the main content) was in front. Is it possible? And yes I was not referring to the shadow when it slides out, that is an outset shadow, that should stay the way it is. I mean the second thing you said.

YuliKl commented 4 years ago

@carmellolb, to double-check, are you thinking something like this? (focusing on the specific portion of @mdtauk's comp that I think illutrates your request)

image

mdtauk commented 4 years ago

@carmellolb, to double-check, are you thinking something like this? (focusing on the specific portion of @mdtauk's comp that I think illutrates your request)

image

That is what I understood the request to mean. Even without Acrylic, it would visually enhance the SplitView/NavigationView controls.

The Pane in Overlay mode, would be the one casting the shadow, not receiving it.

And extending into the Titlebar would be the icing on the cake :)

carmellolb commented 4 years ago

@carmellolb, to double-check, are you thinking something like this? (focusing on the specific portion of @mdtauk's comp that I think illutrates your request)

image

@mdtauk @YuliKl It sure is! I’m glad you like the idea! Yes I think it would really enhance the design. I hope this can be done sometime.

carmellolb commented 4 years ago

blade-view-ideas-v2 master-detail-view

These are some changes I proposed in the Community Toolkit a while back, to try to bring a consistent approach to Layering with Acrylic Panes.

Yes so there are plans to add what I am saying?

mdtauk commented 4 years ago

@carmellolb Those are mock-ups I submitted to the Community Toolkit when they were building their BladeView, NavigationView and Master/Detail controls.

But they show the idea of the use of the inset shadows

carmellolb commented 4 years ago

@carmellolb Those are mock-ups I submitted to the Community Toolkit when they were building their BladeView, NavigationView and Master/Detail controls.

But they show the idea of the use of the inset shadows

Yes, the mock-ups look like what I am suggesting.

YuliKl commented 4 years ago

@carmellolb, you've really made two related proposals.

  1. Add an inset facing shadow to NavigationView in expanded mode
  2. Add an outset shadow to small and opened mode

The second part is already done...although something has regressed and I've opened #1394 to restore the shadow. The first part is a great suggestion that we won't add right now but will definitely keep in mind as Fluent color and elevation story continues to get defined.

I'm going to update the title to more accurate reflect the remaining work and will remove myself as the issue assignee. I'll post updates as I hear more about the design direction for the whole system and decisions about elevation/shadow.

YuliKl commented 3 years ago

Looking at my last comment it seems that #2254 covers 1, and 2 is already implemented. Therefore, I don't think we need this issue to remain active and I'm closing it.