Using Image Control with Stretch = UniformToFill - WP7 - image

Question

I have an image placed on a Page as follow
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Name="im" Source="/images/hqdefault.jpg" Height="250" Stretch="UniformToFill" VerticalAlignment="Center"/>
</Grid>
this is the whole page XAML, image can be downloaded from http://i.ytimg.com/vi/wNKKCHv-oOw/hqdefault.jpg
Code behind contains some logic to handle the PageOrientation_Change
private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
{
if (Orientation == PageOrientation.Landscape ||
Orientation == PageOrientation.LandscapeLeft ||
Orientation == PageOrientation.LandscapeRight)
{
im.Height = Application.Current.Host.Content.ActualWidth;
im.Width = Application.Current.Host.Content.ActualHeight;
im.VerticalAlignment = System.Windows.VerticalAlignment.Bottom;
im.HorizontalAlignment = System.Windows.HorizontalAlignment.Right;
}
else
{
im.Height = 250;
im.Width = Application.Current.Host.Content.ActualWidth;
}
}
If some one may try this he/she may find that StrechToFill crops the content of the image from bottom where as I am expecting it to crop it from top and bottom equally and keep the image content centered within image control.
HOpe I have made myself clear if not please consider making a sample from provided code. Thanks a lot.

Answer 1

Main problem was the setting of height or width on the Image control, i am now well aware not to give heigh or width on the image control nor on media element. if you need a a fixed height for example in portrait mode you may put it in a grid control and set its height or width. following is the code which worked for me.
<Grid Name="grdMedia"
Grid.Row="1"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Height="250">
<Image Name="imThumbnail"
Grid.Row="1"
Stretch="UniformToFill"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
And following code if you want to change this picture to full screen in landscape mode
private void SetUIInLandscape()
{
SystemTray.IsVisible = false;
//Do not change the height or width of image control nor its alignments
//Hide every thing else
grdMedia.Height = Application.Current.Host.Content.ActualWidth;
grdMedia.Width = Application.Current.Host.Content.ActualHeight;
}
private void SetUIInPortrait()
{
SystemTray.IsVisible = true;
//Do not change the height or width of image control nor its alignments
//Make every thing else visible
grdMedia.Height = 250;
grdMedia.Width = Application.Current.Host.Content.ActualWidth;
}

Answer 2

<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Name="im" Source="/images/hqdefault.jpg" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
</Grid>
try this then the u need not do anything in PhoneApplicationPage_OrientationChanged event.