Left app pane background Acrylic not working

[carmellolb]

When app is expanded, the left panes are supposed to have background Acrylic, except they are all just grey. Please fix.

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: c9faf87c-bd56-99da-70ed-07c68f9118a5
• Version Independent ID: 713b5c24-d710-303f-620e-9c7735797907
• Content: Acrylic material - Windows UWP applications
• Content Source: windows-apps-src/design/style/acrylic.md
• Product: uwp
• Technology: design
• GitHub Login: @mijacobs
• Microsoft Alias: mijacobs

[jevansaks]

This was an intentional change, always-expanded NavigationView no longer uses acrylic. That is reserved for "transient" UI, so only the compact/minimal pane flyout will use acrylic.

[carmellolb]

Why? Why do you add beauty and then remove it? It looked nice and was nice how it switched between background and in app Acrylic. Why did you remove it?

[YuliKl]

@carmellolb – thank you for taking the time to provide feedback. Although I agree that NavigationView’s pane with background acrylic looked beautiful, we strive to implement the default styles of XAML controls with more than just aesthetics in mind. The goal of the Fluent Design System is to provide thoughtful, coherent guidelines applicable to all of Microsoft’s controls libraries. We want to ensure that acrylic, when applied within the Fluent framework, is used purposefully and intentionally. As Fluent continued to evolve, we came to the realization that, thanks to its translucent qualities, acrylic’s most effective usage is in providing a visual bridge between layers of app UI. When NavigationView’s pane is placed side-by-side with the app content, this visual bridge is unnecessary and is in fact distracting because the acrylic invites unrelated content to shine through. To uphold the Fluent principles and ensure that the design system’s guidance about acrylic remained coherent for all app developers, we felt it was necessary to remove the background acrylic from NavigationView’s expanded pane and avoid implementing a style contradictory to acrylic best practices.

[carmellolb]

@YuliKl I understand what you are saying, but I think that aesthetics should also be important, and rather they seem to be being put aside and neglected, and therefore the apps’ designs are now looking more on the not so nice side. I understand what you are saying, but in my opinion, and in a a lot of other people’s opinions, it wasn’t, and it actually provided context, and showed that the menu had important controls. The plain gray rather lacks that importance, and has a very unappealing look that defies the beauty that you guys seemed to be striving for with Fluent Design, and the early concepts. I just hope you will reconsider, as the Acrylic on those panels was a pretty important component of Fluent Design for me, and many others.

[Felix-Dev]

@carmellolb @YuliKl

Unfortunately, I think MS was put off by cases like this:

where the colorful acrylic background could indeed unwantingly steel away attention from both the navigation pane content and other app content.
I do agree with @carmellolb though, the current uniform grey background really doesn't look visually appealing at all, especially if you consider these two examples:

With Acrylic background:

Especially in this case the point of "the acrylic invites unrelated content to shine through [and thus becomes distracting]" doesn't apply for me because the background - thanks to the colors - really is just subtle. It looks good (way better than just plain gray) and isn't distracting at all.

Following below is my overall thought about the Fluent Design/Win 10 Design Language:

Overall, I wish the Fluent Design team would establish a straight back-and-forth dialogue with the target platform users and don't just come and decide stuff we the users can't really avoid in the end (or just with additional work). Best example would be the recent rounded-corners push (apparently making rounded corners the new standard). Why not make that thought process open-source on github too? Instead, we just got MS seemingly pushing through without giving its users much of a chance to respond to such massive UI changes.
A good example for how I'd envision such a conversation can actually be found in this repo: microsoft/microsoft-ui-xaml#242 A MS employee proposed a design idea and instead of just implementing it and gather user input after release, users had the chance to give ideas and state their objections which ultimately put the original design idea on hold (and give the OP a chance to refine the proposal based on that feedback.)

Instead, what we get are official MS controls (this very issue case) and even official MS Win10 apps (Settings) using acrylic background when suddenly that design is declared deprecated with little to no notice. What's next? Someone at MS pushing the switch 6 months later telling us acrylic background is the deal again?

Fluent Design needs to be developed by MS with the community together, not behind some closed-doors only someone at Microsoft is allowed to open. Why not create a github repository for the Fluent Design system? Why not give users a chance to communicate directly with the Design Team? Why not give the user the chance to influence the Fluent Design system?

[YuliKl]

Best example would be the recent rounded-corners push (apparently making rounded corners the new standard). Why not make that thought process open-source on github too?

microsoft/microsoft-ui-xaml#524

---

