AttachedDropShadow overridden by ImageEx Stretch="UniformToFill"

[OneFingerCodingWarrior]

DropShadowPanel works well

 <Grid>
        <StackPanel>
            <Grid x:Name="imgGrid" Width="300" Height="300">
                <Grid x:Name="ShadowTarget"/>
                <controls:ImageEx x:Name="img" Stretch="UniformToFill" EnableLazyLoading="True" Padding="0 0 3 4" Source="ms-appx:///Assets/pineapple.jpg">
                    <tkUI:Effects.Shadow>
                        <tkUI:AttachedDropShadow BlurRadius="8" IsMasked="True"
                                   CornerRadius="2"
                                   Color="Black"
                                   Offset="3,4"
                                   Opacity="1"
                                   CastTo="{Binding ElementName=ShadowTarget}"/>
                    </tkUI:Effects.Shadow>
                </controls:ImageEx>
            </Grid>

            <controls:DropShadowPanel x:Name="imgPnl" BlurRadius="8" Margin="0 10 3 4" Width="300" Height="300"
                                ShadowOpacity="1"
                                OffsetX="3"
                                OffsetY="4"
                                Color="Black"
                                VerticalAlignment="Stretch"
                                HorizontalAlignment="Stretch"
                                IsMasked="False">
                <controls:ImageEx Stretch="UniformToFill" EnableLazyLoading="True"  Source="ms-appx:///Assets/pineapple.jpg"/>
            </controls:DropShadowPanel>
        </StackPanel>
    </Grid>

Expected behavior

AttachedDropShadow works like DropShadowPanel

Screenshots

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

[OneFingerCodingWarrior]

looks like it do relate to Stretch="UniformToFill"

            <Grid x:Name="imgGrid" Width="300" Height="300">
                <Grid x:Name="ShadowTarget"/>
                <controls:ImageEx x:Name="img" Stretch="UniformToFill" EnableLazyLoading="True" Source="ms-appx:///Assets/pineapple.jpg">
                    <tkUI:Effects.Shadow>
                        <tkUI:AttachedDropShadow BlurRadius="8" IsMasked="True"
                                   CornerRadius="2"
                                   Color="Black"
                                   Offset="3,4"
                                   Opacity="1"
                                   CastTo="{Binding ElementName=ShadowTarget}"/>
                    </tkUI:Effects.Shadow>
                </controls:ImageEx>
            </Grid>

            <Grid x:Name="imgGrid1" Width="300" Height="300" Margin="10">
                <Grid x:Name="ShadowTarget1"/>
                <controls:ImageEx x:Name="img1" Stretch="Uniform" EnableLazyLoading="True" Source="ms-appx:///Assets/pineapple.jpg">
                    <tkUI:Effects.Shadow>
                        <tkUI:AttachedDropShadow BlurRadius="8" IsMasked="True"
                                   CornerRadius="2"
                                   Color="Black"
                                   Offset="3,4"
                                   Opacity="1"
                                   CastTo="{Binding ElementName=ShadowTarget1}"/>
                    </tkUI:Effects.Shadow>
                </controls:ImageEx>
            </Grid>

[michael-hawker]

Thanks for the report @OneFingerCodingWarrior, I'll play with this a bit and see if I can figure out what's going on. I wonder if the position of the ShadowTarget grid makes a difference here too... 🤔

[michael-hawker]

Able to reproduce in the Sample App with this code:

<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:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
  mc:Ignorable="d">

  <Grid>
      <Grid x:Name="ShadowTarget"/>
      <StackPanel>
          <Grid x:Name="imgGrid" Width="300" Height="300">
              <controls:ImageEx x:Name="img" Stretch="UniformToFill" EnableLazyLoading="True" Source="ms-appx:///Assets/Photos/NovemberHikeWaterfall.jpg">
                  <ui:Effects.Shadow>
                      <ui:AttachedDropShadow BlurRadius="8" IsMasked="True"
                                  CornerRadius="2"
                                  Color="Black"
                                  Offset="3,4"
                                  Opacity="1"
                                  CastTo="{Binding ElementName=ShadowTarget}"/>
                  </ui:Effects.Shadow>
              </controls:ImageEx>
          </Grid>

          <Grid x:Name="imgGrid1" Width="500" Height="300" Margin="10">
              <controls:ImageEx x:Name="img1" Stretch="Uniform" EnableLazyLoading="True" Source="ms-appx:///Assets/Photos/NovemberHikeWaterfall.jpg">
                  <ui:Effects.Shadow>
                      <ui:AttachedDropShadow BlurRadius="8" IsMasked="True"
                                  CornerRadius="2"
                                  Color="Black"
                                  Offset="3,4"
                                  Opacity="1"
                                  CastTo="{Binding ElementName=ShadowTarget}"/>
                  </ui:Effects.Shadow>
              </controls:ImageEx>
          </Grid>
      </StackPanel>
  </Grid>
