create a DropShadow behind a control

[tpoint75]

Describe the bug

I cant create a DropShadow behind a control. The shadow is always in front of it!

void ApplyDropShadow(FrameworkElement const& element) {

        // Get the Compositor and Visual for the element
        auto visual = ElementCompositionPreview::GetElementVisual(element);
        auto compositor = visual.Compositor();

        // Create a DropShadow
        DropShadow dropShadow = compositor.CreateDropShadow();
        dropShadow.Color(winrt::Windows::UI::ColorHelper::FromArgb(255, 0, 255, 255)); 
        dropShadow.BlurRadius(30.0f);
        dropShadow.Opacity(0.8f);
        dropShadow.Offset({ -5.0f, -5.0f, 0.0f });

        // Create a SpriteVisual and set the shadow
        SpriteVisual shadowVisual = compositor.CreateSpriteVisual();
        shadowVisual.Shadow(dropShadow);

        // Set the size of the shadow to match the element
        shadowVisual.Size({ element.ActualSize().x + 10, element.ActualSize().y + 10 });

        // Place the container visual behind the XAML element
        ElementCompositionPreview::SetElementChildVisual(element, shadowVisual);
}

Steps to reproduce the bug

execute code

Expected behavior

No response

Screenshots

No response

NuGet package version

None

Packaging type

No response

Windows version

No response

IDE

No response

Additional context

No response

[castorix]

I cannot test in C++, but it is the same code as in C#; a way is to render the control with RenderTargetBitmap (similar to in this test #10062), then add the shadow (and Mask depending on the control (GetAlphaMask))
A test with an Image control, by adapting your code :

I also found other methods with another control, like at https://github.com/microsoft/uwp-experiences/blob/master/apps/News/News/Helpers/Composition/CompositionShadow.xaml.cs

[tpoint75]

Yeah, how to get the mask for each control? The most doesn't have it (Can mask images, text, and shapes do) and if I understand it right, the https://github.com/CommunityToolkit/WindowsCommunityToolkit/blob/main/Microsoft.Toolkit.Uwp.UI.Controls.Core/DropShadowPanel/DropShadowPanel.xaml
puts a Border around the element, and paint the shadow over the border to get the element over the shadow.

[castorix]

Without mask, the shadow will be rectangular.
But simple controls like Buttons use transparency, so alpha must be changed and it is not great :

MS also uses a Border in CompositionShadow.xaml. Maybe it is the best method.
There is also this, but not tested : https://learn.microsoft.com/en-us/windows/communitytoolkit/helpers/attachedshadows

[niels9001]

Can ThemeShadow be of help?

https://medium.com/@Niels9001/elevate-your-ui-with-themeshadow-703c513fd96a

[marcelwgn]

@tpoint75 Have you tried using a negative z-index for the shadow offset?