创建阴影
目前有两种类型的附加阴影:AttachedCardShadow
和AttachedDropShadow
。
如果不介意添加Win2D依赖项,建议尽可能使用AttachedCardShadow
。AttachedCardShadow
提供了一种更易于使用的体验,其性能更高,更易于应用于所有的控件,但前提是这些控件的形状是圆角矩形。AttachedDropShadow
提供蒙版支持,可在任何UWP/WinUI 3应用程序中使用,而无需添加额外的依赖性。
功能对比
下表概述了每种阴影类型的各种功能,并与以前的DropShadowPanel
进行了比较:
功能 | AttachedCardShadow | AttachedDropShadow | DropShadowPanel(已移除) |
---|---|---|---|
依赖NuGet包 | 🟡 通过CommunityToolkit.WinUI.Media 引用Win2D | 🟢 只使用自带的CompositionCommunityToolkit.WinUI.Effects | 🟢 只使用自带的CompositionMicrosoft.Toolkit.Uwp.UI.Controls (旧UWP依赖) |
阴影绘制层 | 自带的Composition和Win2D剪裁几何图形绘制 | 通过目标控件的背景Composition绘制 | 通过ContentControl 承载的Composition绘制 |
修改视觉树 | 🟢 不修改 | 🟡 通常需要一个目标控件(可能承载等多个阴影) | 🔴 对需要阴影的每个控件进行单独包装 |
额外视觉树深度 | 🟢 0 | 🟡 每组同级元素共用1个 | 🔴 每个元素4个 |
支持控件的几何形状/蒙版 | 🟡 仅圆角矩形 | 🟢 任何形状(与性能挂钩) | 🟢 任何形状(与性能挂钩) |
性能 | 🟢 高,因为是矩形蒙版 | 🟡 较低,但圆角矩形有优化 | 🔴 最低,圆角矩形无优化 |
ResourceDictionary的支持 | 🟢 支持 | 🟢 支持 | 🔴 有限支持,通过完整的自定义控件样式 并且仍需对每个元素进行包装以应用 |
可以在Style里使用 | 🟢 可以,包括应用层面的Style | 🟡 可以,但由于元素目标,使用范围有限 | 🔴 不可以 |
透明控件支持 | 🟢 支持,阴影被控件剪裁并且不显示 | 🔴 不支持,阴影会透过透明控件显示 | 🔴 不支持,阴影会透过透明控件显示 |
动画支持 | 🟢 支持,在XAML里通过AnimationSet 实现 | 🟡 部分支持,移动元素可能会导致阴影不同步 | 🔴 不支持 |
AttachedCardShadow (Win2D)
AttachedCardShadow
是最易使用、性能最好的阴影。
如果不介意添加Win2D依赖,建议首先考虑使用它。它唯一的缺点是需要额外的Win2D依赖,而且只支持圆角矩形的控件(如上表所述)。
AttachedCardShadow
的最大优势是不需要额外的图面或控件来添加阴影。
这就降低了开发所需的复杂性,并允许在开发过程中的任何时候轻松添加阴影。
它还支持透明元素,而不会在其背后显示出阴影!
AttachedDropShadow (Composition)
AttachedDropShadow
为透明图像、形状和文本等各种元素提供蒙版支持。AttachedDropShadow
的主要使用场景是为圆角矩形(矩形)之外的自定义形状添加蒙版。
与它的前身DropShadowPanel
不同,AttachedDropShadow
不需要包裹被阴影覆盖的控件;
但是,它也确实需要另一个控件来承载阴影。
这使得它的使用要比AttachedCardShadow
和DropShadowPanel
复杂一些,但由于多个AttachedDropShadow
元素可以置于同一图面上,这使得它的性能要比DropShadowPanel
高得多。
注
虽然DropShadowPanel
的封装减少了添加阴影的复杂度,但它给视觉树增加了很多深度和复杂性。
而 AttachedDropShadow
则要求你提供应投射阴影的图面,例如常用的背景元素。
这意味着每个阴影都可以共享相同的图面,而无需为每个阴影创建自己的背景元素(如DropShadowPanel
)。这种轻微牺牲易用性的换来了性能提升。
不过,这也意味着在某些使用情况下,对元素的操作可能不那么灵活。在这种情况下,我们建议尝试用AttachedCardShadow
代替,或在自定义控件中封装控件及其背景。
译者注
本文出自Windows Community Toolkit Gallery的Shadows overview页面,
对阴影的选择和使用极具指导意义,可惜知道的人较少。
Microsoft Store界面和Windows Community Toolkit库由同一批人进行打理,所以MSStore中经过验证、好用的黑科技都会进入Toolkit。AttachedCardShadow
就是一个黑科技,它通过Win2D直接获取窗口的图面(和控件本身无关),然后画上阴影,再用几何蒙版剪裁掉中间控件的部分,就像在布上挖了一个洞。
使用底层API进行降维打击,这就是为什么AttachedCardShadow
画阴影不需要额外的控件(视觉树深度)、效率高、而且只能圆角矩形的原因。