Incorporation of Microsoft Fluent Design Acrylic effect

[Samuel12321]

Review from store:

"Hello! Another fine addition in my Microsoft Store apps collection! I wish the music flyout would have been more "fluent-ish", featuring Microsoft Fluent Design. For now, it feels like more similar to Google Material Design for Chrome/Android."

has also been 2 similar reviews

"This app so good. But I hope you update with fluent reveal effect and blurry transparency flyout"

[ShankarBUS]

"Reveal effect" - not a big deal (could be easily done using RadialGradientBrush)
"Acrylic effect" - exploring the possibilities

I don't really get what the mean by "Fluent Design" or "Material Design". Our app not even a bit looks like "Material Design"

Material Design In XAML

Fluent Design - ModernWpf

Ours look somewhat similar to MS Edge. Those two effects are just a small part of "Fluent Design"

The new Xbox store app has acrylic but it looks completely diverged from "Fluent Design"

The new Xbox Store

Even MS doesn't know what "Fluent Design" means

I tried to align to this as much I can

Windows 10X SMTC panel

So all that matters is the fancy "Acrylic" effect 😂😟

[ShankarBUS]

Hey Guys!

I want some design ideas/suggestions for future releases. I have uploaded the design to Figma - https://www.figma.com/file/Gq5AKs5k8lOl0rmDjQeXT2/ModernFlyouts

This is the Current Design :

Some one in the MS Store review suggested an option to hide the thumbnail on the background. This is how it would look like:

Hey @Samuel12321, @Poopooracoocoo, @Cyberdroid1

Can you guys make mockups/give some suggestions of the design you'd like

What should we do regarding #6, #49, #54, #60?

[ShankarBUS]

This is how our flyout will look like if it had the fancy "Acrylic" effect

[YanovskyOr]

This is how our flyout will look like if it had the fancy "Acrylic" effect

PLEASE MAKE THIS HAPPEN 🙏

[Samuel12321]

This is how our flyout will look like if it had the fancy "Acrylic" effect

Looks Amazing😊
I still think it would look better and follow Win10X design better if it had the small space between the media and volume flyouts.

[ShankarBUS]

@Samuel12321,

Looks Amazing😊

It's just a mock-up though 😁

I still think it would look better and follow Win10X design better if it had the small space between the media and volume flyouts.

Like how it previously was?

I was having some troubles with showing shadows. They were casting on the one above. So, I had to change the design to host all the contents on a single shadow chrome.

We can reconsider this gap proposal after we implement acrylic successfully.

