Горизонтальная прокрутка ряда изображений ViewBox в Xaml

Question

Я работаю над UWP-приложением Windows 10 с пользовательским интерфейсом XAML. Одна из моих страниц требует, чтобы изображения заполняли высоту окна (или экран в режиме планшета) и равномерно масштабировались как одна длинная строка изображений слева направо (выход за пределы экрана). Я получил это установить совершенно используя ViewBoxes для изображений внутри StackPanel установлен в горизонтальную ориентацию, как так:

<StackPanel Orientation="Horizontal"> 
    <Viewbox> 
     <Image Source="http://lorempixel.com/200/200/" /> 
    </Viewbox> 
    <Viewbox> 
     <Image Source="http://lorempixel.com/400/600/" /> 
    </Viewbox> 
    <Viewbox> 
     <Image Source="http://lorempixel.com/700/700/" /> 
    </Viewbox> 
    <Viewbox> 
     <Image Source="http://lorempixel.com/100/300/" /> 
    </Viewbox> 
    <Viewbox> 
     <Image Source="http://lorempixel.com/100/500/" /> 
    </Viewbox> 
</StackPanel> 

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

Я пытался позволяет HorizontalScrollMode на родительских StackPanel, как так:

<StackPanel Orientation="Horizontal" ScrollViewer.HorizontalScrollMode="Enabled"> 

Но это не позволит какой-либо прокруткой вообще.

Я также попытался обернуть все внутри ScrollViewer как так:

<ScrollViewer HorizontalScrollMode="Enabled"> 
    <StackPanel Orientation="Horizontal"> 
     <Viewbox> 
      <Image Source="http://lorempixel.com/200/200/" /> 
     </Viewbox> 
     <Viewbox> 
      <Image Source="http://lorempixel.com/400/600/" /> 
     </Viewbox> 
     <Viewbox> 
      <Image Source="http://lorempixel.com/700/700/" /> 
     </Viewbox> 
     <Viewbox> 
      <Image Source="http://lorempixel.com/100/300/" /> 
     </Viewbox> 
     <Viewbox> 
      <Image Source="http://lorempixel.com/100/500/" /> 
     </Viewbox> 
    </StackPanel> 
</ScrollViewer> 

Но это укомплектовать ломает мое расположение Viewbox, сокращая все изображения, чтобы они поместились в небольшой части экрана и больше не заполнять высота окна/планшета.

Я пробовал ряд других вариантов с аналогичными результатами. У кого-нибудь есть предложения по его решению? Дайте мне знать, если вам нужна дополнительная информация.

Answer 1

Вам нужен ScrollViewer, чтобы включить прокрутку, хотя вы, возможно, потребуется установить несколько свойств, чтобы сделать его только прокрутки по горизонтали, как указано в Windows 8 ListView with horizontal item flow

ScrollViewer.HorizontalScrollBarVisibility="Auto" 
ScrollViewer.VerticalScrollBarVisibility="Disabled" 
ScrollViewer.HorizontalScrollMode="Enabled" 
ScrollViewer.VerticalScrollMode="Disabled" 
ScrollViewer.ZoomMode="Disabled" 

Теперь Viewbox не самый управляемый ... контроль. Вы можете попробовать использовать панель SquareGrid из моего инструментария вместо представлений. Может быть, это немного упростит. Если этого недостаточно, вы можете добавить некоторые связанные свойства, которые будут обновляться при изменении размера вашего окна и привязать Width и Height этих изображений к этим свойствам. Обратите внимание, что вы не можете использовать ActualWidth или ActualHeight, потому что они не меняют уведомления об изменении размера.

Answer 2

<GridView x:Name="ImageGridView" 
         SelectedItem="{x:Bind ViewModel.SelectedLocation, Mode=TwoWay}" 
         Margin="10,0" 
         ScrollViewer.VerticalScrollBarVisibility="Disabled" 
         ScrollViewer.HorizontalScrollBarVisibility="Auto" 
         ScrollViewer.VerticalScrollMode="Disabled" 
         ScrollViewer.HorizontalScrollMode="Auto" 
         Grid.Row="4" Grid.ColumnSpan="5" 
         ItemsSource="{x:Bind ViewModel.CheckedLocations}" 
         ItemContainerStyle="{StaticResource PinsGridViewItemStyle}" 
         ItemTemplate="{StaticResource ImageOverlayGalleryFolderDataTemplate}" > 
        <GridView.ItemsPanel> 
         <ItemsPanelTemplate> 
          <ItemsWrapGrid MaximumRowsOrColumns="1"/> 
         </ItemsPanelTemplate> 
        </GridView.ItemsPanel> 
       </GridView> 

Это мой код, чтобы показать 1 ряд фотографий. Вы можете настроить MaxiumRowsOrColumns. Также обратите внимание, что как HorizontalScrollBarVisibility, так и HorizontalScrollMode присутствуют в обычном режиме, как вы хотите.