[Feature Request] Add background acrylic to Color Picker

[thexamlguy]

Seeing as Image Resizer and Color Picker PowerToys have both had a recent makeover to fit in with the Fluent UI guidelines it'll be nice to go a bit further and to introduce Acrylic into the mix with background acrylic.

I have tested this in a small sample app with ModernWPF (which is what the Image Resizer and Colour Picker are using) with FluentWpfChromes, and it seems to work really well together.

[niels9001]

100% agree, ideally we would have used it already across all the apps that were redesigned. With moving these apps over to WinUI, we can probably adopt it at some point (v3.1?).

For WPF, there doesn't seem to be an 'official' way to use Acrylic rendered via the Composition APIs. To my knowledge, these WPF attempts try to mimic Acrylic (but not 100% though?). My worry is that these implementations are not as optimized in terms of performance and power consumption as true Acrylic is. We've seen the same when using WPF shadows on moving elements vs. UWP/WinUI ThemeShadows.

But again, I might be completely wrong! I'm all for adopting acrylic either way and would be happy to implement it. But only if it doesn't have any negative consequences :).

[thexamlguy]

I am pretty sure this is the only official way to get the proper Acrylic effect on a Win32 Window, albeit I believe it is undocumented. Rafael himself has documented it on his blog @ https://www.withinrafael.com/2018/02/02/adding-acrylic-blur-to-your-windows-10-apps-redstone-4-desktop-apps/ and it used within Ear Trumpet although there's been better ways to implement it (like with FluentWpfChromes) since then.

There's a few other OS projects that have implemented the Acrylic effect via the SetWindowCompositionAttribute , i.e. https://github.com/sourcechord/FluentWPF

[ShankarBUS]

So, I've kind of found another way to achieve acrylic effect in WPF.

Using the same Composition API that UWP/WinUI acrylic brush uses.

See my comment (I also included a demo app, please ignore other comments 😅). https://github.com/ShankarBUS/ModernFlyouts/issues/66#issuecomment-734953522

Given that we can use Composition APIs in WPF, we can make a port of the AcrylicBrush APIs to C#.

You can also decompile the demo app's source code to see its internal APIs.

Bye!

[crutkas]

I'd really be interested in performance here. I think it would be interesting for Color picker, bit unsure how / where on Image resizer it would go

[ShankarBUS]

On a performance view point, both the SetWindowCompositionAttribute and Compositor.CreateHostBackdropBrush Method have similar impact.

But WinUI's AcrylicBrush (uses Compositor.CreateHostBackdropBrush for window acrylic and Compositor.CreateBackdropBrush for in-app acrylic) has built-in power saver and performance preference handling.

Whereas with SetWindowCompositionAttribute, you have to do all of the manual work to turn it on/off when power saver is enabled/disabled or transparency effect is turned on/off and so on.

Thus using SetWindowCompositionAttribute is kind of a work overload for you. But with proper care and pre-planning, it could be made power efficient and performant. It also has some issues on Windows 10 1903 to 2009. Where dragging the window may result in a lag effect. This has been fixed on recent insider builds.

It's better to wait until WinUI 3.x support acrylic built-in.

[niels9001]

@niels9001 I suppose this is still relevant m

Something for @crutkas to have an opinion about :).

[crutkas]

As of now, how would this look? I look at something like this and it is a bit unclear. Some may love it but others may not.

We also should follow guidelines for material usage.

[niels9001]

Updated title, ImageResizer now has the Mica background effect. ColorPicker in progress