阴影概述
平台 API:
AttachedCardShadow
,AttachedDropShadow
目前有两种类型的附加阴影可用,即 AttachedCardShadow
和 AttachedDropShadow
如果不介意 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
不需要包装要阴影化的元素;但是,它确实需要有可以将阴影投射到的其他元素。
这使得它比 AttachedCardShadow
和 DropShadowPanel
更复杂一些,但由于多个 AttachedDropShadow
元素可以共享同一图面,这使得它比其前置项性能更高。
注解
虽然 DropShadowPanel
限制了添加阴影的复杂性,但它显著加重了可视化树的深度和复杂性问题。 而 AttachedDropShadow
则需要提供应投射阴影的图面,例如通用背景元素。 这意味着每个阴影都可以使用相同的共享图面,而不是为每个阴影创建自己的背景元素(就像 DropShadowPanel
那样)。 虽然易用性稍有降低,但使性能得到提升。 但是,这也意味着对于某些操作元素的用例,它可能不那么灵活。 在这些情况下,我们建议尝试改用 AttachedCardShadow
,或在自定义控件中包装元素及其背景。