AttachedDropShadow Doesn't Update on Position or Visibility changed

[zateutsch]

Describe the bug

• If you change the visibility to "Collapsed" of an element with a shadow and then resize the window, the AttachedDropShadow will remain at the elements past position when visibility is set to "Visible"

• If a resize of another element in the view moves an element with an AttachedDropShadow, the shadow doesn't get recast until the window is resized.

Steps to Reproduce

1. Put two rectangles in single stack panel
2. Attach shadow to second
3. Resize first rectangle or change visibility on second rectangle
4. AttachedDropShadow remains at original position until window is resized

Expected behavior

AttachedDropShadow remains at proper relative position to element regardless of other UI changes and visibility updates.

Screenshots

[ghost]

Hello zateutsch, 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]

It ignores scaling as well.

I tested the implicit animation sample which shows this off pretty well as a problem (though the AttachedCardShadow works much better (as expected)).

Here's the text XAML I was using:

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
    xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations"
    xmlns:media="using:Microsoft.Toolkit.Uwp.UI.Media"
    mc:Ignorable="d">

  <Grid>
    <Grid x:Name="ShadowTarget"/>
    <Canvas>
      <Border x:Name="Element"
              Height="100"
              Width="100"
              Background="Red"
              Canvas.Top="100"
              Canvas.Left="100"
              ui:VisualExtensions.CenterPoint="50,50,0">

        <animations:Implicit.ShowAnimations>
          <animations:TranslationAnimation Duration="0:0:1" From="0, -200, 0" To="0"/>
          <animations:OpacityAnimation Duration="0:0:1" From="0" To="1.0"/>
        </animations:Implicit.ShowAnimations>

        <animations:Implicit.HideAnimations>
          <animations:OpacityAnimation Duration="0:0:1" To="0.0"/>
          <animations:ScalarAnimation Target="Translation.Y" Duration="0:0:1" To="-200">
            <animations:ScalarKeyFrame Key="0.1" Value="30"/>
            <animations:ScalarKeyFrame Key="0.5" Value="0.0"/>
          </animations:ScalarAnimation>
        </animations:Implicit.HideAnimations>

        <animations:Implicit.Animations>
          <animations:OffsetAnimation Duration="0:0:1"/>
          <animations:RotationInDegreesAnimation ImplicitTarget="Offset" Duration="0:0:1.2" From="0" To="0">
            <animations:ScalarKeyFrame Key="0.9" Value="80"/>
          </animations:RotationInDegreesAnimation>
          <animations:ScaleAnimation Duration="0:0:1"/>
        </animations:Implicit.Animations>
          <ui:Effects.Shadow>
            <ui:AttachedDropShadow BlurRadius="8"
                                   CornerRadius="0"
                                   Color="Black"
                                   Offset="4,4"
                                   Opacity="1"
                                   CastTo="{Binding ElementName=ShadowTarget}"/>
          </ui:Effects.Shadow>
      </Border>
    </Canvas>
  </Grid>
</Page>