Attached Card Shadow

The AttachedCardShadow is the easiest to use and most performant shadow. It is recommended to use it where possible, if taking a Win2D dependency is not a concern. Its only drawbacks are the extra dependency required and that it only supports rectangular and rounded-rectangular geometries (as described in the table above).

The great benefit to the AttachedCardShadow is that no extra surface or element is required to add the shadow. This reduces the complexity required in development and allows shadows to easily be added at any point in the development process. It also supports transparent elements, without displaying the shadow behind them!

The example shows how easy it is to not only apply an AttachedCardShadow to an element, but use it in a style to apply to multiple elements as well:

<Page x:Class="MediaExperiment.Samples.Shadows.AttachedCardShadowBasicSample"
      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:media="using:CommunityToolkit.WinUI.Media"
      xmlns:ui="using:CommunityToolkit.WinUI"
      mc:Ignorable="d">

    <Page.Resources>
        <media:AttachedCardShadow x:Key="CommonShadow"
                                  Offset="4" />

        <Style BasedOn="{StaticResource DefaultButtonStyle}"
               TargetType="Button">
            <Setter Property="ui:Effects.Shadow" Value="{StaticResource CommonShadow}" />
            <Setter Property="HorizontalAlignment" Value="Center" />
        </Style>
    </Page.Resources>

    <StackPanel VerticalAlignment="Center"
                Spacing="32">
        <Button Content="I Have a Shadow!" />
        <Image Width="100"
               Height="100"
               ui:Effects.Shadow="{StaticResource CommonShadow}"
               Source="ms-appx:///Assets/OwlShadow.jpg" />
    </StackPanel>
</Page>

// 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.

using CommunityToolkit.WinUI.Media;

namespace MediaExperiment.Samples.Shadows;

[ToolkitSample(id: nameof(AttachedCardShadowBasicSample), "Basic Attached Card Shadow", description: $"A sample for showing how to create an {nameof(AttachedCardShadow)} on an element.")]
public sealed partial class AttachedCardShadowBasicSample : Page
{
    public AttachedCardShadowBasicSample()
    {
        this.InitializeComponent();
    }
}

You can see the AttachedCardShadow defined as a resource so it can be shared across multiple components. It also supports binding/animations to update at runtime.

Layer Ordering

There can be cases, especially direct usage on untemplated elements, where the AttachedCardShadow may require a parent element to create the desired effect, as seen in this example:

<Page x:Class="MediaExperiment.Samples.Shadows.AttachedCardShadowUntemplatedSample"
      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:media="using:CommunityToolkit.WinUI.Media"
      xmlns:ui="using:CommunityToolkit.WinUI"
      mc:Ignorable="d">

    <!--
        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 Width="100"
            Height="100">
        <Border BorderBrush="White"
                BorderThickness="1"
                CornerRadius="32">
            <Border.Background>
                <ImageBrush ImageSource="ms-appx:///Assets/OwlShadow.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>
</Page>

// 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.

using CommunityToolkit.WinUI.Media;

namespace MediaExperiment.Samples.Shadows;

[ToolkitSample(id: nameof(AttachedCardShadowUntemplatedSample), "Untemplated Attached Card Shadow", description: $"A sample for showing how to create an {nameof(AttachedCardShadow)} on an untemplated element.")]
public sealed partial class AttachedCardShadowUntemplatedSample : Page
{
    public AttachedCardShadowUntemplatedSample()
    {
        this.InitializeComponent();
    }
}