附加的投影

项目
01/05/2024

如果要将阴影应用于矩形或卡片样式元素，建议改用 AttachedCardShadow。

在以下情况下，最好使用 AttachedDropShadow：

元素没有常见的掩码形状
没有透明元素
没有对元素的位置进行动画处理/移动

可在常规 Attached Shadows 文档中找到有关这些比较的更多信息。

使用 AttachedDropShadow

创建阴影相当简单。首先，需要指定一个同级元素，使其位于你想应用投射阴影的所有元素的后面。这个单一元素可以托管其他元素投影所需的任意数量的阴影。

不能使用父元素，否则阴影将显示在控件之上。

通过目标元素设置，只需将阴影附加到目标面板中的任意数量的其他元素！

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

如果需要滚动元素及其阴影，请务必放置整个面板，包括 ScrollViewer 中的同级阴影目标。

阴影即资源

为每个阴影创建阴影定义可能有点麻烦。幸运的是，可以将阴影定义定义为资源，并在需要它的任何位置重复使用相同的阴影外观！

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

阴影即样式

还可以在页面的样式中使用同一资源（对于应用级，请参阅 AttachedCardShadow）。

或在样式中设置自己的定义，如下所述：

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

通过

附加的投影

使用 AttachedDropShadow

阴影即资源

阴影即样式

反馈

其他资源