I kind of found a way to have acrylic in WPF (with custom blur radius, custom effects, custom shape not rectangle only and finally it doesn't lag while dragging)

But I don't know how we're are going to compose the WPF content over the acrylic. It would take some though. Maybe post v0.9?

[Poopooracoocoo]

and finally it doesn't lag while dragging

isn't that a bug that Windows introduced though?

[ShankarBUS]

Yes, it will happen if we used SetWindowCompositionAttribute and ACCENT_ENABLE_ACRYLICBLURBEHIND.

I used the "Visual Layer" (aka Windows.UI.Composition APIs) and make a impl of acrylic brush myself.

Only hard thing is that, we have to build the acrylic brush from the base like how WinUI does (Backdrop Brush -> Gaussian Blur -> Noise -> Tint -> Luminosity)

And the window should be border less and transparent with no content in it. The Composition APIs will render atop of the window (over the WPF content) but they don't block input. I'm confused about the implementation process.

I don't know if hosting a child window will tackle this. Will report to you once done

[Poopooracoocoo]

I think TranslucentTB has some work in that area. Might be worth checking that out.

[ShankarBUS]

Seems like they use SetWindowCompositionAttribute. As the TaskBar is static and won't be moved, there won't be any problems. But in our case we have to animate the flyout (no fading or sliding can be done while using this API :( ). So unfortunately that method won't work for us.

We have to use the method I suggested.

[ShankarBUS]

Wew!

Made some progress on the acrylic effect. Now I can render WPF content on the blurred window.

[ShankarBUS]

Update: Got the WPF content to refresh itself. But the CPU & GPU usage skyrockets.

If there are some experts out there, please help me to reduce the CPU usage and improve the performance.

If we make this effect efficient, then we can easily add this to ModernFlyouts with less amount of work.

[prakharb5]

Do the values increase when it the window is created, or for the time the window is present?

[ShankarBUS]

The usage will be high until the window is closed.

We are re-rendering the WPF content (which is not visible due to transparency) into a byte array and rendering that onto the composition layer (aka the layer which hosts the acrylic).

So, CPU usage in this process is unavoidable.

It would be nice if we can directly pass the WPF buffer into the Composition layer instead of 2 intermediate steps which includes CPU.

[prakharb5]

@ShankarBUS The tray icon popup of Dopamine music player produces an acrylic window blur for its window. Have a look at that too.

[WindowsFanBoi]

Hey @ShankarBUS,

How about using two windows, one (say AcrylicWindow) would be using the Composition APIs to create the acrylic effect and the second is what we already have (i.e. FlyoutWindow a transparent alpha blended WPF window)

You can then make the AcrylicWindow as the owner of the FlyoutWindow so that they have the same Z-Order and will look a single window if their bounds are synced.

The FlyoutWindow won't consume that much CPU/GPU in idle state and since the AcrylicWindow is using the Composition APIs, it will result in a performance improvement.

But you'd have some problems using Win2D.uwp with .NET 5 (as Win2D will provide *.winmd metadata files not managed .NET *.dll assemblies and the WinRT interop being removed in .NET 5, you won't be able to use them without making your own projection lib using CsWinRT)

So 🤷‍♂️

[ShankarBUS]

@WindowsFanBoi

Same pinch!

You're about two hours late 😁, I got it working without any performance degradation. Thanks for the suggestion though.

I didn't there were such problems with .NET 5, I was working on a experimental project which uses .NET Framework 4.8. So, I didn't experience this issue. I will see what we could do about this.

[Samuel12321]

don't know if this could be of any help: https://github.com/sourcechord/FluentWPF/tree/master

[ShankarBUS]

Bruh! #44 (comment)

[Samuel12321]

whops, i forgot all about that one

[ShankarBUS]

@Samuel12321,

You said you know C++, right?

Win2D is not supported in .NET 5 (due to various reasons). So we have to make our own implementation with just the GaussianBlurEffect in C# and use it instead of Win2D.

Do you know anything about Direct2D? And how it use in from C#?

Anyone in this thread?

Currently I can use the Composition APIs to render stuff but can't do apply any effects due to the lack of Win2D.

So, just the screen pixels are rendered without the blur.

One way to tackle this would be to fallback to .NET Core 3.1 which I don't prefer.

Any help would be appreciated 🙏.

[Samuel12321]

no sorry, as i said, i know python and a specific variant of c (used for controlling mechanical devices), this is my first time with C++, C#, .NET and app development in general.

I will see what i can learn about this though.
Community help would be very useful.

[Samuel12321]

Just renamed thread so it's specific to the acrylic (which is all that seems to be discussed here anyway), will create a separate thread for the Reveal effect.

[ShankarBUS]

Win2D is not supported in .NET 5 (due to various reasons). So we have to make our own implementation with just the GaussianBlurEffect in C# and use it instead of Win2D.

Do you know anything about Direct2D? And how it use in from C#?

Anyone in this thread?

Currently I can use the Composition APIs to render stuff but can't do apply any effects due to the lack of Win2D.

So, just the screen pixels are rendered without the blur.

One way to tackle this would be to fallback to .NET Core 3.1 which I don't prefer.

Any help would be appreciated 🙏.

Nah, no need for any of that. I forked Win2D and modified to be compatible with .NET 5.

@WindowsFanBoi,

But you'd have some problems using Win2D.uwp with .NET 5 (as Win2D will provide *.winmd metadata files not managed .NET *.dll assemblies and the WinRT interop being removed in .NET 5, you won't be able to use them without making your own projection lib using CsWinRT)

That's what I did.

And the result turned out to be great!

For those who are willing to test this out by themselves,

WPF Acrylic effect demo.zip

1. System Requirements:
   • Windows 10 1903 or later
   • x64 OS
   • .NET 5 runtime preinstalled
2. Download and extract this zip file (safe to download and extract, I assure you)
3. Run the Temp.exe and voila!

This is just a prototype. I will make some improvement later this week.
You can drag the window by holding mouse left and moving the cursor (just like our flyouts).

For some weird reasons the SetWindowCompositionAttribute API (used for having acrylic effect in Win32 apps for ex: used in FluentWPF, AvaloniaUI, EarTrumpet, TranslucentTB, TaskbarX and so on) works fine in Windows 10 20H2 without the so called "1903 drag issue".

The only benefits my approach have are custom blur radius, custom effects (not just blur), custom acrylic visual shape (we could even create a round acrylic window with my approach).
Otherwise, the SetWindowCompositionAttribute API is enough.

Feedbacks are welcome!

[Samuel12321]

WELLDONE @ShankarBUS
looks great.

[prakharb5]

