Silverlight Image Stretch = "Uniform" Fail для портретных изображений - PullRequest
Новая
       20

Silverlight Image Stretch = "Uniform" Fail для портретных изображений

2 голосов
/ 11 сентября 2009

Я использую элемент управления Silverlight 3.0 Image, установив его свойство Stretch = "Uniform". Если я не ошибаюсь, ожидаемое поведение для Stretch = "Uniform" заключается в том, что он должен масштабировать изображение, сохраняя пропорции, при необходимости создавая почтовый ящик. Это прекрасно работает для изображений с альбомной ориентацией, так как они увеличиваются, чтобы заполнить пространство, сохраняя соотношение сторон, не обрезая изображение. Это полный провал для изображений с более вертикальной или «портретной» ориентацией. Вместо того, чтобы увеличивать изображение, чтобы оно вписалось в элемент управления изображением, они фактически масштабируются за пределы ограничения высоты, так что вы видите только середину изображения с обрезанными верхом и низом. Как будто элемент управления использует только ширину при масштабировании и забывает проверять высоту?

Это ошибка в элементе управления изображением, или я пропустил или неправильно установил свойство? Для воспроизведения найдите / создайте изображение с «портретным» соотношением сторон (выше его ширины) и создайте изображение с помощью Stretch = "Uniform".

**** ОБНОВЛЕНИЕ С ЗАПРОШЕННЫМ XAML ****** Обратите внимание, что причина, по которой размер не является явным, заключается в том, чтобы обеспечить полный экран и масштабирование. 

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

Ответы [ 3 ]

6 голосов
/ 16 сентября 2009

Таким образом, вертикальная StackPanel работает так, что измеряет своих детей с бесконечным размером по вертикальной оси, фактически говоря ребенку: «Вы можете быть такого роста, как вам нравится». Он не ограничивает размер дочернего элемента по вертикали (хотя он ограничивает его по горизонтали).

То, как свойство Stretch = Uniform работает с изображением без явно заданного размера, гласит: «будьте настолько большими, насколько вы можете быть в пределах ограничений размера, сохраняя соотношение сторон».

Теперь, когда вы объединяете эти два, у вас есть изображение, которое ограничено только по горизонтальной оси; для сохранения соотношения сторон требуется все пространство, доступное по горизонтали и размеры по вертикали.

Помогает ли это объяснение понять, почему вы видите поведение, которое видите?

Представьте, что у вас есть изображение с соотношением сторон 2: 1 (в два раза больше его ширины). Он имеет Stretch = Uniform и не имеет явной ширины / высоты. Вы кладете его в StackPanel размером 100x100. Изображение получит ограничение размера 100xInfinity. Сначала он будет измеряться по горизонтальной оси и занимать все пространство, доступное для него; 100 пикселей. Затем он увидит, что он имеет соотношение сторон 2: 1 и будет иметь размер по вертикали до 200 пикселей. Таким образом, вы получите изображение размером 100x200 в StackPanel размером 100x100. Поэтому StackPanel вынуждена обрезать своего дочернего элемента до доступного пространства.

0 голосов
/ 11 сентября 2009

Скорее всего, это вызвано тем, что ширина вашего изображения установлена ​​(его родительским контейнером) вместо его высоты. Он растягивается равномерно, но его высота не ограничена, и он обрезается.

Если это не поможет, предоставьте XAML для его контейнера.

0 голосов
/ 11 сентября 2009

Я только что попробовал это с высоким изображением, и оно работало нормально. Я подозреваю, что проблема в контейнере элемента Image - он на самом деле показывает все изображение, но верх и низ обрезаются.

Вот что я использовал для проверки: 

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

ОБНОВЛЕНИЕ: все ваши вложенные границы сбрасывают его, так как они не имеют определенной высоты. Я бы использовал ImageBrush на границе верхнего уровня: 

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

Может потребоваться небольшая настройка, чтобы правильно отобразить все границы, но вы можете установить отступ / отступ для элементов контейнера, если это важно для вас.

Можете ли вы проверить, работает ли ваше изображение в этом XAML? Можете ли вы опубликовать больше вашего XAML, чтобы мы могли видеть контекст?

...