Edit

Share via

Attached Drop Shadow

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 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!

<!--  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="ExtensionsExperiment.Samples.Shadows.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="{ThemeResource CardStrokeColorDefaultBrush}"
                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>

// 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 ExtensionsExperiment.Samples.Shadows;

[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();
    }
}

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!

<!--  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="ExtensionsExperiment.Samples.Shadows.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>

// 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 ExtensionsExperiment.Samples.Shadows;

[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();
    }
}

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:

<!--  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="ExtensionsExperiment.Samples.Shadows.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 AccentButtonStyle}"
               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" />
        </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>

// 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 ExtensionsExperiment.Samples.Shadows;

[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();
    }
}