Microsoft-ui-xaml: Proposal: Consistent Acrylic

[AathifMahir]

Love to see Acrylic applying across all the apps instead of selected apps that uses acrylic theme Resource,

Example:
Whenever user enables acrylic or transparency effect on Windows like below image, All the apps should follow a kind of acrylic enabled UI and UX even though app developer uses non-acrylic brush for background layer of the app.

Even though all the apps following acrylic with non-acrylic theme brush for background, Developers should have option to provide users to disable acrylic for selected apps in Settings Page of the app. That means developer needs provide a toggle in all their apps settings page to enable and disable acrylic.

Add-on to this proposals - #3478

Proposal: [Acrylic Across All the apps]

Summary

Acrylic across all apps with options to disable for selected apps.

Rationale

• This makes all the apps consistent between each other
• Users has the flexibility to disable acrylic for selected apps they like
• Windows 10 been rated as non-consistent OS for while now, Making this changes to background layer would improve design across the board

Scope

| Capability | Priority |
| :---------- | :------- |
| Allows Developers to be consistent on background layer across the ecosystem | Must |
| Reduce the in-consistent apps in Windows Ecosystem | Should |
| Users would get the taste of Modern Windows Apps with Consistent Background Layer | Could |

Important Notes

Open Questions

[Poopooracoocoo]

Also see: #2236 #761

but to me the more pressing issue is that shadows are bundled with that transparency effects options. it's terrible but the WinUI team just said that it's not their problem to go the FBH. You cannot get a consistent experience.

It doesn't help that acrylic feels like a hacky implementation when you look at when the start menu or action centre opens, or at the taskbar when you're switching virtual desktops.

[mdtauk]

Acrylic 2.0 when WinUI 3.0 is done, should get a serious look at.

• Desktop PCs with AC Power and decent graphics cards - should have an option to use Acrylic for Active and Inactive Apps;

• The next level down should use it for Active Apps only - either a user choice, or based on hardware specs.

• Then there should be a Fauxcrylic which only shows through the desktop wallpaper with the Blurs, Saturation Boosts, Luminance and Noise elements; Tablets and Full Screen windowing would benefit from this.

• Finally there is the fallback colour.

This would provide a consistent behaviour, that is predictable and aware enough to handle various form factors. As the Windows Design teams are trying to bring about familiarity between Windows and other platforms - Apple's use of their Vibrancy surfaces and materials - should be the Acrylic equivalent. Apple does not restrict it to foreground apps, and use it in key, typical areas of the UI.

The fact that some apps use an Acrylic sidebar, and others don't is inconsistent.
AcyrlicBrushes are a powerful tool, you can customise the effect - but this means some app's Acrylic will not match others. So perhaps a move to standard default Acrylics would both make it easier for an app to use, and also prevent a "free for all"

[Jaiganeshkumaran]

Microsoft has started to use more web stuff which can't implement background desktop acrylic so this should not be done for a consistent experience with web-based stuff. From Microsoft: XAML controls are inconsistent with how web and mobile apps are evolving. Obviously web and mobile don't have background acrylic so WinUI shouldn't have it as well since their new policy is to copy mobile and web platforms.

[mdtauk]

Microsoft has started to use more web stuff which can't implement background desktop acrylic so this should not be done for a consistent experience with web-based stuff. From Microsoft: XAML controls are inconsistent with how web and mobile apps are evolving. Obviously web and mobile don't have background acrylic so WinUI shouldn't have it as well since their new policy is to copy mobile and web platforms.

Most of Acrylic is possible with CSS https://stackoverflow.com/questions/44522299/css-only-acrylic-material-from-fluent-design-system

However access to the image behind the Window is the thing Microsoft says they need more time to lift out of the OS and into WinUI 3.X

[Jaiganeshkumaran]

@mdtauk In-app acrylic will be there in WinUI 3 as well and can be implemented via CSS. However, I'm talking about desktop background acrylic which will require more time for WinUI 3 and for the web it's not that easy since the browser will not allow access. I wish Fluent UI does acrylic for in-page elements like collapsed navigation view and flyout menus. Even reveal effects can be implemented in Fluent UI but Microsoft doesn't want it.

