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?

[tpoint75]

Ok, as I figured out:
https://stackoverflow.com/questions/58235566/how-to-create-themeshadow-programmatically-c-uwp-1903
and
https://learn.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.themeshadow.receivers?view=windows-app-sdk-1.6

The main problem is that: "Receivers cannot be an ancestor of the caster in the visual tree."

You always need something that receives the shadow and this must be a sibling of the element and be above it in the XAML tree.
So it must be a child of an grid, because other elements doesn't allow multiple content.
Then it's easy with:

ThemeShadow shadow;
MeasClass().Shadow(shadow);
shadow.Receivers().Append(ReceivingGrid().as());
ReceivingGrid().as().Translation({ 0, 0, 100 });

But this limitation is a no go, because I can't build that stuff around each element.

So the only way could be to get the alpha mask for every element. (How?)
//Create surface brush and load image
CompositionSurfaceBrush surfaceBrush = compositor.CreateSurfaceBrush();
surfaceBrush.Surface(there is no function to get);

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

Or to create this dynamically with visuals. I tried this with visual containers and appending childs, but on the one hand the shadow is visible on the other the element was gone..

[tpoint75]

@castorix
i think this does the magic:
https://github.com/CommunityToolkit/WindowsCommunityToolkit/blob/c8f76d072df53d3622fb5440d63afb06cb9e7a10/Microsoft.Toolkit.Uwp.UI/Shadows/AttachedDropShadow.cs#L237

[tpoint75]

Crazy, this 3 lines are working

ThemeShadow ts;
MeasClass().Translation({ 0,0,10 });
MeasClass().Shadow(ts);