Question

OK, so I have this image that’s 1000×500. So I’m displaying it in WP7 like this:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0" Background="{StaticResource PhoneAccentBrush}">
    <Image Name="image1" />
</Grid>

And after I set the image’s contents in code, it renders like this:

Not bad, but my business requirement is to display it vertically, so I need to rotate it. Easy enough:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0" Background="{StaticResource PhoneAccentBrush}">
    <Image Name="image1" RenderTransformOrigin="0.5 0.5">
        <Image.RenderTransform>
            <RotateTransform Angle="90"></RotateTransform>
        </Image.RenderTransform>
    </Image>
</Grid>

And the result is:

OK that’s the idea, but I want the image to stretch as much as possible. The image is larger than the screen’s dimensions so it should be easy.

Instead, it looks like what’s happening is that the image takes on the dimensions of what it would be when it fills the screen horizontally, then that is what gets rotated.

OK, so they’ve got this “Stretch” parameter. Let’s see what that does.

Well, setting it to “Uniform” does nothing

Setting it to “Fill” does this:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0" Background="{StaticResource PhoneAccentBrush}">
    <Image Name="image1" RenderTransformOrigin="0.5 0.5" Stretch="Fill">
        <Image.RenderTransform>
            <RotateTransform Angle="90"></RotateTransform>
        </Image.RenderTransform>
    </Image>
</Grid>

Looks like it’s just stretching the rotated image horizontally, which isn’t what I want.

And “UniformToFill” does this:

I don’t even know what happened there.

I must say, after having programmed this App for iOS and Android and now doing the WP7 version on a lark since my speciality for a decade now has been in C#, Microsoft really nailed a whole lot of stuff with WP7. It’s simple to work with and it’s clear they’ve put a ton of work in it and have successfully leveraged their existing technology into it (.NET CE, Silverlight, etc.)

So it’s baffling why after blowing through everything else in this App, I can’t get a simple image to rotate and scale.

Anyone have any idea what I’m missing or doing wrong here? All I need is it to rotate 90 degrees and then fill the screen, so the more elaborate rotation solutions I’ve seen for WP7 don’t really apply here.

Answer 1

The problem with RenderTransform is that it does NOT propagate the change in size/orientation to the parent controls. In WPF there is LayoutTransform which accomplishes this.

Luckily you are not alone and the Silverlight toolkit provides a solution called: LayoutTransformer

For the windows Phone you can find a port by David Anson here