Silverlight Image Stretch="Uniform" Fail for Portrait Sized Images

Question

I am using a Silverlight 3.0 Image control, setting it's Stretch property="Uniform". Unless I am mistaken, the expected behavior for Stretch="Uniform" is that it should scale the image, maintaining aspect ratio, letterboxing as needed. This works fine for images with landscape orientations, in that they scale up to fill the space, maintaining aspect ratio without cutting off any of the image. It is a complete fail for images with a more vertical or 'portrait' orientation. Instead of scaling up to fit within the image control, they actually scale past the height constraint such that you only see the middle of the image, with top and bottom cut off. Its as if the control only uses width when scaling, and forgets to check height?

Is this a bug in the Image control, or am I missing or mis-setting a property? To reproduce, find / create an image with a 'portrait' aspect ratio (taller than it is wide) and create an Image with Stretch="Uniform".

** UPDATE WITH REQUESTED XAML **** Note that the reason that the size is not explicit is to allow for full screen and scaling.

 <Grid x:Name="LayoutRoot">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="9"/>
        <ColumnDefinition Width="30"/>
        <ColumnDefinition Width="30"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="30"/>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="30"/>
        <ColumnDefinition Width="9"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>

<Border BorderBrush="Black" Grid.Row="0" Grid.ColumnSpan="8" BorderThickness="1, 1, 1, 0">
   <Border BorderBrush="{StaticResource blackStatusMapLGB}" BorderThickness="9,9,9, 0">
      <Border BorderBrush="Gray" BorderThickness="1, 1, 1, 0">
         <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
               <MediaElement Height="Auto" Width="Auto" Visibility="Collapsed" AutoPlay="true" Stretch="Fill" MediaFailed="SilverlightMediaPlayer_MediaFailed" Name="previewMediaElement"/>
                        <Image Name="imagePreview" Stretch="Uniform"/>
          </StackPanel>
      </Border>
   </Border>
</Border>

Answer 1

I just tried this with a tall image and it worked fine. I suspect that the problem is with the Image element's container - it's actually showing the entire image, but the top and bottom are being clipped off.

Here's what I used to test:

 <UserControl
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Temp_Delete.MainPage"
  Width="640" Height="480">

  <Grid x:Name="LayoutRoot" Background="White">
   <Image Source="Tall.png" Stretch="Uniform"></Image>
  </Grid>
 </UserControl>

UPDATE: All your nested borders are throwing it off since they don't have a defined height. I'd use an ImageBrush on the top level border:

<UserControl
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 x:Class="Temp_Delete.MainPage"
 Width="640" Height="480">

 <Grid x:Name="LayoutRoot">
  <Grid.ColumnDefinitions>
   <ColumnDefinition Width="9"/>
   <ColumnDefinition Width="30"/>
   <ColumnDefinition Width="30"/>
   <ColumnDefinition Width="*"/>
   <ColumnDefinition Width="30"/>
   <ColumnDefinition Width="50"/>
   <ColumnDefinition Width="30"/>
   <ColumnDefinition Width="9"/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
   <RowDefinition Height="*"/>
   <RowDefinition Height="30" />
  </Grid.RowDefinitions>
  <Border BorderBrush="Black" Grid.Row="0" Grid.ColumnSpan="8" BorderThickness="1, 1, 1, 0">
   <Border.Background>
    <ImageBrush Stretch="Uniform"/>
   </Border.Background>
   <Border BorderBrush="Black" BorderThickness="9,9,9, 0">
    <Border BorderBrush="Gray" BorderThickness="1, 1, 1, 0">
     <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
      <MediaElement Height="Auto" Width="Auto" Visibility="Collapsed" AutoPlay="true" Stretch="Fill" MediaFailed="SilverlightMediaPlayer_MediaFailed" Name="previewMediaElement"/>
     </StackPanel>
    </Border>
   </Border>
  </Border>
 </Grid>
</UserControl>

May take a little tweaking to get all the borders to display correctly, but you can set the padding / margin on the container elements if that's important to you.

Can you verify if your image works in that XAML? Can you post more of your XAML so we can see the context?

Answer 2

Most likely this is caused by your image's width being set (by its parent container) instead of its height. It is stretching uniformly, but its height is unconstrained, and it is being clipped.

If this does not help, please provide the XAML for its container.

Answer 3

So, the way a vertical StackPanel works is that measures its children with an infinite Size in the vertical axis, effectively saying to the child: "you can be as tall as you like". It does not constrain the size of the child vertically (though it does constrain it in the horizontal direction).

The way the Stretch=Uniform property works on an Image with no explicit size set is it says: "be as large as you can be within the size constraints while maintaining your aspect ratio".

Now when you combine these two, you have an Image that is constrained only in the Horizontal axis; it takes all of the space available horizontally and sizes vertically to maintain the aspect ratio.

Does this explanation help you understand why you are seeing the behavior that you are seeing?

Imagine you have an image with a 2:1 aspect ratio (twice as tall as it is wide). It has Stretch=Uniform and no explicit Width/Height set. You put it in a StackPanel of size 100x100. The Image will get a size constraint of 100xInfinity. It will first size in the horizontal axis and take all of the space available to it; 100 pixels. It will then see that is has a 2:1 aspect ratio and so will size vertically to 200 pixels. So you end up with an Image of size 100x200 in a StackPanel of 100x100. So the StackPanel is forced to clip its child to the available space.