How zoom and scroll selection on windows phone 8.1.Help me

Question

I'm going to finish a application but I have a problem about scroll selection. I has zoom in and out that's ok.I has asked so many question but no one are not reply.Help me about scroll... This picture is zooming in:

<ListView Name="lst_intro">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding link}"
                           Stretch="Uniform"
                           RenderTransformOrigin="0.5,0.5"
                           ManipulationDelta="img_intro_ManipulationDelta"
                           ManipulationMode="Scale">
                        <Image.RenderTransform>
                            <CompositeTransform/>
                        </Image.RenderTransform>

                    </Image>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

private void img_intro_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        Image img = sender as Image;
        CompositeTransform ct = img.RenderTransform as CompositeTransform;
        ct.ScaleX *= e.Delta.Scale;
        ct.ScaleY *= e.Delta.Scale;
        if (ct.ScaleX < mincale) ct.ScaleX = mincale;
        if (ct.ScaleY < mincale) ct.ScaleY = mincale;

        ScaleTransform scale=new ScaleTransform();


    }

Answer 1

kennyzx gave a very good answer but the part where you test if the image is out of boundaries isn't working for me... that's my solution:

    private void Image_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        Image img = sender as Image;
        CompositeTransform ct = img.RenderTransform as CompositeTransform;

        ct.ScaleX *= e.Delta.Scale;
        ct.ScaleY *= e.Delta.Scale;

        ct.ScaleX = Math.Min(4, Math.Max(1, ct.ScaleX));
        ct.ScaleY = Math.Min(4, Math.Max(1, ct.ScaleY));

        ct.TranslateX += e.Delta.Translation.X;
        ct.TranslateY += e.Delta.Translation.Y;

        var translateY = (img.ActualHeight * ct.ScaleY - img.ActualHeight) / 2;
        ct.TranslateY = Math.Min(translateY, Math.Max(0 - translateY, ct.TranslateY));

        var translateX = (img.ActualWidth * ct.ScaleX - img.ActualWidth) / 2;
        ct.TranslateX = Math.Min(translateX, Math.Max(0 - translateX, ct.TranslateX));
    }

Answer 2

You set ManipulationMode="Scale", meaning you cannot drag it left/right/down/up - that is call a translation, set it as ManipulationMode="Scale,TranslateX,TranslateY".

In the event handler, similar to what you did for the Scale transform, you do a Translate transform.

private void img_intro_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    Image img = sender as Image;
    CompositeTransform ct = img.RenderTransform as CompositeTransform;
        if (ct == null) return;

    //Scale transform
    ct.ScaleX *= e.Delta.Scale;
    ct.ScaleY *= e.Delta.Scale;
    if (ct.ScaleX < mincale) ct.ScaleX = mincale;
    if (ct.ScaleY < mincale) ct.ScaleY = mincale;

    //Translate transform
    ct.TranslateX += e.Delta.Translation.X;
    ct.TranslateY += e.Delta.Translation.Y;

    //Confine boundary
    BringIntoBounds();
}

After the transformation, brings the image back if it is out of the boundary. You can detect if the image is out of boundary by comparing the values of TranslateX/TranslateY and the width/height of the boundary. The boundary is the parent of the image (it is a Grid?), you need to debug the code to determine the boundary for TranslateX and TranslateY.

public void BringIntoBounds()
{
    CompositeTransform ct = img.RenderTransform as CompositeTransform;
        if (ct == null) return;

    //out of screen, left edge
    if (ct.TranslateX < 10 - img.ActualWidth * ct.ScaleX)
    {
        ct.TranslateX = 10 - img.ActualWidth * ct.ScaleX;
    }
    //out of screen, right edge
    if (ct.TranslateX > Container.ActualWidth - 10 )
    {
        ct.TranslateX = Container.ActualWidth - 10;
    }
    ...do the same for Y.
}