How implement pinch zoom without preserving aspect ratio in windows runtime?

Question

I have a scrollviewer around a canvas object

<ScrollViewer>
  <Canvas x:Name="myCanvas"/>
</ScrollViewer>

and I'm adding (lots of) inherited custom controls into the Canvas in the code allowing me to basically create an interactive diagram:

var myControl = new MyControl();
myControl.Height = 10;
myControl.Width = 20;
Canvas.SetLeft(myControl,5);
Canvas.SetTop(myControl,20);
this.myCanvas.Children.Add(myControl);

The ScrollViewer allows me to pan and pinch zoom around this canvas of controls keeping the same aspect ratio quite nicely.

Is there any way to easily implement stretching using pinching ie zooming without maintaining aspect ratio?

Answer 1

ScrollViewer doesn't support that. You would need to roll out your own implementation using pointer or manipulation events and RenderTransform.

Answer 2

Something like this (basically implementing Filip's answer):

<Image x:Name="_image" Stretch="None" ManipulationDelta="OnManipulationDelta">
  <Image.RenderTransform>
    <CompositeTransform />
  </Image.RenderTransform>
</Image>

And in the code-behind:

private void OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
  var ct = (CompositeTransform)_image.RenderTransform;
  // Scale horizontal.
  ct.ScaleX *= e.Delta.Scale;
  // Scale vertical.
  ct.ScaleY *= e.Delta.Scale;
}

You should only have one of the scaling statements above in your case.