[mdtauk]

@mdtauk In-app acrylic will be there in WinUI 3 as well and can be implemented via CSS. However, I'm talking about desktop background acrylic which will require more time for WinUI 3 and for the web it's not that easy since the browser will not allow access. I wish Fluent UI does acrylic for in-page elements like collapsed navigation view and flyout menus. Even reveal effects can be implemented in Fluent UI but Microsoft doesn't want it.

The browser doesn't have to provide it generally. They could support it with a WebView within a WinUI app, like the Microsoft Store - or create a special window type for Edge to use with PWAs. React Native apps can already use Acrylic Brushes in WinUI 2 - like the ToDo app, and the Calendar preview app AFAIK.

When WinUI 3 can use it, no reason to think why other apps and browsers couldn't use it too.

This topic of discussion would be about how Acrylic for WinUI 3.X should work.

[Jaiganeshkumaran]

@mdtauk Then why doesn't Fluent UI show acrylic flyouts like what WinUI 3 does? MS Edge is a native app that doesn't use acrylic and Microsoft has already said this is the new Fluent and they will not add acrylic. Fluent UI could add in page acrylic that doesn't need desktop access but they will not since acrylic is not Fluent anymore. They will not and should not accept this proposal since Acrylic is no more Fluent. They want Windows apps to follow other OSes and be like others and with no uniqueness. Now Fluent == What MS follows in the latest web apps, not Light, Depth, Motion, Material, and Scale.

[mdtauk]

@mdtauk Then why doesn't Fluent UI show acrylic flyouts like what WinUI 3 does? MS Edge is a native app that doesn't use acrylic and Microsoft has already said this is the new Fluent and they will not add acrylic. Fluent UI could add in page acrylic that doesn't need desktop access but they will not since acrylic is not Fluent anymore. They will not and should not accept this proposal since Acrylic is no more Fluent. They want Windows apps to follow other OSes and be like others and with no uniqueness.

The WinUI team is still using Acrylic for menus and flyouts. Edge is a Win32 app as it shares a codebase with Chromium. So maybe when WinUI 3 is out and stable, Edge may use some of those features in it's UI.

[Jaiganeshkumaran]

@mdtauk What about the web? Their new mantra is to keep it consistent with Fluent UI. Fluent UI should have acrylic for popup menus and flyouts to be consistent with Windows native. Regarding background desktop acrylic, Microsoft already removed background acrylic from NavigationView with a reason saying 'it distracts users'. So I don't think it will be pushed heavily in the future. Navigation view is a good place to put it like what Apple does but they got rid of it by default.

[mdtauk]

@mdtauk What about the web? Their new mantra is to keep it consistent with Fluent UI. Fluent UI should have acrylic for popup menus and flyouts to be consistent with Windows native.

Cross Platform UI is 20% identical and 80% native. The control designs are being updated and refreshed. Older design elements from Windows Phone and Windows 8 are being removed or replaced. Acrylic is not being removed from Windows, it just wont support HostBackdrop Acyrlic with WinUI 3.0 at launch.

On macOS they will support Vibrancy, on Windows will support Acrylic, and on the Web (at least for now) won't use Acrylic effects.

The Windows Store app uses webviews for it's product pages, so they can work on the Web, on Windows, and on Xbox. If those WebViews used HTML/React controls which matched the look of the WinUI controls, then it would look and feel more native.

The whole of Windows UI design is going to be refreshed according to reports. It would make sense to try to ensure no matter what framework you use to make Windows Apps and the Windows Shell - the design matches. This is why the new design is replacing older elements - and will be designed to sit comfortably.

[Jaiganeshkumaran]

@mdtauk I'm taking about Fluent UI. It has no acrylic, no reveal nothing from Fluent.

[mdtauk]

@mdtauk I'm taking about Fluent UI. It has no acrylic, no reveal nothing from Fluent.

Doesn't mean it wont have it in the future. FluentUI is focusing on Office add-ins and business like web UIs. It uses React, but React Native for Windows, will use WinUI.