Responding to Manipulation delta - strange effect and overflow - touch

Question

In a test UWP form I have a basic manipulation test, code below. It draws 3 circles on a CanvasControl and sets up translation and scaling manipulation.
When I test this on a touch screen it basically does what I expect, translating and zooming the circles based on the position of 2 fingers on the screen. But if I pinch down beyond a certain point, the image starts to oscillate very quickly between 2 extents and will very quickly cause the code to stop with an overflow.
I put the canvas control in a grid and tried doing the manipulation on the canvas control from the grid control, and it does not suffer from the same problem although the effect of zooming and panning does not seem correct.
So it looks like the effect of my code as is, is an iteration, where a manipulation causing a render transform change could cause another manipulation, and it goes in circles until it settles - or if there is a problem of precision, perhaps due to the distance between the touch points getting too small, the iteration diverges until overflow.
Is this expected? What is the correct way to do this?
Private WithEvents Canv As New CanvasControl
Private WithEvents gr As New Grid
Private Sub Canv_Draw(sender As CanvasControl, args As CanvasDrawEventArgs) Handles Canv.Draw
args.DrawingSession.DrawCircle(50, 50, 25, Windows.UI.Colors.Blue)
args.DrawingSession.DrawCircle(250, 250, 25, Windows.UI.Colors.Blue)
args.DrawingSession.DrawCircle(500, 500, 25, Windows.UI.Colors.Blue)
End Sub
Public Sub New()
' This call is required by the designer.
InitializeComponent()
' Add any initialization after the InitializeComponent() call.
Content = gr
gr.Children.Add(Canv)
Canv.ManipulationMode = ManipulationModes.Scale Or ManipulationModes.TranslateX Or ManipulationModes.TranslateY
end sub
Private Sub Canv_ManipulationDelta(sender As Object, e As ManipulationDeltaRoutedEventArgs) Handles Canv.ManipulationDelta
Dim t As New TranslateTransform
t.X = e.Cumulative.Translation.X
t.Y = e.Cumulative.Translation.Y
Dim s As New ScaleTransform
s.ScaleX = e.Cumulative.Scale
s.ScaleY = e.Cumulative.Scale
s.CenterX = e.Position.X
s.CenterY = e.Position.Y
Dim g As New TransformGroup
g.Children.Add(s)
g.Children.Add(t)
Canv.RenderTransform = g
End Sub

Answer 1

The common way in UWP is to use CompositeTransform, it supports Scale, Skew, Rotate and Translate.
Please see the BasicInput sample, especially the forth scenario
For the zooming issue, you can avoid it by using the following way:
Public NotInheritable Class MainPage
Inherits Page
Private WithEvents Canv As New CanvasControl
Private WithEvents gr As New Grid
Private Sub Canv_Draw(sender As CanvasControl, args As CanvasDrawEventArgs) Handles Canv.Draw
args.DrawingSession.DrawCircle(50, 50, 25, Windows.UI.Colors.Blue)
args.DrawingSession.DrawCircle(250, 250, 25, Windows.UI.Colors.Blue)
args.DrawingSession.DrawCircle(500, 500, 25, Windows.UI.Colors.Blue)
End Sub
Public Sub New()
' This call is required by the designer.
InitializeComponent()
' Add any initialization after the InitializeComponent() call.
Content = gr
gr.Children.Add(Canv)
Canv.ManipulationMode = ManipulationModes.Scale Or ManipulationModes.TranslateX Or ManipulationModes.TranslateY
End Sub
Private Sub Canv_ManipulationDelta(sender As Object, e As ManipulationDeltaRoutedEventArgs) Handles Canv.ManipulationDelta
Dim tran = Transform(sender)
tran.ScaleX = tran.ScaleX * e.Delta.Scale
tran.ScaleY = tran.ScaleY * e.Delta.Scale
'System.Diagnostics.Debug.WriteLine("tran.ScaleX =" + tran.ScaleX.ToString() + " tran.ScaleY =" + tran.ScaleY.ToString())
End Sub
Private Function Transform(sender As Object) As CompositeTransform
Dim rect = TryCast(sender, CanvasControl)
rect.RenderTransformOrigin = New Point(0.5, 0.5)
Dim tran As New CompositeTransform
If TryCast(rect.RenderTransform, CompositeTransform) IsNot Nothing Then
tran = DirectCast(rect.RenderTransform, CompositeTransform)
Else
rect.RenderTransform = New CompositeTransform()
End If
Return tran
End Function
' utility method
Private Function Boundary(value As Double, min As Double, max As Double) As Double
If value > max Then
Return max
ElseIf value < min Then
Return min
Else
Return value
End If
End Function
End Class
Screenshot:

Answer 2

Some useful information in that, in the meantime I found a tidy solution, which was to leave the CanvasControl in the grid, and take the manipulation events from the grid and change the rendertransform of the Canvas control, that way there is no recursion. It also means that the natural translation is not correct - but this is easy to fix by multiplying it by the cumulative scale, ie. the full manipulation code becomes:
Private Sub GerberCanvGrid_ManipulationDelta(sender As Object, e As ManipulationDeltaRoutedEventArgs) Handles GerberCanvGrid.ManipulationDelta
Dim sf As New ScaleTransform
sf.ScaleX = e.Cumulative.Scale
sf.ScaleY = e.Cumulative.Scale
sf.CenterX = e.Position.X
sf.CenterY = e.Position.Y
Dim tt As New TranslateTransform
tt.X = e.Cumulative.Translation.X * e.Cumulative.Scale
tt.Y = e.Cumulative.Translation.Y * e.Cumulative.Scale
ManipulationTransform = New TransformGroup
ManipulationTransform.Children.Add(sf)
ManipulationTransform.Children.Add(tt)
GerberCanv.RenderTransform = ManipulationTransform
End Sub