Don't inherit from AttachedCardShadowBase

Author: chris-blackman

Microsoft.Toolkit.Uwp.UI.Media/Enums/InnerContentClipMode.cs

@@ -7,7 +7,7 @@
 namespace Microsoft.Toolkit.Uwp.UI.Media
 {
     /// <summary>
-    /// The method that shadows deriving from <see cref="AttachedCardShadowBase"/> use when clipping their inner content.
+    /// The method that each instance of <see cref="AttachedCardShadow"/> uses when clipping its inner content.
     /// </summary>
     public enum InnerContentClipMode
     {

Microsoft.Toolkit.Uwp.UI.Media/Shadows/AttachedCardShadow.cs

@@ -8,6 +8,7 @@
 using Windows.UI;
 using Windows.UI.Composition;
 using Windows.UI.Xaml;
+using Windows.UI.Xaml.Hosting;
 
 namespace Microsoft.Toolkit.Uwp.UI.Media
 {
@@ -20,9 +21,18 @@ namespace Microsoft.Toolkit.Uwp.UI.Media
     public sealed class AttachedCardShadow : AttachedShadowBase
     {
         private const float MaxBlurRadius = 72;
-        private static readonly TypedResourceKey<CompositionGeometricClip> ClipResourceKey = "Clip";
 
+        private static readonly TypedResourceKey<CompositionGeometricClip> ClipResourceKey = "Clip";
         private static readonly TypedResourceKey<CompositionPathGeometry> PathGeometryResourceKey = "PathGeometry";
+        private static readonly TypedResourceKey<CompositionMaskBrush> OpacityMaskBrushResourceKey = "OpacityMask";
+        private static readonly TypedResourceKey<ShapeVisual> OpacityMaskShapeVisualResourceKey = "OpacityMaskShapeVisual";
+        private static readonly TypedResourceKey<CompositionRoundedRectangleGeometry> OpacityMaskGeometryResourceKey = "OpacityMaskGeometry";
+        private static readonly TypedResourceKey<CompositionSpriteShape> OpacityMaskSpriteShapeResourceKey = "OpacityMaskSpriteShape";
+        private static readonly TypedResourceKey<CompositionVisualSurface> OpacityMaskShapeVisualSurfaceResourceKey = "OpacityMaskShapeVisualSurface";
+        private static readonly TypedResourceKey<CompositionSurfaceBrush> OpacityMaskShapeVisualSurfaceBrushResourceKey = "OpacityMaskShapeVisualSurfaceBrush";
+        private static readonly TypedResourceKey<CompositionVisualSurface> OpacityMaskVisualSurfaceResourceKey = "OpacityMaskVisualSurface";
+        private static readonly TypedResourceKey<CompositionSurfaceBrush> OpacityMaskSurfaceBrushResourceKey = "OpacityMaskSurfaceBrush";
+        private static readonly TypedResourceKey<SpriteVisual> OpacityMaskVisualResourceKey = "OpacityMaskVisual";
         private static readonly TypedResourceKey<CompositionRoundedRectangleGeometry> RoundedRectangleGeometryResourceKey = "RoundedGeometry";
         private static readonly TypedResourceKey<CompositionSpriteShape> ShapeResourceKey = "Shape";
         private static readonly TypedResourceKey<ShapeVisual> ShapeVisualResourceKey = "ShapeVisual";
@@ -39,6 +49,16 @@ public sealed class AttachedCardShadow : AttachedShadowBase
                 typeof(AttachedCardShadow),
                 new PropertyMetadata(4d, OnDependencyPropertyChanged)); // Default WinUI ControlCornerRadius is 4
 
+        /// <summary>
+        /// The <see cref="DependencyProperty"/> for <see cref="InnerContentClipMode"/>.
+        /// </summary>
+        public static readonly DependencyProperty InnerContentClipModeProperty =
+            DependencyProperty.Register(
+                nameof(InnerContentClipMode),
+                typeof(InnerContentClipMode),
+                typeof(AttachedCardShadowBase),
+                new PropertyMetadata(InnerContentClipMode.CompositionGeometricClip, OnDependencyPropertyChanged));
+
         /// <summary>
         /// Gets or sets the roundness of the shadow's corners.
         /// </summary>
@@ -48,72 +68,125 @@ public double CornerRadius
             set => SetValue(CornerRadiusProperty, value);
         }
 
+        /// <summary>
+        /// Gets or sets the mode use to clip inner content from the shadow.
+        /// </summary>
+        public InnerContentClipMode InnerContentClipMode
+        {
+            get => (InnerContentClipMode)GetValue(InnerContentClipModeProperty);
+            set => SetValue(InnerContentClipModeProperty, value);
+        }
+
         /// <inheritdoc/>
         public override bool IsSupported => SupportsCompositionVisualSurface;
 
         /// <inheritdoc/>
         protected internal override bool SupportsOnSizeChangedEvent => true;
 
         /// <inheritdoc/>
-        protected override void OnPropertyChanged(AttachedShadowElementContext context, DependencyProperty property, object oldValue, object newValue)
+        protected internal override void OnElementContextInitialized(AttachedShadowElementContext context)
         {
-            if (property == CornerRadiusProperty)
+            UpdateVisualOpacityMask(context);
+            base.OnElementContextInitialized(context);
+        }
+
+        /// <inheritdoc/>
+        protected override void SetElementChildVisual(AttachedShadowElementContext context)
+        {
+            if (context.TryGetResource(OpacityMaskShapeVisualSurfaceBrushResourceKey, out var opacityMask))
             {
-                var geometry = context.GetResource(RoundedRectangleGeometryResourceKey);
-                if (geometry != null)
-                {
-                    geometry.CornerRadius = new Vector2((float)(double)newValue);
-                }
+                var visualSurface = context.GetResource(OpacityMaskVisualSurfaceResourceKey) ??
+                    context.AddResource(OpacityMaskVisualSurfaceResourceKey, context.Compositor.CreateVisualSurface());
+                visualSurface.SourceVisual = context.SpriteVisual;
+                context.SpriteVisual.RelativeSizeAdjustment = Vector2.Zero;
+                context.SpriteVisual.Size = new Vector2((float)context.Element.ActualWidth, (float)context.Element.ActualHeight);
+                visualSurface.SourceOffset = new Vector2(-MaxBlurRadius);
+                visualSurface.SourceSize = new Vector2((float)context.Element.ActualWidth, (float)context.Element.ActualHeight) + new Vector2(MaxBlurRadius * 2);
 
-                UpdateShadowClip(context);
+                var surfaceBrush = context.GetResource(OpacityMaskSurfaceBrushResourceKey) ??
+                    context.AddResource(OpacityMaskSurfaceBrushResourceKey, context.Compositor.CreateSurfaceBrush());
+                surfaceBrush.Surface = visualSurface;
+                surfaceBrush.Stretch = CompositionStretch.None;
+
+                CompositionMaskBrush maskBrush = context.GetResource(OpacityMaskBrushResourceKey) ??
+                    context.AddResource(OpacityMaskBrushResourceKey, context.Compositor.CreateMaskBrush());
+                maskBrush.Source = surfaceBrush;
+                maskBrush.Mask = opacityMask;
+
+                var visual = context.GetResource(OpacityMaskVisualResourceKey) ??
+                    context.AddResource(OpacityMaskVisualResourceKey, context.Compositor.CreateSpriteVisual());
+                visual.RelativeSizeAdjustment = Vector2.One;
+                visual.Offset = new Vector3(-MaxBlurRadius, -MaxBlurRadius, 0);
+                visual.Size = new Vector2(MaxBlurRadius * 2);
+                visual.Brush = maskBrush;
+                ElementCompositionPreview.SetElementChildVisual(context.Element, visual);
             }
             else
             {
-                base.OnPropertyChanged(context, property, oldValue, newValue);
+                base.SetElementChildVisual(context);
+                context.RemoveAndDisposeResource(OpacityMaskVisualSurfaceResourceKey);
+                context.RemoveAndDisposeResource(OpacityMaskSurfaceBrushResourceKey);
+                context.RemoveAndDisposeResource(OpacityMaskVisualResourceKey);
+                context.RemoveAndDisposeResource(OpacityMaskBrushResourceKey);
             }
         }
 
-        /// <inheritdoc/>
-        protected override CompositionBrush GetShadowMask(AttachedShadowElementContext context)
+        /// <summary>
+        /// Updates the <see cref="CompositionBrush"/> used to mask <paramref name="context"/>.<see cref="AttachedShadowElementContext.SpriteVisual">SpriteVisual</see>.
+        /// </summary>
+        /// <param name="context">The <see cref="AttachedShadowElementContext"/> whose <see cref="SpriteVisual"/> will be masked.</param>
+        private void UpdateVisualOpacityMask(AttachedShadowElementContext context)
         {
-            if (!SupportsCompositionVisualSurface)
+            if (InnerContentClipMode != InnerContentClipMode.CompositionMaskBrush)
             {
-                return null;
+                context.RemoveAndDisposeResource(OpacityMaskShapeVisualResourceKey);
+                context.RemoveAndDisposeResource(OpacityMaskGeometryResourceKey);
+                context.RemoveAndDisposeResource(OpacityMaskSpriteShapeResourceKey);
+                context.RemoveAndDisposeResource(OpacityMaskShapeVisualSurfaceResourceKey);
+                context.RemoveAndDisposeResource(OpacityMaskShapeVisualSurfaceBrushResourceKey);
+                return;
             }
 
-            // Create rounded rectangle geometry and add it to a shape
-            var geometry = context.GetResource(RoundedRectangleGeometryResourceKey) ?? context.AddResource(
-                RoundedRectangleGeometryResourceKey,
-                context.Compositor.CreateRoundedRectangleGeometry());
-            geometry.CornerRadius = new Vector2((float)CornerRadius);
+            var shapeVisual = context.GetResource(OpacityMaskShapeVisualResourceKey) ??
+                context.AddResource(OpacityMaskShapeVisualResourceKey, context.Compositor.CreateShapeVisual());
 
-            var shape = context.GetResource(ShapeResourceKey) ?? context.AddResource(ShapeResourceKey, context.Compositor.CreateSpriteShape(geometry));
-            shape.FillBrush = context.Compositor.CreateColorBrush(Colors.Black);
+            CompositionRoundedRectangleGeometry geom = context.GetResource(OpacityMaskGeometryResourceKey) ??
+                context.AddResource(OpacityMaskGeometryResourceKey, context.Compositor.CreateRoundedRectangleGeometry());
+            CompositionSpriteShape shape = context.GetResource(OpacityMaskSpriteShapeResourceKey) ??
+                context.AddResource(OpacityMaskSpriteShapeResourceKey, context.Compositor.CreateSpriteShape(geom));
 
-            // Create a ShapeVisual so that our geometry can be rendered to a visual
-            var shapeVisual = context.GetResource(ShapeVisualResourceKey) ??
-                              context.AddResource(ShapeVisualResourceKey, context.Compositor.CreateShapeVisual());
-            shapeVisual.Shapes.Add(shape);
+            geom.Offset = new Vector2(MaxBlurRadius / 2);
+            geom.CornerRadius = new Vector2((MaxBlurRadius / 2) + (float)CornerRadius);
+            shape.StrokeThickness = MaxBlurRadius;
+            shape.StrokeBrush = shape.StrokeBrush ?? context.Compositor.CreateColorBrush(Colors.Black);
 
-            // Create a CompositionVisualSurface, which renders our ShapeVisual to a texture
-            var visualSurface = context.GetResource(VisualSurfaceResourceKey) ??
-                                context.AddResource(VisualSurfaceResourceKey, context.Compositor.CreateVisualSurface());
-            visualSurface.SourceVisual = shapeVisual;
+            if (!shapeVisual.Shapes.Contains(shape))
+            {
+                shapeVisual.Shapes.Add(shape);
+            }
 
-            // Create a CompositionSurfaceBrush to render our CompositionVisualSurface to a brush.
-            // Now we have a rounded rectangle brush that can be used on as the mask for our shadow.
-            var surfaceBrush = context.GetResource(SurfaceBrushResourceKey) ?? context.AddResource(
-                SurfaceBrushResourceKey,
-                context.Compositor.CreateSurfaceBrush(visualSurface));
+            var visualSurface = context.GetResource(OpacityMaskShapeVisualSurfaceResourceKey) ??
+                context.AddResource(OpacityMaskShapeVisualSurfaceResourceKey, context.Compositor.CreateVisualSurface());
+            visualSurface.SourceVisual = shapeVisual;
 
-            geometry.Size = visualSurface.SourceSize = shapeVisual.Size = context.Element.RenderSize.ToVector2();
+            geom.Size = new Vector2((float)context.Element.ActualWidth, (float)context.Element.ActualHeight) + new Vector2(MaxBlurRadius);
+            shapeVisual.Size = visualSurface.SourceSize = new Vector2((float)context.Element.ActualWidth, (float)context.Element.ActualHeight) + new Vector2(MaxBlurRadius * 2);
 
-            return surfaceBrush;
+            var surfaceBrush = context.GetResource(OpacityMaskShapeVisualSurfaceBrushResourceKey) ??
+                context.AddResource(OpacityMaskShapeVisualSurfaceBrushResourceKey, context.Compositor.CreateSurfaceBrush());
+            surfaceBrush.Surface = visualSurface;
         }
 
         /// <inheritdoc/>
         protected override CompositionClip GetShadowClip(AttachedShadowElementContext context)
         {
+            if (InnerContentClipMode != InnerContentClipMode.CompositionGeometricClip)
+            {
+                context.RemoveAndDisposeResource(PathGeometryResourceKey);
+                context.RemoveAndDisposeResource(ClipResourceKey);
+                return null;
+            }
+
             // The way this shadow works without the need to project on another element is because
             // we're clipping the inner part of the shadow which would be cast on the element
             // itself away. This method is creating an outline so that we are only showing the
@@ -145,6 +218,72 @@ protected override CompositionClip GetShadowClip(AttachedShadowElementContext co
         }
 
         /// <inheritdoc/>
+        protected override CompositionBrush GetShadowMask(AttachedShadowElementContext context)
+        {
+            if (!SupportsCompositionVisualSurface)
+            {
+                return null;
+            }
+
+            // Create rounded rectangle geometry and add it to a shape
+            var geometry = context.GetResource(RoundedRectangleGeometryResourceKey) ?? context.AddResource(
+                RoundedRectangleGeometryResourceKey,
+                context.Compositor.CreateRoundedRectangleGeometry());
+            geometry.CornerRadius = new Vector2((float)CornerRadius);
+
+            var shape = context.GetResource(ShapeResourceKey) ?? context.AddResource(ShapeResourceKey, context.Compositor.CreateSpriteShape(geometry));
+            shape.FillBrush = context.Compositor.CreateColorBrush(Colors.Black);
+
+            // Create a ShapeVisual so that our geometry can be rendered to a visual
+            var shapeVisual = context.GetResource(ShapeVisualResourceKey) ??
+                              context.AddResource(ShapeVisualResourceKey, context.Compositor.CreateShapeVisual());
+            shapeVisual.Shapes.Add(shape);
+
+            // Create a CompositionVisualSurface, which renders our ShapeVisual to a texture
+            var visualSurface = context.GetResource(VisualSurfaceResourceKey) ??
+                                context.AddResource(VisualSurfaceResourceKey, context.Compositor.CreateVisualSurface());
+            visualSurface.SourceVisual = shapeVisual;
+
+            // Create a CompositionSurfaceBrush to render our CompositionVisualSurface to a brush.
+            // Now we have a rounded rectangle brush that can be used on as the mask for our shadow.
+            var surfaceBrush = context.GetResource(SurfaceBrushResourceKey) ?? context.AddResource(
+                SurfaceBrushResourceKey,
+                context.Compositor.CreateSurfaceBrush(visualSurface));
+
+            geometry.Size = visualSurface.SourceSize = shapeVisual.Size = context.Element.RenderSize.ToVector2();
+
+            return surfaceBrush;
+        }
+
+        /// <inheritdoc/>
+        protected override void OnPropertyChanged(AttachedShadowElementContext context, DependencyProperty property, object oldValue, object newValue)
+        {
+            if (property == CornerRadiusProperty)
+            {
+                UpdateShadowClip(context);
+                UpdateVisualOpacityMask(context);
+
+                var geometry = context.GetResource(RoundedRectangleGeometryResourceKey);
+                if (geometry != null)
+                {
+                    geometry.CornerRadius = new Vector2((float)(double)newValue);
+                }
+            }
+            else if (property == InnerContentClipModeProperty)
+            {
+                UpdateShadowClip(context);
+                UpdateVisualOpacityMask(context);
+                SetElementChildVisual(context);
+            }
+            else
+            {
+                base.OnPropertyChanged(context, property, oldValue, newValue);
+            }
+
+            base.OnPropertyChanged(context, property, oldValue, newValue);
+        }
+
+        /// <inheritdoc />
         protected internal override void OnSizeChanged(AttachedShadowElementContext context, Size newSize, Size previousSize)
         {
             var sizeAsVec2 = newSize.ToVector2();