locked
Moving elements using ManipulationDelta within a scrollviewer

    Question

  • I am developing an image editor using the Lumia Imaging SDK, I have my image inside a grid which in turn is inside a scrollviewer so that the image can be zoomed and panned. I am trying to add an ellipse to the grid when I click a button, the ellipse is to provide interaction with the user to select a point on the image for processing.

    Problem 1
    I am able to add the ellipse and move it around, however, if I move it around whilst the image is inside the scrollviewer the ellipse does not keep up with the pointer, but when the image is not inside the scrollviewer it stays with the pointer and moves around correctly

    Problem 2
    The ellipse appears much smaller when inside the scrollviewer than if its not and when I try to get the Point of where the ellipse ends up it is completely different to where I stopped dragging the ellipse.

    Is there some scaling issue I should be taking into account here when using a scrollviewer depending on what zoom factor is being used?

    ManipulationDela event

                var ellipse = e.OriginalSource as FrameworkElement;
                var transform = ellipse.RenderTransform as CompositeTransform;
                if (transform == null)
                    ellipse.RenderTransform = (transform = new CompositeTransform());
                transform.TranslateX += e.Delta.Translation.X;
                transform.TranslateY += e.Delta.Translation.Y;
                e.Handled = true;

    ManipulationCompleted event

                currentPoint = e.Position;


    Mal

    Thursday, March 19, 2015 1:06 PM

Answers

All replies

  • Please post a sample to show your two problems in details, the available information may hard to understand.

    MSDN provides a sample code about : advanced input and manipulation techniques using the ScrollViewer control. please refer it to see if it helps. https://code.msdn.microsoft.com/XAML-input-and-manipulation-44125241

    • Marked as answer by MalBall Monday, March 23, 2015 12:40 PM
    Friday, March 20, 2015 5:29 AM
  • I have posted a small app which demonstrates my issue, its on my OneDrive at

    https://onedrive.live.com/redir?resid=1FEC0ECBF1F53DBF!182181&authkey=!ACa53_meJWxs0rg&ithint=folder%2csln

    If you run this and move the red ellipse using the mouse or finger you will see that the ellipse does not keep up with your pointer and the ellipse is small.

    If you then move the grid containing the image outside of the scrollviewer and run again, you will see a much bigger ellipse but when you move it the pointer keeps up with the movement.


    Mal

    Friday, March 20, 2015 10:52 AM
  • Thanks Nithak

    After looking at the example I realized that I wasn't taking into consideration the zoomfactor of the scrollviewer


    Mal

    Monday, March 23, 2015 12:39 PM