Parts of image missing when using ScaleTransform with LayoutTransformer and Scrollviewer on Windows Phone 7

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 2048x2048 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 1201x1401 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 2282x2662 - 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 480x800 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