Initial 'Effects' component + AttachedShadowBase/AttachedDropShadow

components/Effects/OpenSolution.bat

@@ -0,0 +1,3 @@
+@ECHO OFF
+
+powershell ..\..\tooling\ProjectHeads\GenerateSingleSampleHeads.ps1 -componentPath %CD% %*

components/Effects/samples/AttachedDropShadow.md

@@ -0,0 +1,56 @@
+---
+title: Attached Drop Shadow
+author: michael-hawker
+description: Allows many elements to share a common backdrop for casting shadows.
+keywords: Effects, Control, Layout
+dev_langs:
+  - csharp
+category: Extensions
+subcategory: Media
+discussion-id: 0
+issue-id: 0
+---
+
+# Attached Drop Shadow
+
+`AttachedDropShadow` allows many elements to share a common backdrop for casting shadows.
+
+If you are looking to apply shadows to rectangle or card style elements, it is recommended to use `AttachedCardShadow` instead.
+
+AttachedDropShadow is best used when:
+
+- elements don't have common masking shapes
+- you don't have a transparent element
+- you're not animating/moving the element's position
+
+You can find out more information about these comparisons in the general [`Attached Shadows`](AttachedShadows.md) documentation.
+
+## Using AttachedDropShadow
+
+Creating a shadow is fairly straight-forward. First, you need to designate a _sibling_ element to sit behind all elements
+which you'd like to have casing shadows. This single element can host as many shadows as required by other elements casting shadows.
+
+The parent element **cannot** be used, as otherwise your shadows will appear on top of your controls.
+
+With the target element setup, you can simply attach a shadow to any number of other elements within your panel you'd like!
+
+> [!SAMPLE AttachedDropShadowBasicSample]
+
+> [!NOTE]
+> If you need to scroll the element and its shadow, be sure to place your entire panel, including the sibling shadow target within the
+ScrollViewer.
+
+## Shadow as a Resource
+
+Creating a shadow definition for each Shadow can be a bit cumbersome. Fortunately, you can define a shadow definition as a resource
+and reuse the same shadow look-and-feel anywhere you need it!
+
+> [!SAMPLE AttachedDropShadowResourceSample]
+
+## Shadow as a Style
+
+You can also use that same resource within a style on your page (for app-level see `AttachedCardShadow`).
+
+Or define your own definition within your style as we've done here:
+
+> [!SAMPLE AttachedDropShadowStyleSample]

components/Effects/samples/AttachedDropShadowBasicSample.xaml

@@ -0,0 +1,32 @@
+<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
+<Page x:Class="EffectsExperiment.Samples.AttachedDropShadowBasicSample"
+      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:CommunityToolkit.WinUI"
+      mc:Ignorable="d">
+
+    <Grid>
+        <!--
+            The ShadowTarget Border here is a *sibling* element behind where our elements which will cast
+            shadows are located, this is important as otherwise if we used a parent element the
+            shadows would appear on top of our elements instead!
+        -->
+        <Border x:Name="ShadowTarget" />
+        <Border Width="100"
+                Height="100"
+                BorderBrush="White"
+                BorderThickness="1"
+                CornerRadius="32">
+            <Border.Background>
+                <ImageBrush ImageSource="ms-appx:///Assets/Llama.jpg" />
+            </Border.Background>
+            <ui:Effects.Shadow>
+                <ui:AttachedDropShadow CastTo="{x:Bind ShadowTarget}"
+                                       CornerRadius="32"
+                                       Offset="4,4" />
+            </ui:Effects.Shadow>
+        </Border>
+    </Grid>
+</Page>

components/Effects/samples/AttachedDropShadowBasicSample.xaml.cs

@@ -0,0 +1,14 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+namespace EffectsExperiment.Samples;
+
+[ToolkitSample(id: nameof(AttachedDropShadowBasicSample), "Basic Attached Drop Shadow", description: "A sample for showing how to create an AttachedDropShadow on an element.")]
+public sealed partial class AttachedDropShadowBasicSample : Page
+{
+    public AttachedDropShadowBasicSample()
+    {
+        this.InitializeComponent();
+    }
+}

