Я работаю над приложением 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, сжимая все изображения, чтобы они умещались в небольшой части экрана и больше не занимали высоту окна / планшета.

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

0
INNVTV 26 Фев 2016 в 22:51

2 ответа

Лучший ответ

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

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

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

2
Community 23 Май 2017 в 12:31
<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 доступны по вашему желанию.

0
Nghia Nguyen 26 Фев 2016 в 20:37