Why not give users a chance to communicate directly with the Design Team?

https://www.microsoft.com/design/fluent/#/
That conversation is primarily taking place on LinkedIn: https://www.linkedin.com/groups/13529340/

[Felix-Dev]

@YuliKl @chigy I saw that proposal but I'm under the impression the Fluet Design (FD) team already decided to went ahead with their plans anyway. My point was about bringing the user into the discussion of design changes before the general direction is decided, and not once it is finalized. Correct me if I'm wrong, but am I correct in assumig the FD team (and now the WinUI team) is already busy implementing rounded corners as the standard look for the WinUI controls?

As for that LinkedIn link: MS has designated github as their go-to platform for feedback these days. Take the Calculator and Terminal apps for example. User feedback on them is gathered on Github, not on linkedin or somewhere else. So if a user has a suggestion about UI for those apps, he will use Github. Those apps however are part of Windows 10 and need to follow guidelines the FD team has been setting up. So, if that user suggestion touches those guidelines, the communication basically dies on github, because the app team cannot work on that suggestion and the FD team cannot be found on Github.
Instead, the discussion takes place somewhere entirely else - on LinkedIn, far from the place where users engage with the MS teams working on Win10 apps.

That's just not good in my opinion.

Another example: You, @YuliKl said in this issue that this repo is the place to use for raising issues. Then you say the FD conversation is taking place on LinkedIn and you say "We'll work with the Fluent design team". So basically you are acting like a middle-man who relays our suggestions to the actual design team.
What is keeping you guys from bringing the FD team to open a github repository and start the conversation there? Your interested audience already is here on github and especially in this very repository so we could finally have a direct communication with the team.

[dphfox]

Why get rid of the effect altogether? Why not just introduce a less transparent version of Acrylic for use in supporting UI instead that's less distracting without looking, for lack of better terms, crude and unfinished? That way, you can satisfy both camps; it keeps the UI looking great while improving content legibility. Flat out removing the effect is just throwing the baby out with the bath water.

People lobbied for acrylic effects hard because they don't like the block-colour look. I anticipate some very strongly worded protests if this regression gets applied to more common apps like Settings 😕

[carmellolb]

Why get rid of the effect altogether? Why not just introduce a less transparent version of Acrylic for use in supporting UI instead that's less distracting without looking, for lack of better terms, crude and unfinished? That way, you can satisfy both camps; it keeps the UI looking great while improving content legibility. Flat out removing the effect is just throwing the baby out with the bath water.

People lobbied for acrylic effects hard because they don't like the block-colour look. I anticipate some very strongly worded protests if this regression gets applied to more common apps like Settings 😕

Yes, I completely agree. Microsoft just doesn’t seem to carefully about users’ opinions and instead is taking the all or nothing approach and is reverting the design back to pre-Fluent. It is a shame. I hope they reconsider and readd BG Acrylic just in a less transparent form.

[carmellolb]

Any news on this issue? I’m still opening apps like Feedback Hub and Your Phone almost daily, every time hoping that I’ll see BG acrylic on the sidebar. Yet it never comes. Is there any sort of progress going on with this issue? @YuliKl @chigy

[YuliKl]

Thank you for the ping. I added a comment to microsoft/microsoft-ui-xaml#947 about a proposed color change.

[mdtauk]

Rather than remove Acrylic altogether, why not implement a less Transparent opacity version by default?

[musicstashall]

Tell me, is there a way to apply acrylic blur to an existing window? Just as the old DwmEnableBlurBehindWindow function worked. Or, for example, apply (or extend) acrylic to the entire windows settings window?

[mdtauk]

You can use an Acrylic Brush resource as a Background colour.

[musicstashall]

Show an example please and screen of this window

[mdtauk]

When you are developing your own apps, you can use the brush resource for the page background
ThemeResource SystemControlAcrylicWindowBrush

[musicstashall]

This is not what I asked. I want to apply the blur to the already created UWP windows. For example, apply blur to the Settings Window

[musicstashall]

Someone, people, which of you can make this window completely transparent ?? How is this even possible or impossible? What is required for this?

[mdtauk]

This is not what I asked. I want to apply the blur to the already created UWP windows. For example, apply blur to the Settings Window

You can't.

It is for the app developer to decide how their apps look. Modifying an existing app would be a security risk, and would break the app.

[musicstashall]

We could use the DwmEnableBlurBehindWindow function before, it was safe and did not cause breakdowns. I would like to get an alternative to this feature today. The question was precisely this - is it possible ?? Is it possible to implement this without interfering with applications?