Windowscommunitytoolkit: Unable to apply DropShadow to an Ellipse filled with RadialGradientBrush

[timunie]

Describe the bug

I am trying to apply a DropShadow to an Ellispe filled with a RadialGradientBrush I am not able to get this to work. The DropShadowPanel works as expected if I change the Brush to a SolidColorBrush

Steps to Reproduce

<controls:DropShadowPanel Canvas.Left="{Binding Left}"
                            Canvas.Top="{Binding Top}"
                            BlurRadius="20"
                            IsMasked="True"
                            OffsetX="10"
                            OffsetY="10"
                            ShadowOpacity="1"
                            Color="Black">
    <Ellipse Width="{Binding Diameter}"
                Height="{Binding Diameter}"
                Fill="{Binding Fill}">
        <Ellipse.RenderTransform>
            <TranslateTransform X="{Binding Left}" Y="{Binding Top}" />
        </Ellipse.RenderTransform>
    </Ellipse>
</controls:DropShadowPanel>

where Fill is a RadialGragientBrush generated in code behind

With RadialGadientBrush

With SolidColorBrush

Expected behavior

image 2 with the RadialGradientBrush applied

Screenshots

see above

Environment

NuGet Package(s): 

Package Version(s): 

Windows 10 Build Number:
- [ ] Fall Creators Update (16299)
- [ ] April 2018 Update (17134)
- [ ] October 2018 Update (17763)
- [X] May 2019 Update (18362)
- [ ] Insider Build (build number: )

App min and target version:
- [ ] Fall Creators Update (16299)
- [ ] April 2018 Update (17134)
- [X] October 2018 Update (17763)
- [X] May 2019 Update (18362)
- [ ] Insider Build (xxxxx)

Device form factor:
- [X] Desktop
- [ ] Xbox
- [ ] Surface Hub
- [ ] IoT

Visual Studio 
- [ ] 2017 (version: )
- [X] 2019 (version: 16.4.2) 
- [ ] 2019 Preview (version: )

Additional context

Here is a sample App if it helps. Note: I am not a programmer by profession, so maybe this code is not up to your standard 😄 https://github.com/timunie/Bubblez

[michael-hawker]

Thanks for the report @timunie, we definitely see this behavior. Probably has to do with how masks are being generated.

However, the brush is being added to WinUI now: https://github.com/microsoft/microsoft-ui-xaml/issues/266

So we should validate the initial implementation of their brush and fix it there instead, as once that ships, we'll be deprecating the version in the toolkit.

FYI @jesbis @SavoySchuler

[jesbis]

Yeah masks look like the culprit - I think this may be a generic issue with calling GetAlphaMask() (like DropShadowPanel does when setting IsMasked=true) on any element filled with any XamlCompositionBrush (which is what both implementations of RadialGradientBrush use). Even using a solid color CompositionColorBrush doesn't work.

I opened a WinUI bug here for the generic issue:
https://github.com/microsoft/microsoft-ui-xaml/issues/1884

Related: @michael-hawker are these docs out of date? I don't see the IsMasked property:
https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.dropshadowpanel?view=win-comm-toolkit-dotnet-stable

[timunie]

Thank you for taking your time and inspection. I didn't know that this was available in WinUi already. Should I close this issue?

Have a nice weekend
Tim

[michael-hawker]

@timunie the first preview was just added, so I think we should leave this open until we've confirmed hand-off with WinUI if it's a general composition brush issue.

[michael-hawker]

@jesbis yeah, I think the doc is out of date, we had issues trying to get them updated after the last release, I need to get back to investigate what happened.

Thanks for investigating and opening the WinUI issue.

[codendone]

Shape.GetAlphaMask() is created by drawing the shape into a static bitmap. The actual XamlCompositionBrushBase.CompositionBrush can't be used for this, so it gets drawn with the FallbackColor. The default FallbackColor for XamlCompositionBrushBase is Transparent, so if the brush or the app doesn't set a different FallbackColor, the drawn shape in the AlphaMask will be completely transparent. Setting, for example, FallbackColor = Colors.Green in the sample app's construction of the RadialGradientBrush in Ball.cs gets the shadow to render.

(There is a separate issue somewhere where the shadows of balls which get added by clicking all end up in the upper-left corner. But there are shadows! 😄)

[timunie]

Hi @codendone
Thank you for looking into this. I can confirm that it now renders as expected. Maybe there should be an example with FallbackColor in the Demo-App for others with a similar issue.

Happy Sunday
Tim

[michael-hawker]

Going to close this as there's a general issue open on the platform and a workaround by setting the FallbackColor.