In-app acrylic effect

[RobertBeekman]

Hello!

Since Avalonia 11 I've been tinkering around a bit with ICustomDrawOperation to see how close I could get to an acrylic blur effect.

I think I have some decent results:

Original:

Source: https://github.com/Artemis-RGB/Artemis/tree/e03d6b20e9165d364223fe875097b429fac7668c/src/Artemis.UI/Controls/AcrylicBlur

However, when it comes to authoring controls I'm not nearly as experienced as @amwx and I ran into quite a few snags. But I thought I'd at least bring up the fact that this effect is now possible to achieve.

It would be pretty cool to include in FluentAvalonia one way or another. WinUI's approach of a custom brush is the most elegant I think, but may be difficult to reproduce in Avalonia, I did this as a ContentControl because it was the quickest way for me to get something that works and can host another element.

Some things I ran into

• It's a bit tricky to get the visual to update if an element behind it updates, Render on the ICustomDrawOperation gets called again but with a smaller dirtied rectangle. To combat this I check whether the dirtied rectangle (the current clip) covers the entire element and if not, I invalidate the visual.
  • This is quite hacky and will probably cause endless invalidation loops in some scenarios
  • I also tried a solution where I keep the last snapshot around and combine it with the new snapshot so that I always have a full bitmap of what is behind the control
    • With this I ran into an issue that you cannot draw outside the dirtied rectangle, or atleast I could not manage it, which is problematic because the blur should be updated, event outside the dirtied rect.
• The effect is pretty GPU intensive and should probably be turned off when power saving is active, similar to WinUI
• I think the WinUI version also applied a color filter to the blurred image, but I got pretty close though.
• If you'd like to use my code please do, I give permission to ignore the license for AcrylicBlur FluentAvalonia purposes.

[amwx]

Very nice. I too have experimented with this and have my own "AcrylicPanel". I almost used/included this in the new sample app on the home page tiles like WinUI3 does, but decided not to for a few reasons

• I've noticed there can be strange artifacts in the acrylic effect, particularly if there's moving/transitioning stuff behind it
• As you noticed, ICustomDrawOperation can be weird. Not sure if this is still the case in 11.0, but in 0.10.x the custom render op will sometimes get an update even if the render area is untouched (i.e, hover a button in a different part of the app that doesn't overlap the custom draw region, and it'll still update)
• The acrylic effect put together in Skia doesn't look quite right to me, although my most recent attempt and yours (in the screenshots) look a lot better. This is just down to the way the effect has to be built in Skia compared to WinUI comp/Direct2D
• Somebody will put it in a popup and complain that the effect isn't working - even though it would be labeled in-app only
• Since it can't be implemented as a brush, it's harder to use since its a visual element, which may require retemplating of an entire control to use it effectively. This is the biggest downside here.

I know composition brushes are planned at some point in Avalonia, which I think will include an acrylic brush, but not sure on the timeline. I think it's best to wait for that, as if they're implemented upstream in the composition system, there may be more optimizations that can make it better. However, if that turns out to not be anytime soon and this is deeply desired, I can look into adding this into the "experimental, you're on your own" namespace like ConnectedAnimation is.

[RobertBeekman]

Thanks for sharing your insights :)

I experimented a bit more with this, especially with different combinations of blend modes and I did get a bit closer to WinUI's effect.
With my limited testing I did not run into issues where Render was getting called without a dirty rect that touched the element.

One major issue I had with it which ultimately caused me not to use it for now is that it doesn't blend with the Mica effect.
You can actually see this on my screenshot, the parts not covered by the three colored elements should not be gray.

Composition brushes sound interesting, and they do sound more suitable so I don't blame you for waiting on those. Admittedly I do not know how they tie into this and would enable an acrylic effect where that is currently not possible.

[amwx]

I experimented a bit more with this, especially with different combinations of blend modes and I did get a bit closer to WinUI's effect. With my limited testing I did not run into issues where Render was getting called without a dirty rect that touched the element.

I think when I observed this, it was still in 0.10.x or very, very early 11.0-preview, so its possible whatever I was seeing has either been fixed with the Renderer rewrite in 11.0 or was an error on my part

One major issue I had with it which ultimately caused me not to use it for now is that it doesn't blend with the Mica effect. You can actually see this on my screenshot, the parts not covered by the three colored elements should not be gray.

Ahh yes, that was the other big downside. I'm not really sure what can be done here, even if this is implemented upstream. As far as I know, it's not possible to get access to the raw texture DWM provides for these backdrop effects (even through WinUI) so even with WinUI comp enabled, we're still rendering in Avalonia to a transparent-cleared render target. I thought I once saw something where somebody cleverly did get the DWM texture, but I can't find anything on that now, and it probably used undocumented APIs to accomplish it, and that doesn't even consider potential perf implications.

With WinUI moving to WinUI3 with the decoupled compositor/UI stack and that being more and more integrated into the Windows shell, and the fact that Avalonia doesn't like to rely on third party dependencies (like the WinAppSdk), I'm not sure if this will ever get solved, even if WinAppSDK/WinUI did ever decide to provide a way to get the backdrop texture. But who knows...