Question

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

目的是使图像在屏幕外流动，水平滚动允许用户从左向右平移以将图像库视为一个长行。

我尝试在父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布局，缩小了所有图像，使它们适合屏幕的一小部分，不再填充窗口/平板电脑的高度。

我尝试过其他一些类似的结果。有没有人有解决这个问题的建议？如果您需要更多信息，请告诉我。

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面板而不是Viewbox。也许简化一下吧。如果这还不够 - 您可以添加一些可绑定属性，这些属性会在窗口大小发生变化时更新，并将这些图像的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都可以根据需要显示为自定义。

在Xaml中水平滚动一行ViewBox图像

2 个答案: