Blur and Opacity Artifacts

20 Jun 2024, 19:15

Hi all!

We're trying to track down some blur and opacity artifacts that we're seeing in our hud. I'm able to reproduce these artifacts in the xaml toy.

Bleed in the blur between multiple blurred elements.

Opacity and blur is not working well together.

You can see both of these issues in the xaml toy link provided here. Specifically, the second entry is exhibiting the most problems.
Are there any known work arounds to these issues?

https://www.noesisengine.com/xamltoy/e6 ... 41c4f86cfd

Thanks!
Greg

20 Jun 2024, 20:18

This is a bug caused by not taking into account effect padding in the bounding box used to generate the opacity offscreen.
In the example you attached the workaround would be to wrap the rectangle with some extra margin, something like this:

<Grid x:Name="SquareHolder1" Width="{StaticResource ObjectSize}" Height="{StaticResource ObjectSize}" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0.5">
  <Border Margin="-30" Background="Transparent">
    <Rectangle x:Name="Square1" Fill="#FF1D8E00" Margin="30">
      <Rectangle.Effect>
        <BlurEffect Radius="{StaticResource BlurRadius}" />
      </Rectangle.Effect>
    </Rectangle>
  </Border>
</Grid>

With that change I cannot see more problems in the rest of scenarios shown in that xamltoy.

20 Jun 2024, 21:39

Ah! Excellent.

Was wondering if this was known. We'll implement the work around for now and look forward to the eventual fix.

Thanks!

21 Jun 2024, 11:52

Cool XamlToy by the way :)

Blur and Opacity Artifacts

Blur and Opacity Artifacts

Re: Blur and Opacity Artifacts

Re: Blur and Opacity Artifacts

Re: Blur and Opacity Artifacts

Who is online