阴影概述

平台 API:AttachedCardShadowAttachedDropShadow

目前有两种类型的附加阴影可用,即 AttachedCardShadowAttachedDropShadow 如果不介意 Win2D 的依赖项,建议尽可能使用 AttachedCardShadow。 假设这些元素为圆角矩形,则 AttachedCardShadow 可提供更易于使用的体验,更高性能且更易于应用于整个元素集。 AttachedDropShadow 提供掩码支持,可以在任何 UWP 应用中使用,而无需添加额外的依赖项。

功能比较

下表概述了每种阴影类型的各种功能,而且与以前的 DropShadowPanel 实现进行了比较:

功能 AttachedCardShadow AttachedDropShadow DropShadowPanel(已弃用/已删除)
依赖项/NuGet 包 🟡 Win2D 通过
CommunityToolkit.WinUI.Media
✅ 仅限框架(合成效果)
CommunityToolkit.WinUI.Effects
✅ 仅限框架(合成效果)
Microsoft.Toolkit.Uwp.UI.Controls (旧版)
内联合成 +
Win2D 剪辑几何图形
合成方式
目标元素背景
合成方式
ContentControl 容器
修改可视化树 ✅ 否 🟡 通常需要单个目标元素,即使对于多个阴影也是如此 ❌ 单独包装需要阴影的每个元素
额外的可视化树深度 ✅ 0 🟡 每个同级元素 1 个,以便将一个或多个阴影投射到 每个阴影元素 4 个
掩码/几何图形 🟡 仅限矩形/圆角矩形 ✅ 可以屏蔽图像、文本和形状(性能损失) ✅ 可以屏蔽图像、文本和形状(性能损失)
性能 ✅ 快速,应用矩形剪切的几何图形 🟡 较慢,尤其是在掩码时(默认值):
可以使用圆角矩形优化
❌ 最慢,没有针对圆角矩形的优化
ResourceDictionary 支持 ✅ 是 ✅ 是 ❌ 受限,通过完整的自定义控件样式 +
仍需要包装要应用的每个元素
样式中可用 ✅ 是,任何位置,包括应用级别 🟡 是,但由于元素目标的原因,范围有限 ❌ 否
支持透明元素 ✅ 是,阴影被剪裁并且不可见 ❌ 否,阴影通过透明元素显示 ❌ 否,阴影通过透明元素显示
动画支持 ✅ 是,在 XAML 中通过 AnimationSet 🟡 部分,转换/移动元素可能会使阴影不同步 ❌ 否

AttachedCardShadow (Win2D)

AttachedCardShadow 是最易于使用和性能最高的阴影。 如果 Win2D 依赖项不会造成问题,建议尽可能使用它。 唯一的缺点是需要额外的依赖项,并且它仅支持矩形和圆角矩形几何图形(如上表所述)。

AttachedCardShadow 的最大好处是,无需额外图面或元素即可添加阴影。 这降低了开发时必须面对的复杂性,并允许在开发过程中的任何时刻轻松添加阴影。 它还支持透明元素,不会在这些元素后面显示阴影!

AttachedDropShadow(合成)

AttachedDropShadow 为各种元素提供掩码支持,包括透明图像、形状和文本。 对非矩形或圆角矩形的自定义形状进行掩码处理是使用 AttachedDropShadow 的主要场景。 与其前身 DropShadowPanel 不同,AttachedDropShadow 不需要包装要阴影化的元素;但是,它确实需要有可以将阴影投射到的其他元素。

这使得它比 AttachedCardShadowDropShadowPanel 更复杂一些,但由于多个 AttachedDropShadow 元素可以共享同一图面,这使得它比其前置项性能更高。

注解

虽然 DropShadowPanel 限制了添加阴影的复杂性,但它显著加重了可视化树的深度和复杂性问题。 而 AttachedDropShadow 则需要提供应投射阴影的图面,例如通用背景元素。 这意味着每个阴影都可以使用相同的共享图面,而不是为每个阴影创建自己的背景元素(就像 DropShadowPanel 那样)。 虽然易用性稍有降低,但使性能得到提升。 但是,这也意味着对于某些操作元素的用例,它可能不那么灵活。 在这些情况下,我们建议尝试改用 AttachedCardShadow,或在自定义控件中包装元素及其背景。