AttachedDropShadow size changes abnormally

[chenjt2001]

Describe the bug

AttachedDropShadow display problem when the size of the element that owns the AttachedDropShadow changes.

`

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>

    <Border x:Name="ShadowTarget" Grid.Column="0"/>

    <Border Grid.Column="1" Background="AliceBlue">
        <ui:Effects.Shadow>
            <ui:AttachedDropShadow BlurRadius="60"
                               Color="Black"
                               CastTo="{Binding ElementName=ShadowTarget}"/>
        </ui:Effects.Shadow>
    </Border>
</Grid>

`

Regression

No response

Reproducible in sample app?

• This bug can be reproduced in the sample app.

Steps to reproduce

1. Run the Application.
2. Change the window size.

Expected behavior

The shadow remains displayed on the entire edge of the Border.

Screenshots

1. When the application starts:
   

2. After resizing the window:
   
   

Windows Build Number

• Windows 10 1809 (Build 17763)
• Windows 10 1903 (Build 18362)
• Windows 10 1909 (Build 18363)
• Windows 10 2004 (Build 19041)
• Windows 10 20H2 (Build 19042)
• Windows 10 21H1 (Build 19043)
• Windows 11 21H2 (Build 22000)
• Other (specify)

Other Windows Build number

Windows 21H2 (19044.1645)

App minimum and target SDK version

• Windows 10, version 1809 (Build 17763)
• Windows 10, version 1903 (Build 18362)
• Windows 10, version 1909 (Build 18363)
• Windows 10, version 2004 (Build 19041)
• Other (specify)

Other SDK version

No response

Visual Studio Version

2022

Visual Studio Build Number

17.1.6

Device form factor

Desktop

Nuget packages

Microsoft.NETCore.UniversalWindowsPlatform: 6.2.13
Microsoft.Toolkit.Uwp.UI: 7.1.2

Additional context

If we set the Border's Background to Transparent, we can find that the size of the window changes in time, but the aspect ratio of the shadow remains unchanged. Maybe that's the reason for the problem.

Help us help you

Yes, but only if others can assist.

[ghost]

Hello chenjt2001, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[michael-hawker]

Thanks for filing an issue @chenjt2001!

We're registering to the SizeChanged event here, so I would have suspected this to be fired in this scenario to update the shadow:

WindowsCommunityToolkit/Microsoft.Toolkit.Uwp.UI/Shadows/AttachedDropShadow.cs

Lines 140 to 160 in 00e9790

	elementNew.SizeChanged += shadow.CastToElement_SizeChanged;
	// Re-trigger updates to all shadow locations for new parent
	shadow.CastToElement_SizeChanged(null, null);
	}
	}
	}
	private void CastToElement_SizeChanged(object sender, SizeChangedEventArgs e)
	{
	// Don't use sender or 'e' here as related to container element not
	// element for shadow, grab values off context. (Also may be null from internal call.)
	foreach (var context in EnumerateElementContexts())
	{
	if (context.IsInitialized)
	{
	// TODO: Should we use ActualWidth/Height instead of RenderSize?
	OnSizeChanged(context, context.Element.RenderSize, context.Element.RenderSize);
	}
	}
	}

Maybe this is related to the note here about the existing rendersize vs. actualsize? Or possibly a delay between those values updating and the next layout pass occurring... Maybe we need to dispatch this or use the CompositionTargetHelper to ensure that the element has the correct size (though I would have thought it should have that by the SizeChanged is fired).

If this is enough for you to dig-in and debug, let me know if you want to take a look at it. If you need more assistance in getting the sample app to run locally to reproduce, let us know too. Thanks!

[chenjt2001]

Thanks. I found that the RenderSize is correct and the problem is that the mask is not updated. See the PR #4549.

[LalithaNadimpalli]

I copy pasted the Grid code in the sample app and see the issue when we adjust the window size changes abnormally and the PR created fixes the issue(Shadow remains constant as we adjust the window size)