Uwp 消除粘性卷轴收割台的抖动

当使用composition api修复

scrollviewer

中的元素时，似乎正在进行布局取整，从而在整个视觉系统上产生抖动

虽然下面的代码不是我的代码，但您可以在这里看到类似的效果（查看“Sticky Header”（粘性标题）。继续滚动会使其稍微上下移动。这最好在查看“H”的水平条时看到）： （摘自）

相关代码与此类似：

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

如何消除这种抖动？

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

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

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

---

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

只是为了确认，你是说在滚动时，不应该滚动“粘性标题”吗？“粘性头”“应该呆在那里不动，对吗？或者你知道最终效果是什么样的吗？我想确认你的最终预期效果。@SunteenWu MSFT我说的是一个几乎不明显的问题。在我发布的gif中，有两个阶段链接到垂直滚动范围：1黑色标题稍微滚动，2标题保持固定。我说的是第二阶段！仔细看一下文本“粘性标题”。在第二阶段滚动时，它仍然上下移动一个像素。称我为像素完美，但我希望“粘性标题”根本不要移动。@SunteenWu MSFT顺便说一句，这似乎是一个普遍的问题，也会影响Windows社区工具包。这就是为什么我还在那里创建了一个bug报告：谢谢你的提示。我会在未来的UI设计中牢记这一点。不幸的是，在我的例子中，它（偶然地）已经可以被4整除，并且存在摆动。我猜现在发生的是，通过滚动滚动ScrollViewer.VerticalOffset（垂直偏移量）到某个“未展开”的双精度值，并用计算为浮点值的-scroller.Translation.Y“进行抵消，结果是从0到某个微小偏移量，然后布局四舍五入发生。。。