Using image control with Stretch = UniformToFill - WP7

Question

I have an image posted on a page as shown below.

<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 XAML page, the image can be downloaded from http://i.ytimg.com/vi/wNKKCHv-oOw/hqdefault.jpg

The code behind contains some logic for handling 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 someone can try this, he / she may find that StrechToFill trims the contents of the image from below, as I expect it to crop it evenly from the top and bottom and save the contents of the image in the image control center.

HOpe I made it clear, if not, consider making a sample from the code provided. Thank you very much.

Answer 1

The main problem was adjusting the height or width in the Image control, now I know well that you should not use heigh or width to control the image or for the multimedia element. if you need a fixed height, such as in portrait mode, you can put it in a grid control and set its height or width. following code that 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 the following code, if you want to change this image 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 you don’t need to do anything in the PhoneApplicationPage_OrientationChanged event.