uwp - 消除粘性滚动标题中的摆动

Question

当使用组合 api 修复 a 中的元素scrollviewer时，似乎正在进行布局舍入，这会在整个视觉上产生摆动。

虽然以下不是我的代码，但您可以在此处看到类似的效果（查看“粘性标题”一旦粘滞。继续滚动会稍微上下移动。这在查看“H”的水平条时最好看） : (取自http://meanme.com/2017/07/11/sticky-header/ )

相关代码与此类似：

CompositionPropertySet scrollerPropertySet = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(MainScrollViewer);
var offsetExpression = compositor.CreateExpressionAnimation($"-scroller.Translation.Y");
offsetExpression.SetReferenceParameter("scroller", scrollerPropertySet);
headerVisual.StartAnimation("Offset.Y", offsetExpression);

我怎样才能消除这种摆动？

Answer 1

如果您检查布局指南，您会发现以下内容：

如果您使用测量值，则所有尺寸、边距和填充应以4 epx为增量。当 UWP 使用有效像素和缩放以使您的应用在所有设备和屏幕尺寸上都清晰可见时，它会将UI 元素缩放 4 的倍数。使用以 4 为增量的值会通过与整个像素对齐来实现最佳渲染。

这意味着，为避免此类渲染问题，您应该始终使用四的倍数进行所有测量。在链接的示例代码中，作者使用50 epx 作为标题的可见高度。这个数字不能被 4 整除，如果您的屏幕使用的缩放比例不是 100%，这可能是您看到的抖动的原因。

要解决此问题，请尝试使标题的高度为52 或 48 epx。这应该可以防止这种情况发生。