WP7 Show quadratic image fullscreen and pinch to zoom

Question

I have quadratic images (arround 2000x2000). I want to show them fullcreen on a page with the possibility to zoom in with "pintch to zoom". So the initial image would have a sice of 768 x 768.

<Image Name="displayImage" VerticalAlignment="Center" MinHeight="768" HorizontalAlignment="Center" Source="{Binding Image}" Stretch="UniformToFill" CacheMode="BitmapCache" ImageOpened="OnImageOpened">
   <Image.RenderTransform>
        <CompositeTransform x:Name="transform" ScaleX="1" ScaleY="1" />
    </Image.RenderTransform>
    <toolkit:GestureService.GestureListener>
        <toolkit:GestureListener PinchDelta="OnPinchDelta" PinchStarted="OnPinchStarted" DragDelta="OnDragDelta" />
    </toolkit:GestureService.GestureListener>
</Image>

.

private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
{
    var image = sender as Image;

    if (image == null) return;

    initialScale = transform.ScaleX;

    Point firstTouch = e.GetPosition(image, 0);
    Point secondTouch = e.GetPosition(image, 1);

    center = new Point(firstTouch.X + (secondTouch.X - firstTouch.X)/2.0,
                       firstTouch.Y + (secondTouch.Y - firstTouch.Y)/2.0);
}

private void OnPinchDelta(object sender, PinchGestureEventArgs e)
{
    var image = sender as Image;

    if (image == null) return;

    if (initialScale*e.DistanceRatio > 4 || (initialScale != 1 && e.DistanceRatio == 1) ||
        initialScale*e.DistanceRatio < 1)
        return;

    if (e.DistanceRatio <= 1.08)
    {
        transform.CenterY = 0;
        transform.CenterY = 0;
        transform.TranslateX = 0;
        transform.TranslateY = 0;
    }

    transform.CenterX = center.X;
    transform.CenterY = center.Y;

    transform.ScaleX = (Orientation == PageOrientation.Landscape)
                           ? initialScale*(1 + (e.DistanceRatio - 1)*2)
                           : initialScale*e.DistanceRatio;

    transform.ScaleY = transform.ScaleX;
}

private void OnDragDelta(object sender, DragDeltaGestureEventArgs e)
{
    var image = sender as Image;

    if (image == null || transform.ScaleX <= 1.1) return;

    double centerX = transform.CenterX;
    double centerY = transform.CenterY;
    double translateX = transform.TranslateX;
    double translateY = transform.TranslateY;
    double scale = transform.ScaleX;
    double width = image.ActualWidth;
    double height = image.ActualHeight;

    if (centerX - scale*centerX + translateX + e.HorizontalChange < 0 &&
        centerX + scale*(width - centerX) + translateX + e.HorizontalChange > width)
    {
        transform.TranslateX += e.HorizontalChange;
    }

    if (centerY - scale*centerY + translateY + e.VerticalChange < 0 &&
        centerY + scale*(height - centerY) + translateY + e.VerticalChange > height)
    {
        transform.TranslateY += e.VerticalChange;
    }

    return;
}

Basically what I have now is a picture, with no borders (fullscreen) and I can zoom in. But the problem is, that the images is quadratic, so on the left and right there is something missing and I can't "scroll" (or better move the picture) to the left or right. Moving the picture arround only works when I have zoomed in, but I never see the missing parts of the image. Any ideas how to solve this?

Answer 1

I am not sure if it solves your problem. But is your image on a GRID or on a CANVAS?When it is on a grid the content is clipped. A Canvas can be much larger.