Question

I’m trying to make an image zoomable in my windows phone 7 application. (code below) however it dosent work, the image dosent display. Can someone put me on the right track, is this the right control to use? If it is then what am I doing wrong?

        <controls:PivotItem Name="Header" Header="item1">
            <Grid>
                <MultiScaleImage Name="mainImage" />
            </Grid>
        </controls:PivotItem>

        var imageurl = loginxml.Descendants("response").Elements("submissions").Elements("submission").Elements("file_url_screen").First().Value;
        //imageurl = https://inkbunny.net///files/screen/165/165693_CobaltHusky_random_anatomy_doodles.png
        Header.Header = loginxml.Descendants("response").Elements("submissions").Elements("submission").Elements("title").First().Value;
         DeepZoomImageTileSource img = new DeepZoomImageTileSource(new Uri(imageurl));
        mainImage.Source = img;

EDIT Reading the msdn on MultiScaleImage that isnt the control to use. It needs a specific image source (not a bitmap/jpg)

Answer 1

The URL for the DeepZoomImageTileSource is not an image url, but the url to a XML file listing the images to use for the deep zoom tiles.

I implemented a simple zoomable image as follows using the silverlight toolkit:

<Image Name="MainImage" RenderTransformOrigin="0.5,0.5" CacheMode="BitmapCache">
    <Image.RenderTransform>
        <CompositeTransform x:Name="transform" />
    </Image.RenderTransform>
    <toolkit:GestureService.GestureListener>
        <toolkit:GestureListener PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta" />
    </toolkit:GestureService.GestureListener>
</Image>

and in code:

MainImage.Source = new BitmapImage(new Uri(url));

Then declare two variables for your angle and zoom:

double initialAngle;
double initialScale;

And then handle the gesture events:

private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
{
    initialAngle = transform.Rotation;
    initialScale = transform.ScaleX;
}

private void OnPinchDelta(object sender, PinchGestureEventArgs e)
{
    //transform.Rotation = initialAngle + e.TotalAngleDelta;
    transform.ScaleX = initialScale * e.DistanceRatio;
    transform.ScaleY = initialScale * e.DistanceRatio;
}

Uncomment the rotation line if you want to handle rotating the image as well.

Sam