</Page>

It's specific to ImageEx though as using a regular image seems fine:

  <Grid> 
      <Grid x:Name="ShadowTarget"/>
      <StackPanel>
          <Grid x:Name="imgGrid" Width="300" Height="300">
              <Image x:Name="img" Stretch="UniformToFill" Source="ms-appx:///Assets/Photos/NovemberHikeWaterfall.jpg">
                  <ui:Effects.Shadow>
                      <ui:AttachedDropShadow BlurRadius="8" IsMasked="True"
                                  CornerRadius="2"
                                  Color="Black"
                                  Offset="3,4"
                                  Opacity="1"
                                  CastTo="{Binding ElementName=ShadowTarget}"/>
                  </ui:Effects.Shadow>
              </Image>
          </Grid>

          <Grid x:Name="imgGrid1" Width="500" Height="300" Margin="10">
              <Image x:Name="img1" Stretch="Uniform" Source="ms-appx:///Assets/Photos/NovemberHikeWaterfall.jpg">
                  <ui:Effects.Shadow>
                      <ui:AttachedDropShadow BlurRadius="8" IsMasked="True"
                                  CornerRadius="2"
                                  Color="Black"
                                  Offset="3,4"
                                  Opacity="1"
                                  CastTo="{Binding ElementName=ShadowTarget}"/>
                  </ui:Effects.Shadow>
              </Image>
          </Grid>
      </StackPanel>
  </Grid>

@OneFingerCodingWarrior is there a reason you're using ImageEx here over Image? Also, FYI you only need one ShadowTarget area for your app/page.

I was also noticing some weird behavior with ImageEx not showing the image properly in the sample app on load until an interaction occurred if both have EnableLazyLoading="True". So seems like another issue, though only occurs when shadows attached...

[michael-hawker]

Looks like for the Lazy Loading scenario the Visual State isn't moving to the Loaded state as the Image.ImageOpened event isn't firing until whatever interaction (like resizing) occurs. Not sure why this is the case. FYI @h82258652.

Since we can await the setting of the image source with the call to SetSource going to see if we can just invalidate the arrange of the image when we do that to get it to re-layout and trigger the state change. Not sure if there's a better way, but that didn't work anyway. Wondering if we're hitting this issue, though I think that was for Silverlight as UWP doesn't have that option. It is working the first time the sample loads, just not on subsequent loads.

That's independent of the Shadow issue though, but hard to follow. Seems like we're missing something from the framework layer...

[michael-hawker]

Using the Win2D shadow works fine in this scenario:

<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:media="using:Microsoft.Toolkit.Uwp.UI.Media"
  xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
  mc:Ignorable="d">

  <Grid>  
      <Grid x:Name="ShadowTarget"/>
      <StackPanel>
          <Grid x:Name="imgGrid" Width="300" Height="300"> 
              <controls:ImageEx x:Name="img" Stretch="UniformToFill" EnableLazyLoading="True" Source="ms-appx:///Assets/Photos/NovemberHikeWaterfall.jpg">
                  <ui:Effects.Shadow>
                      <media:AttachedCardShadow BlurRadius="8"
                                  CornerRadius="2"
                                  Color="Black"
                                  Offset="3,4"
                                  Opacity="1"
                                  />
                  </ui:Effects.Shadow>
              </controls:ImageEx>
          </Grid>

          <Grid x:Name="imgGrid1" Width="500" Height="300" Margin="10">
              <controls:ImageEx x:Name="img1" Stretch="Uniform" EnableLazyLoading="True" Source="ms-appx:///Assets/Photos/NovemberHikeWaterfall.jpg">
                  <ui:Effects.Shadow>
                      <media:AttachedCardShadow BlurRadius="8"
                                  CornerRadius="2"
                                  Color="Black"
                                  Offset="3,4"
                                  Opacity="1"
                                  />
                  </ui:Effects.Shadow>
              </controls:ImageEx>
          </Grid>
      </StackPanel>
  </Grid>
</Page>

Though since it doesn't mask it doesn't work in the 2nd scenario, which is basically expected as ImageEx loads the Image within itself:

I'm assuming this has to do with how the mask is being calculated for ImageEx as we get it from the Image itself here:

WindowsCommunityToolkit/Microsoft.Toolkit.Uwp.UI.Controls.Core/ImageEx/ImageEx.Members.cs

Lines 35 to 40 in 0ce4553

	public override CompositionBrush GetAlphaMask()
	{
	if (IsInitialized && Image is Image image)
	{
	return image.GetAlphaMask();
	}

However we don't actually crop the image to the bounds of ImageEx itself in the UniformToFill scenario:

We do that to support transparent images to have fitted shadows like the Unicorn:

So, I think this is expected in all cases?

@OneFingerCodingWarrior what are you trying to do in a practical example? Is there a reason you can't use Image, alter the dimensions, use the AttachedCardShadow or something else?