水平滚动 Xaml 中的一行 ViewBox 图片

Question

我正在开发带有 XAML UI 的 UWP Windows 10 应用程序。我的一个页面要求图像填充 window（或平板电脑模式下的屏幕）的高度，并从左到右（离开屏幕）统一缩放为一长行图像。我已经使用 ViewBox 将 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>

目的是让图像通过水平滚动流出屏幕，允许用户从左向右平移以将图像库视为一长行。

我试过像这样在父级 StackPanel 上启用 HorizontalScrollMode：

<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 布局，因为它缩小了所有图像，使它们适合屏幕的一小部分，不再填充 window/tablet 高度。

我已经尝试了许多其他变体，结果相似。有没有人有解决这个问题的建议？如果您需要更多信息，请告诉我。

Answer 1

<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 都可以根据需要自定义。

Answer 2

您确实需要 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 我的工具包中的面板，而不是视图框。也许简化一下。如果这还不够 - 您可以添加一些可绑定的属性，这些属性会在 window 的大小发生变化时更新，并将这些图像的 Width 和 Height 绑定到这些属性。请注意，您不能使用 ActualWidth 或 ActualHeight，因为它们不会在大小更改时引发更改通知。

水平滚动 Xaml 中的一行 ViewBox 图片

Horizontal scrolling a row of ViewBox images in Xaml

wpf

xaml

winrt-xaml

win-universal-app

windows-10-universal