Question

I am trying to have a scaled image in a ScrollViewer in my Windows Phone 7 application. On the application page I define the controls like this:

        <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Name="ImageScroller" HorizontalAlignment="Center" VerticalAlignment="Center">
            <layout:LayoutTransformer x:Name="LayoutTransformer">
                <layout:LayoutTransformer.LayoutTransform>
                    <ScaleTransform x:Name="ImageScale"/>
                </layout:LayoutTransformer.LayoutTransform>                    
                <Image x:Name="Image" Margin="4" Source="{Binding ImageSource}"  />
            </layout:LayoutTransformer>
        </ScrollViewer>

The LayoutTransformer class is coming from the Silverlight Extension project.

I have methods to handle the ZoomIn and ZoomOut events and I do the following there:

    private void ApplicationBarIconButton_Click_1(object sender, EventArgs e)
    {
        // Zoom In 
        ImageScale.ScaleX = ImageScale.ScaleY = ImageScale.ScaleX + 0.5;
        LayoutTransformer.ApplyLayoutTransform();
        ImageScroller.InvalidateMeasure();
    }

However when I have a Zoom-In and the Image is changed the ScrollView control has empty area at the bottom and at the right side of the Image. Almost as if the Image was scaled but clipped using the size of the original image before the scale transform.

Any ideas what I am doing wrong?

I also created a project that reproduces this problem: http://dl.dropbox.com/u/2598447/ZoomTest.WP7.zip

Answer 1

I finally received some answer and hopefully a solution from David Anson of Microsoft. Here is his comment, but you can also read his answer on his blog:

Your phone can turn into a robot – LayoutTransformer works great on the Windows Phone platform

Thanks for the great demonstration!
This problem turns out to be due to a
limitation of Silverlight on Windows
Phone 7 – that UI elements larger than
2048×2048 get clipped to that size
when being displayed. Here’s a link to
some more information about the
problem:

stackoverflow.com/…/bitmapimage-size-restrictions-in-silverlight

In your example, the test image is
1201×1401 and I first notice clipping
after 3 “Zoom In”s – which corresponds
to a zoom factor of 1.9x – which
translates to an effective image size
of 2282×2662 – which exceeds the
limits in both directions. Doing the
math to compute the amount this
exceeds 2048 gives 234 in the
horizontal direction and 614 in the
vertical. Now keep those numbers in
mind and scroll all the way to the
bottom-right of the ScrollViewer on
your phone’s 480×800 screen. Note that
the amount of horizontal black space
is approximately half the screen width
(i.e., ~240px) and the vertical black
space is about three quarters of the
screen height (i.e., 600px) – because
these estimates match up so closely
with the overages we’ve just computed,
I’m fairly confident you’re running
into this problem.

Unfortunately, it’s a platform
limitation (which you already
confirmed by running your scenario
successfully on desktop Silverlight)
and therefore not something I can
directly fix in LayoutTransformer.
Fortunately, there are some
workarounds which are discussed in the
thread/link above.

Sorry for the trouble – I hope this
helps!

Also there is a stackoverflow article is referenced in the answer describing the root cause of this problem as a Windows Phone 7 platform limitation:

BitmapImage size restrictions in Silverlight