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

Question

使用合成api修复scrollviewer内的元素时，似乎会进行布局舍入，从而在整个视觉效果上产生抖动。

虽然以下不是我的代码，但你可以在这里看到类似的效果（一旦发粘就会看到“Sticky Header”。继续滚动会稍微向上和向下移动。这在查看“水平条”时最好看到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

如果您检查布局guidelines，可以找到以下内容：

  

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

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

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