components/Effects/samples/AttachedDropShadowResourceSample.xaml

@@ -0,0 +1,32 @@
+<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
+<Page x:Class="EffectsExperiment.Samples.AttachedDropShadowResourceSample"
+      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:CommunityToolkit.WinUI"
+      mc:Ignorable="d">
+
+    <Page.Resources>
+        <!--  We expect all our elements to bind to the same target with this resource  -->
+        <ui:AttachedDropShadow x:Key="CommonShadow"
+                               CastTo="{x:Bind ShadowTarget}"
+                               Offset="4" />
+    </Page.Resources>
+
+
+    <Grid>
+        <Border x:Name="ShadowTarget" />
+        <StackPanel Orientation="Horizontal"
+                    Spacing="32">
+            <Image Width="100"
+                   Height="100"
+                   ui:Effects.Shadow="{StaticResource CommonShadow}"
+                   Source="ms-appx:///Assets/Llama.jpg" />
+            <Image Width="100"
+                   Height="100"
+                   ui:Effects.Shadow="{StaticResource CommonShadow}"
+                   Source="ms-appx:///Assets/Llama.jpg" />
+        </StackPanel>
+    </Grid>
+</Page>

components/Effects/samples/AttachedDropShadowResourceSample.xaml.cs

@@ -0,0 +1,14 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+namespace EffectsExperiment.Samples;
+
+[ToolkitSample(id: nameof(AttachedDropShadowResourceSample), "Attached Drop Shadow as Resource", description: "A sample for showing how to create an AttachedDropShadow on an element when defined as a resource.")]
+public sealed partial class AttachedDropShadowResourceSample : Page
+{
+    public AttachedDropShadowResourceSample()
+    {
+        this.InitializeComponent();
+    }
+}

components/Effects/samples/AttachedDropShadowStyleSample.xaml

@@ -0,0 +1,43 @@
+<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
+<Page x:Class="EffectsExperiment.Samples.AttachedDropShadowStyleSample"
+      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:CommunityToolkit.WinUI"
+      mc:Ignorable="d">
+
+    <Page.Resources>
+        <!--  First define a shadow resource with a target as we did in the previous example  -->
+        <ui:AttachedDropShadow x:Key="CommonShadow"
+                               CastTo="{x:Bind ShadowTarget}"
+                               Offset="4" />
+
+        <!--  Because we have to specify the shadow target, this style can at most be at the Page level  -->
+        <Style BasedOn="{StaticResource DefaultButtonStyle}"
+               TargetType="Button">
+            <!--  We must use an existing resource (defined above) as a style value here  -->
+            <Setter Property="ui:Effects.Shadow" Value="{StaticResource CommonShadow}" />
+            <Setter Property="HorizontalAlignment" Value="Center" />
+            <!--
+                We set a solid color for the background button otherwise the shadow bleeds through as
+                the new style is transparent. See AttachedCardShadow for proper element clipping.
+            -->
+            <Setter Property="Background" Value="Red" />
+        </Style>
+    </Page.Resources>
+
+
+    <Grid>
+        <Border x:Name="ShadowTarget" />
+        <StackPanel VerticalAlignment="Center"
+                    Spacing="32">
+            <!--
+                All buttons on this page have the shadow from the common style!
+                The Shadow definition is Shared!
+            -->
+            <Button Content="I Have a Shadow!" />
+            <Button Content="I Also have a Shadow!" />
+        </StackPanel>
+    </Grid>
+</Page>

components/Effects/samples/AttachedDropShadowStyleSample.xaml.cs

@@ -0,0 +1,14 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+namespace EffectsExperiment.Samples;
+
+[ToolkitSample(id: nameof(AttachedDropShadowStyleSample), "Attached Drop Shadow as Style", description: "A sample for showing how to create an AttachedDropShadow when used in a Style.")]
+public sealed partial class AttachedDropShadowStyleSample : Page
+{
+    public AttachedDropShadowStyleSample()
+    {
+        this.InitializeComponent();
+    }
+}