使用带Stretch的图像控制= UniformToFill - WP7

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 aa 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.