For some weird reasons the SetWindowCompositionAttribute API (used for having acrylic effect in Win32 apps for ex: used in FluentWPF, AvaloniaUI, EarTrumpet, TranslucentTB, TaskbarX and so on) works fine in Windows 10 20H2 without the so called "1903 drag issue".

Maybe MS finally fixed it...?

Congrats though.

[thexamlguy]

Following this Twitter conversation (https://twitter.com/TheXamlGuy/status/1341098062245183488) I found another way to do this by using WindowXamlHost to host a UWP usercontrol inside a WPF app and then using a Flyout with ShouldConstrainToRootBounds property set to false, this will literally allow the Flyout to go outside the root boundary of the window hosting the control. A bonus is is that you are given the animations and acrylic by default.

I have a quick dirty sample of the above working, I'll get it posted once I have tidied it up some more.

EpyJhJSW8AcYZiO.mp4

[thexamlguy]

Obviously I should point out the only downside about the above is that you'd lose the ability to drag the Flyout around, but I am sure with some more work it could be made possible to drag the Flyout around too?

[ShankarBUS]

@thexamlguy,

Thank you so much mate!!!!!

I will investigate this further.

But "Window Activation" is another thing to worry about.

The current flyout is designed to be non activatable and won't activate on mouse activation or even while showing.

I'll sure explore the possibilities.

And how did you find that he was using a "Flyout" inside the xaml island?

[thexamlguy]

The animation, it was far too smooth to have been achieved with a WPF window alone especially with it being a larger window. The guys who work on EarTrumpet have been trying to replicate the look and the smooth animation found the Windows 10 notification flyout for a very long time without any luck.
I thought at first he was using the TeachingTip control from WinUI as Microsoft themselves uses the TeachingTip control on the Desktop in areas where they are trying to promote their new Edge browser when someone had Chrome installed. That's when I discovered ShouldConstrainToRootBounds in the FlyoutBase.

[Tropix126]

Any updates on this?

[Samuel12321]

Hi @Tropix126, not that I'm aware of. This is a bit out side of my area of expertise and i don't think @ShankarBUS was planning on doing anything more on this one.
As always if anyone else wanted to help add this it would be greatly appreciated.

[selastingeorge]

Win2D is not supported in .NET 5 (due to various reasons). So we have to make our own implementation with just the GaussianBlurEffect in C# and use it instead of Win2D.
Do you know anything about Direct2D? And how it use in from C#?
Anyone in this thread?
Currently I can use the Composition APIs to render stuff but can't do apply any effects due to the lack of Win2D.
So, just the screen pixels are rendered without the blur.
One way to tackle this would be to fallback to .NET Core 3.1 which I don't prefer.
Any help would be appreciated 🙏.

Nah, no need for any of that. I forked Win2D and modified to be compatible with .NET 5.

@WindowsFanBoi,

But you'd have some problems using Win2D.uwp with .NET 5 (as Win2D will provide *.winmd metadata files not managed .NET *.dll assemblies and the WinRT interop being removed in .NET 5, you won't be able to use them without making your own projection lib using CsWinRT)

That's what I did.

And the result turned out to be great!

For those who are willing to test this out by themselves,

WPF Acrylic effect demo.zip

1. System Requirements:

   • Windows 10 1903 or later
   • x64 OS
   • .NET 5 runtime preinstalled

2. Download and extract this zip file (safe to download and extract, I assure you)

3. Run the Temp.exe and voila!

This is just a prototype. I will make some improvement later this week.
You can drag the window by holding mouse left and moving the cursor (just like our flyouts).

For some weird reasons the SetWindowCompositionAttribute API (used for having acrylic effect in Win32 apps for ex: used in FluentWPF, AvaloniaUI, EarTrumpet, TranslucentTB, TaskbarX and so on) works fine in Windows 10 20H2 without the so called "1903 drag issue".

The only benefits my approach have are custom blur radius, custom effects (not just blur), custom acrylic visual shape (we could even create a round acrylic window with my approach).
Otherwise, the SetWindowCompositionAttribute API is enough.

Feedbacks are welcome!

@ShankarBUS Can you please share the source code of demo you mentioned here #66 (comment)

[SyedAounHaiderNaqvi]

Any progress guys?

[ShankarBUS]

Any progress guys?

No floppa, no

[SyedAounHaiderNaqvi]

Any progress guys?

No floppa, no

Aw well, best of luck anyways :D

[devilAPI]

We still need this, any updates?

[Samuel12321]

The team has been very busy, unfortunately we haven't had time to do this yet.
Always open to community contributions.