touch - Responding to Manipulation delta - strange effect and overflow -

in test uwp form have basic manipulation test, code below. draws 3 circles on canvascontrol , sets translation , scaling manipulation.

when test on touch screen expect, translating , zooming circles based on position of 2 fingers on screen. if pinch down beyond point, image starts oscillate between 2 extents , cause code stop overflow.

i put canvas control in grid , tried doing manipulation on canvas control grid control, , not suffer same problem although effect of zooming , panning not seem correct.

so looks effect of code is, iteration, manipulation causing render transform change cause manipulation, , goes in circles until settles - or if there problem of precision, perhaps due distance between touch points getting small, iteration diverges until overflow.

is expected? correct way this?

private withevents canv new canvascontrol private withevents gr new grid   private sub canv_draw(sender canvascontrol, args 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()      ' call required designer.     initializecomponent()      ' add initialization after 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 object, e manipulationdeltaroutedeventargs) handles canv.manipulationdelta     dim t new translatetransform      t.x = e.cumulative.translation.x     t.y = e.cumulative.translation.y       dim s new scaletransform     s.scalex = e.cumulative.scale     s.scaley = e.cumulative.scale     s.centerx = e.position.x     s.centery = e.position.y      dim g new transformgroup     g.children.add(s)     g.children.add(t)      canv.rendertransform = g    end sub 

the common way in uwp use compositetransform, supports scale, skew, rotate , translate.

please see basicinput sample, the forth scenario

for zooming issue, can avoid using following way:

public notinheritable class mainpage inherits page  private withevents canv new canvascontrol private withevents gr new grid  private sub canv_draw(sender canvascontrol, args 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()      ' call required designer.     initializecomponent()      ' add initialization after 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 object, e 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 object) compositetransform     dim rect = trycast(sender, canvascontrol)     rect.rendertransformorigin = new point(0.5, 0.5)     dim tran new compositetransform     if trycast(rect.rendertransform, compositetransform) isnot nothing         tran = directcast(rect.rendertransform, compositetransform)     else         rect.rendertransform = new compositetransform()     end if     return tran end function  ' utility method private function boundary(value double, min double, max double) double     if value > max         return max     elseif value < min         return min     else         return value     end if end function end class 

screenshot: