Question

I’m working on my first WP7 app and now I’m exploring the world of the panorama control.
I’ve loaded an object from a REST service and I’ve set the background of the panorama to the image url in that object.

var brush = new ImageBrush() { ImageSource = new BitmapImage(new Uri(_group.photo_url, UriKind.Absolute)) };
groupPanorama.Background = brush;

The problem I have is that the image is an arbitrary size on the server and this case ends up being squished (horizontally) and tiled without even filling the width of the screen horizontally.

I’m assuming I need to re-size this to dimensions that the control supports, but I am not sure how to go about this. I assume this is a pretty common task.

many thanks!

EDIT:

Including a snip-it of the xaml. Pretty generic:

<!--LayoutRoot contains the root grid where all other page content is placed-->
<Grid x:Name="LayoutRoot">
    <controls:Panorama Name="groupPanorama" Title="" SelectionChanged="groupPanorama_SelectionChanged">

        <!--Panorama item one-->
        <controls:PanoramaItem Header="Main">
            <Grid/>
        </controls:PanoramaItem>

I guess I should note that I have tried the various Stretch properties for the ImageBrush already with no luck.

UPDATE:
This appears to work with normal size images. The image I was originally attempting to do this with is pretty small and doesn’t appear to stretch. Perhaps it’s a bug, but I’ll work around this for now.

Answer 1

As the previous answer suggests, you can use the Stretch property of the ImageBrush to get the framework to do the resizing for you. To elaborate:

• Stretch.Fill: This option will resize the image horizontally and vertically to fit the required space, which could result in the image being squashed or stretched in either or both directions.
• Stretch.Uniform: This option will resize the image horizontally or vertically depending on the source image, while maintaining the aspect ratio of the image. It is still possible to have empty space if you use this option.
• Stretch.UniformToFill: As with the previous option, this option maintains the aspect ratio of the image, but ensures that all available space is filled. This will prevent any empty space, but part of the image may be cropped.

You need to make your choice based on your requirements (personally I think UniformToFill is the best suited in this situation) and the typical dimensions of your source images.