устранить колебания в липком заголовке прокрутки

Question

При использовании композиции api для исправления элемента в scrollviewer, похоже, происходит округление макета, которое создает колебания для всего визуала.

Хотя следующее не является моим кодом, вы можете видетьаналогичный эффект здесь (посмотрите на «Липкий заголовок», как только он закреплен. Продолжение прокрутки слегка перемещает его вверх и вниз. Это лучше всего видно при взгляде на горизонтальную полосу «Н»): (взято из 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 использует эффективные пиксели и масштабирование, чтобы сделать ваше приложение разборчивым на всех устройствах и экранах любого размера, оно масштабирует элементы пользовательского интерфейса с кратностью 4 .Использование значений с шагом 4 приводит к наилучшей визуализации, если выровнять ее по целым пикселям.

Это означает, что во избежание проблем с рендерингом всегда следует использовать кратные четыре для всех измерений.В связанном примере кода автор использует значение 50 epx для видимой высоты заголовка.Это число не делится на четыре, что является вероятной причиной колебания, которое вы видите, если ваш экран использует коэффициент масштабирования, отличный от 100%.

Чтобы исправить это, попробуйте сделать высоту заголовка 52 или 48 epx .Это должно предотвратить это.