0

When using the composition api to fix an element within a scrollviewer there seems to be layout rounding going on that creates a wobble on a whole visual.

While the following is not my code you can see a similar effect here (look at the "Sticky Header" once sticky. continued scrolling moves it up and down slightly. This is best seen when looking at the horizontal bar of the "H"): enter image description here (taken from http://meanme.com/2017/07/11/sticky-header/)

with relevant code being similar to this:

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

how can I eliminate that wobble?

Markus Hütter
  • 7,796
  • 1
  • 36
  • 63
  • Just for confirm, did you mean when scrolling, the "sticky header" should not be scrolled? The "sticky header"" should be staying there without moving, right? Or you what the effects like the final effects as [this](http://meanme.com/2017/07/11/sticky-header/) showed? I want to confirm your final expect effects. – Sunteen Wu Jun 13 '18 at 02:02
  • @SunteenWu-MSFT I'm talking about a barely noticeable problem. In the gif I posted there are two phases linked to the vertical scroll extent: 1 the black header scrolls a little and 2 the header stays fixed. I'm talking about phase 2! Take a really close look at the text "Sticky Header". During scrolling in the second phase it still moves up and down by one pixel. Call me pixel perfect, but I want the "Sticky Header" to not move around AT ALL. – Markus Hütter Jun 13 '18 at 07:46
  • 1
    @SunteenWu-MSFT by the way, this seems to be a general problem that is also affecting Windows Community Toolkit. That's why I also created a bug report there: https://github.com/Microsoft/WindowsCommunityToolkit/issues/2230 – Markus Hütter Jun 13 '18 at 07:49

1 Answers1

0

If you check the layout guidelines you can find the following:

If you do use measurement values, all dimensions, margins, and padding should be in increments of 4 epx. When UWP uses effective pixels and scaling to make your app legible on all devices and screen sizes, it scales UI elements by multiples of 4. Using values in increments of 4 results in the best rendering by aligning with whole pixels.

Implication of this, that to avoid such rendering issues, you should always use multiples of four for all measurements. In the linked sample code the author uses value of 50 epx for the visible height of the header. This number is not divisible by four, which is the likely cause of the wobbling you are seeing, if your screen uses a scaling ratio other than 100%.

To fix this, try to make the height of the header 52 or 48 epx. That should prevent this from occurring.

Martin Zikmund
  • 38,440
  • 7
  • 70
  • 91
  • thanks for that hint. I'll keep that in mind for my future UI designs. Unfortunately, in my case it was (by accident) already divisible by 4 and the wobble was present. I guess what's happening is that by scrolling the `ScrollViewer.VerticalOffset` goes to some 'unround' _double_ value and by counteracting it with the `"-scroller.Translation.Y"` that is calculated as a _float_ it comes out to be some tiny offset from 0 and then the layout rounding occurs... – Markus Hütter Jun 13 '18 at 16:40