AttachedCardShadow not working on Windows 10 when Corner Radius is set on control

[DominicMaas]

Describe the bug

I'm trying to add a shadow to an image with rounded corners. This works as expected on Windows 11, but on Windows 10 the shadow does not appear.

<Border
    Width="300"
    Height="300"
    ui:Effects.Shadow="{StaticResource ItemShadow}"
    CornerRadius="26">
    <Border.Background>
        <ImageBrush ImageSource="{x:Bind ImageLink}" Stretch="Uniform" />
    </Border.Background>
</Border>

If I remove the CornerRadius from the Border element, the shadow will appear (but the image is no longer clipped as expected).

• Is this bug a regression in the toolkit? If so, what toolkit version did you last see it work:

Steps to Reproduce

• Can this be reproduced in the Sample App? (Either in a sample as-is or with new XAML pasted in the editor.) If so, please provide custom XAML or steps to reproduce. If not, let us know why it can't be reproduced (e.g. more complex setup, environment, dependencies, etc...)

Steps to reproduce the behavior:

See https://github.com/DominicMaas/AttachedShadowsRepro. Of concern is MainPage.xaml.

Expected behavior

The image is clipped with a clipped shadow on both Windows 10 and Windows 11.

Screenshots

Windows 11

Windows 10

Environment

NuGet Package(s):

• Microsoft.NETCore.UniversalWindowsPlatform 6.2.13
• Microsoft.Toolkit.Mvvm 7.1.1
• Microsoft.Toolkit.Uwp.UI.Media 7.1.1

Windows 10 Build Number:

• 21H1 (19043)

App min and target version:

• October 2018 Update (17763)
• May 2020 Update (19041)

Device form factor:

• Desktop
• Xbox
• Surface Hub
• IoT

Visual Studio version:

• 2017 (15.{minor_version})
• 2019 (16.{minor_version})
• 2022 (17.{minor_version})

Hello DominicMaas, 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 🙌

[DominicMaas]

Oh, if I use a Rectangle for the image instead of a Border, it appears to work.

Possibly just me being dumb attempting to use a Border.

[michael-hawker]

@DominicMaas yeah this is an expected corner-case of how the shadow works on basic elements and how clipping gets enabled with CornerRadius. We have an example of this in the sample app:

      <!-- If you want to apply a shadow directly in your visual tree to an untemplated element
           You need to at least have a layer of depth as seen in this next example. -->
      <Border Height="100" Width="100">
        <Border CornerRadius="32"
                BorderBrush="White" BorderThickness="1">
          <Border.Background>
            <ImageBrush ImageSource="ms-appx:///Assets/Photos/Owl.jpg"/>
          </Border.Background>
        </Border>
        <!-- We need to put the Shadow on a parent element here as otherwise the
             rounding of the border of the image above clips the shadow itself.
             This is easier to perform with the Composition only based shadow as the
             Shadow is projected to another element. -->
        <ui:Effects.Shadow>
          <media:AttachedCardShadow CornerRadius="32"
                                    Offset="4,4"/>
        </ui:Effects.Shadow>
      </Border>

It could be that the default clipping behavior has changed in Windows 11 because of the prevalence of rounded corners (though that's a good thing for developers to understand as a change in behavior). Not sure if that's documented anywhere...

[Ryken100]

Hi @DominicMaas,

On Windows 10, non-templated elements such as Border, Grid, ContentPresenter etc will clip their children when CornerRadius is applied, so you can't apply AttachedCardShadow directly to these elements. You can apply it to templated controls such as Button, or as you've noticed, a rounded Rectangle :)

I wasn't aware that this clipping behavior was changed in Windows 11, that's good to know!

[michael-hawker]

Thanks @Ryken100, we responded at the same time. 🙂

I'll leave this open for us to follow-up on implications of the changes in behavior in Windows 11, seems like there's a few of these cases where things have changed.