title: UWP: Calculate Transformation based on ScrollViewer
body: <p>I have a windows universal app where I am rendering a scene with DirectX. I want to make use of the Scrollviewer and therefore I render my scene behind the Scrollviewer and want to calculate the scene transformation based on the Scrollviewer. It works fine so far, especially the translation and scrolling. But when I zoom in, the scene jumps around in two special situations:</p>
  
  <ol>
  <li>The scene had enough space and was centered and now scrolling is required.</li>
  <li>The opposite direction.</li>
  </ol>
  
  <p>More or less I use the following code:</p>
  
  <pre><code>float zoom = scrollViewer.ZoomFactor;
  
  float inverseZoom = 1f / scrollViewer.ZoomFactor;
  
  float scaledContentW = Document.Size.X * scrollViewer.ZoomFactor;
  float scaledContentH = Document.Size.Y * scrollViewer.ZoomFactor;
  
  float translateX;
  float translateY;
  
  if (scaledContentW &lt; scrollViewer.ViewportWidth)
  {
      translateX = ((float)scrollViewer.ViewportWidth * inverseZoom - Document.Size.X) * 0.5f;
  }
  else
  {
      translateX = -inverseZoom * (float)scrollViewer.HorizontalOffset;
  }
  
  if (scaledContentH &lt; scrollViewer.ViewportHeight)
  {
      translateY = ((float)scrollViewer.ViewportHeight * inverseZoom - Document.Size.Y) * 0.5f;
  }
  else
  {
      translateY = -inverseZoom * (float)scrollViewer.VerticalOffset;
  }
  
  float visibleX = inverseZoom * (float)scrollViewer.HorizontalOffset;
  float visibleY = inverseZoom * (float)scrollViewer.VerticalOffset; ;
  
  float visibleW = Math.Min(Document.Size.X, inverseZoom * (float)scrollViewer.ViewportWidth);
  float visibleH = Math.Min(Document.Size.Y, inverseZoom * (float)scrollViewer.ViewportHeight);
  
  Rect2 visibleRect = new Rect2(visibleX, visibleY, visibleW, visibleH);
  
  transform =
      Matrix3x2.CreateTranslation(
          translateX,
          translateY) *
      Matrix3x2.CreateScale(zoom);
  </code></pre>
  
  <p>You can get an example here: <a href="https://github.com/SebastianStehle/Win2DZoomTest">https://github.com/SebastianStehle/Win2DZoomTest</a></p>
  
  <p>To be sure that my eyes are not broken I was zooming around and have written the translation and zoom values to a file. You can see it here:</p>
  
  <p><a href="https://www.dropbox.com/s/9ak6ohg4zb1mnxa/Test.png?dl=0">https://www.dropbox.com/s/9ak6ohg4zb1mnxa/Test.png?dl=0</a></p>
  
  <p>The meaning of the columns is the following:</p>
  
  <p>Column 1: The computed zoom value of the transformation matrix (M11) = ScrollViewer.ZoomFactor
  Column 2: The computed x offset of the matrix (See above)
  Column 3: The x value of the result of matrix * vector (500, 500), here: Colum1 * 500 + Column2</p>
  
  <p>You see, that the matrix values look good, but when applying the transformation you get this little jump to the right for some milliseconds. One theory was, that the viewport might change because the scrollbar becomes visible. But this is not the case. I also tried fixed values here, made the scrollbars visible and even created a custom template for the scrollviewer with no scrollbars at all.</p>
  
  <p>Btw: This is a cross post, I also asked the question here: <a href="https://github.com/Microsoft/Win2D/issues/125">https://github.com/Microsoft/Win2D/issues/125</a></p>