Smooth pinch-zooming and panning on Windows Phone 8

Question

I've managed to implement pinch zooming and panning by hooking up to the ManipulationDelta and ManipulationStarted events (on an image control):

    private void image_OnManipulationDelta(object sender, ManipulationDeltaEventArgs e)
    {
        var transform = (CompositeTransform)image.RenderTransform;

        // pan
        transform.TranslateX = _translationX + e.CumulativeManipulation.Translation.X;
        transform.TranslateY = _translationY + e.CumulativeManipulation.Translation.Y;

        // zoom
        if (e.PinchManipulation != null)
        {
            transform.CenterX = e.PinchManipulation.Original.Center.X;
            transform.CenterY = e.PinchManipulation.Original.Center.Y;

            transform.ScaleX = _scaleX * e.PinchManipulation.CumulativeScale;
            transform.ScaleY = _scaleY * e.PinchManipulation.CumulativeScale;
        }
    }

    private void image_OnManipulationStarted(object sender, ManipulationStartedEventArgs e)
    {
        // the user has started manipulating the screen, set starting points
        var transform = (CompositeTransform)image.RenderTransform;
        _scaleX = transform.ScaleX;
        _scaleY = transform.ScaleY;
        _translationX = transform.TranslateX;
        _translationY = transform.TranslateY;
    }

But the compared to the smoothness of the rest of the windows phone UI it feels very placid and stiff. There is no inertia in the movement.

Is there a way to make the movements more smooth? Is using animations and storyboards a way to go about it? I've tried using ScrollView for at least getting smooth panning but then the ManipulationDelta events are not firing correctly.

Just an update as the question seem to be popular: I ended up using above code combined with animations created programmatically to get that "inertia" feel. I also had to optimize by using simple controls (canvases and bitmap cached images), to get it to run smoothly. — Pking, Jun 25 '13 at 19:36
Possible Duplicate - Well explained here. [http://stackoverflow.com/questions/13969400/pinch-to-zoom-functionality-in-windows-phone-8](http://stackoverflow.com/questions/13969400/pinch-to-zoom-functionality-in-windows-phone-8) — Zia Ur Rahman, Oct 22 '15 at 07:34

Sebastian Graf · Answer 1 · 2013-10-17T23:42:37.107

I wanted to get this right from a mathematical point of view. The result is something similar in correctness to Telerik's PanAndZoomImage. If you aren't interested, jump straight to this gist (It works with WP7.1+). You'll need to reference System.Windows.Interactivity and the Windows Phone toolkit.

Usage:

<Image Source="http://i.imgur.com/ZbKlRzK.jpg">
    <i:Interaction.Behaviors>
        <phoneApp1:PanAndZoomBehavior MaxZoom="10" />
    </i:Interaction.Behaviors>
</Image>

Math

Panning and zooming uses 2 out of 4 transformations of CompositeTransform, namely Translation and Scaling. The key point is understanding how to compose two of those scale+translate transforms. I'll use haskellish notation, because it is less of burden to type and read. Our 'primitives' are

scale s = scale around (s.x,s.y) with factor s.x in x direction and s.y in y direction
translate t = offset all points by t.x in x direction and t.y in y direction

CompositeTransform scales around a center point, which is expressed like

scaleAround c s = translate c . scale s . translate -c

The following rules hold (do the math if you don't believe me, all operators are componentwise):

translate a . translate b = translate (a+b)
scale a . scale b = scale (a*b)
translate t . scale s = scale s . translate (t/s)

A CompositeTransform is like

transform s c t = translate t . scaleAround c s
                = translate (t+c) . scale s . translate -c

When composing two of those transforms, we have to move around primitives until we get to such a form above. Let a and b be those two CompositeTransforms. So we get:

transform' = b . a
           = translate bt . scaleAround bc bs . translate at . scaleAround ac as
           = translate bt . translate bc . scale bs . translate -bc . translate at . translate ac . scale as . translate -ac
           = translate (bt+bc) . scale bs . translate (ac+at-bc) . scale as . translate -ac
           = translate (bt+bc) . translate (ac+at-bc)*bs . scale bs . scale as . translate -ac
           = translate (bt+bc+(ac+at-bc)*bs) . scale (as*bs) . translate -ac
           = translate (bt+bc-ac+(ac+at-bc)*bs) . scaleAround ac (as*bs)
           = translate (bt+at*bs+(bs-1)*(ac-bs)) . scaleAround ac (as*bs)

This is just because I was frustrated with the amount of profound documentation on why certain people do certain things.

For the actual composition code, looko here

score 5 · Accepted Answer · edited Feb 10 '20 at 08:06

5

I know you're talking about 8 and I'll post a link to an article related to 7, but it was very useful when playing around with Windows Phone so here it goes:

https://www.wintellect.com/building-touch-interfaces-for-windows-phones-part-3/

I don't imagine that much has changed since then...

edited Feb 10 '20 at 08:06

Magnus Lindhe

7,157
5
48
60

answered Feb 25 '13 at 22:55

Alex Paven

5,539
2
21
35

score 1 · Answer 3 · answered Apr 15 '14 at 07:28

1

I know it's a late answer but here's another sample project which could help to resolve this problem http://code.msdn.microsoft.com/wpapps/Smooth-flick-and-zoom-with-7760c7f7

answered Apr 15 '14 at 07:28

Shendor

749
2
11
18

Smooth pinch-zooming and panning on Windows Phone 8

3 Answers3

Linked