Clip inner content from AttachedCardShadow using CompositionMaskBrush

[Ryken100]

Fixes #4410

This PR adds the option to clip inner content from shadows using CompositionMaskBrush, which may improve performance over the default CompositionGeometricClip method.

PR Type

What kind of change does this PR introduce?

• Feature

• Sample app changes

What is the current behavior?

AttachedCardShadow only clips its inner content using CompositionGeometricClip, which can have poor framerates when several shadows are on screen at a time.

What is the new behavior?

Added the option to clip inner shadow content using CompositionMaskBrush, which improves performance over CompositionGeometricClip when several shadows are on screen at a time, but looks slightly worse as the boundary of the inner clipped are lacks anti aliasing.

An InnerContentClipMode enum was added, as well as an AttachedCardShadow.InnerContentClipMode property, making it possible to choose between CompositionGeometricClip and CompositionMaskBrush clipping modes.

When CompositionMaskBrush is selected, a CompositionMaskBrush is created, with a CompositionSurfaceBrush rendering a hollow rounded rectangle set as its Mask and a CompositionSurfaceBrush rendering the SpriteVisual with the DropShadow set as its Source. Then an additional SpriteVisual is created which renders the CompositionMaskBrush.

The CompositionMaskBrush has slightly worse visuals than CompositionGeometricClip, as the corners of the inner clipped area lack anti aliasing. This is difficult to notice when the shadow has low opacity, but can stand out with high opacity shadows. For that reason, this PR keeps CompositionGeometricClip as the default method, while CompositionMaskBrush can be selected manually.

PR Checklist

Please check if your PR fulfills the following requirements:

• Tested code with current supported SDKs
• Sample in sample app has been added / updated (for bug fixes / features)
• Header has been added to all new source files (run build/UpdateHeaders.bat)
• Contains NO breaking changes

[ghost]

Thanks Ryken100 for opening a Pull Request! The reviewers will test the PR and highlight if there is any conflict or changes required. If the PR is approved we will proceed to merge the pull request 🙌

[net-foundation-cla]

All CLA requirements met.

[net-foundation-cla]

Thank you for your submission, we really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

❌ Ryken100 sign now
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[michael-hawker]

@Ryken100 looks like this is based off your other nine grid PR, mind rebasing with just the relevant commits for this new feature (to keep history cleaner)? Also, can we pull someone else in your team to help review too, thanks!

@Arlodotexe @XAML-Knight feel free for one of you to grab this on your plate to review as well.

[Ryken100]

@Ryken100 looks like this is based off your other nine grid PR, mind rebasing with just the relevant commits for this new feature (to keep history cleaner)? Also, can we pull someone else in your team to help review too, thanks!

I've rebased it :)

[Arlodotexe]

@michael-hawker Looks like something happened to this page, changing the options only affects one of the images. Easy to repro in the live sample app, so this PR isn't the cause. Might need to file a new issue.

[michael-hawker]

@michael-hawker Looks like something happened to this page, changing the options only affects one of the images. Easy to repro in the live sample app, so this PR isn't the cause. Might need to file a new issue.

That's the current expected behavior, they're only tied to one element in the XAML here:

WindowsCommunityToolkit/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Shadows/AttachedShadowCompositionXaml.bind

Lines 41 to 57 in 00e9790

	<Rectangle RadiusX="32" RadiusY="32"
	Height="100" Width="100"
	Stroke="Blue" StrokeThickness="1">
	<Rectangle.Fill>
	<ImageBrush ImageSource="ms-appx:///Assets/Photos/Owl.jpg"/>
	</Rectangle.Fill>
	<ui:Effects.Shadow>
	<!-- If doing a rectangular/rounded shadow, set IsMasked to False for better performance or switch to AttachedCardShadow -->
	<ui:AttachedDropShadow BlurRadius="@[BlurRadius:DoubleSlider:8.0:0.0-10.0]"
	CornerRadius="32"
	IsMasked="False"
	Color="@[Color:Brush:Black]"
	Offset="@[Offset:Vector3:4,4]"
	Opacity="@[Opacity:DoubleSlider:1.0:0.0-1.0]"
	CastTo="{Binding ElementName=ShadowTarget}"/>
	</ui:Effects.Shadow>
	</Rectangle>

We'll be re-working these all for 8.0 anyway with the new sample infrastructure from Labs, so don't think we need an issue/tracking for now.

[Sergio0694]

Some minor nits, but otherwise LGTM! 🚀

[ghost]

This PR has been marked as "needs attention 👋" and awaiting a response from the team.

[michael-hawker]

@Sergio0694 looks good to you now? I think @Ryken100 has addressed your comments?

[Sergio0694]

LGTM, ship it!