Silverlight Image Stretch = "Uniform" Fail for Portrait Sized Images
I am using Silverlight 3.0 Image control setting its property Stretch = "Uniform". If I am not mistaken, the expected behavior for Stretch = "Uniform" is that it should scale the image while maintaining the aspect ratio, letterbox as needed. This is great for landscape-oriented images as they are scaled to fill the space while maintaining the aspect ratio without clipping any of the images. This is a complete disclaimer for images with a more vertical orientation or "portrait" orientation. Rather than being scaled to fit in with the image controls, they are actually scaled beyond the height constraint so that you only see the middle of the image with the top and bottom clipped.It's like the control is using the width when scaling and forgetting to check the height?
Is this a bug in the Image control, or have I lost or set the property incorrectly? To reproduce, find / create an image with a "portrait" aspect ratio (higher than its width) and create an image with Stretch = "Uniform".
**** UPDATE WITH XAML REQUEST ****** Please note that the reason the size is not explicit is to allow full screen and zoom.
<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>
source to share
So the way the StackPanel works vertically is that it measures its children with infinite size along the vertical axis, effectively telling the child, "you can be as tall as you like." It does not limit the vertical size of the child (although it does limit it horizontally).
The way the Stretch = Uniform property works on an image without a specific size says, "Be large enough to be within the size constraints while maintaining the aspect ratio."
Now, when you combine the two, you have an image that is limited to only the horizontal axis; it takes up all the space available horizontally and is sized vertically to maintain the aspect ratio.
Did this explanation help you understand why you are seeing the behavior you are seeing?
Imagine you have an image with an aspect ratio of 2: 1 (twice its width). It has Stretch = Uniform and no width / height set. You put it in a 100x100 StackPanel. The image will get a size limit of 100xInfinity. First, it will be located on the horizontal axis and occupy all the space available to it; 100 pixels. It will then see that it has an aspect ratio of 2: 1 and therefore will vertically shrink to 200px. So you end up with a 100x200 image in a 100x100 StackPanel. So the StackPanel forces it to bind to the available space.
source to share
I just tried it with a tall image and it worked great. I suspect the problem is with the container of the Image element - it actually displays the entire image, but the top and bottom are disabled.
Here's what I used for testing:
<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 discarded as they don't have a specific height. I would 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>
It may require a little tweaking to get all borders to display correctly, but you can set padding / border on container elements if that's important to you.
Can you check if your image is working in this XAML? Can you place more of your XAML so we can see the context?
source to share