Использование Image Control с Stretch = UniformToFill - WP7 - PullRequest
Новая
       40

Использование Image Control с Stretch = UniformToFill - WP7

4 голосов
/ 17 декабря 2011

У меня есть изображение, размещенное на странице следующим образом 

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

это вся страница XAML, изображение можно загрузить с http://i.ytimg.com/vi/wNKKCHv-oOw/hqdefault.jpg

Код позади содержит некоторую логику для обработки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;
     }
  }

Если кто-то может попробовать это, он / она может обнаружить, что StrechToFill обрезает содержимое изображения снизу, где, как я ожидаю, оно будет обрезать его сверху и снизу одинаково и сохранить изображениесодержание сосредоточено в области управления изображением.

HOpe Я ясно дал понять, если нет, рассмотрите возможность создания примера из предоставленного кода.Большое спасибо.

Ответы [ 2 ]

8 голосов
/ 09 марта 2012

Основная проблема заключалась в настройке высоты или ширины в элементе управления изображением, теперь я хорошо понимаю, что не нужно задавать высоту или ширину ни для элемента управления изображением, ни для элемента мультимедиа.если вам нужна фиксированная высота, например, в портретном режиме, вы можете поместить ее в элемент управления сеткой и установить ее высоту или ширину.Ниже приведен код, который работал для меня. 

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

И следующий код, если вы хотите изменить это изображение в полноэкранном режиме в ландшафтном режиме 

    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;
    }
3 голосов
/ 26 декабря 2011 
<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>

попробуйте, тогда вам не нужно ничего делать в событии PhoneApplicationPage_OrientationChanged.

...