Question

我正在尝试在页面上显示N个ListView，但我正在努力滚动。我在页面上有3个ListViews溢出（预期的行为）。我想要发生的是能够在Y轴上独立滚动每个ListView，但我希望能够在页面上的X轴上滚动整个ListViews组，如果这是有道理的。

这是一张试图展示我所追求的图片：

这是我页面上的XAML：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ScrollViewer VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Hidden" Width="Auto" HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible" Margin="0,0,0,55">
        <Grid>
            <ListView IsHitTestVisible="{ x:Bind Vm.ListIsLoaded, Mode=OneWay }" Visibility="{ Binding IsChecked, ElementName=ToggleList, Converter={ StaticResource IsCheckedVisibilityConverter } }" 
                      Header="ListView"
                      HorizontalAlignment="Left"
                      ItemsSource="{ x:Bind Vm.List}" 
                      Margin="10,55,0,55" 
                      Width="210"
                      Padding="10">
                <!-- Listview items -->
            </ListView>

            <ListView IsHitTestVisible="{ x:Bind Vm.ListIsLoaded, Mode=OneWay }" Visibility="{ Binding IsChecked, ElementName=ToggleList, Converter={ StaticResource IsCheckedVisibilityConverter } }" 
                      Header="ListView"
                      HorizontalAlignment="Left"
                      ItemsSource="{ x:Bind Vm.List}" 
                      Margin="225,55,-75,55" 
                      Width="210"
                      Padding="10">
                <!-- Listview items -->
            </ListView>

            <ListView IsHitTestVisible="{ x:Bind Vm.ListIsLoaded, Mode=OneWay }" Visibility="{ Binding IsChecked, ElementName=ToggleList, Converter={ StaticResource IsCheckedVisibilityConverter } }" 
                      Header="ListView"
                      HorizontalAlignment="Left"
                      ItemsSource="{ x:Bind Vm.List}" 
                      Margin="440,55,-290,55" 
                      Width="210"
                      Padding="10">
                <!-- Listview items -->
            </ListView>
        </Grid>
    </ScrollViewer>

    <controls:NavigationControl></controls:NavigationControl>
</Grid>

当我修修补补时，实际发生的事情是两件事之一：

水平滚动或每个ListView都不会滚动
我可以垂直滚动独立的ListView，但我仍然无法水平滚动页面

修改我想TLDR是我想要与Windows Store一样的滚动行为 - 但翻转90度所以主轴是水平的。

Answer 1

您需要的只是ScrollViewer -

上的这两项设置

<ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">

请注意，ScrollViewer的以下滚动相关属性具有以下默认值 -

HorizontalScrollBarVisibility = Disabled
VerticalScrollBarVisibility = Visible
HorizontalScrollMode = Auto
VerticalScrollMode = Auto

更新

此外，我注意到您在内部使用了Grid，并且没有为父ScrollViewer提供足够的宽度来水平滚动。在您的情况下，StackPanel可能是更好的选择。或者，您可以使用包含三列的Grid。以下是StackPanel的示例。

<ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto" Margin="0,0,0,55">
    <StackPanel Orientation="Horizontal">
        <ListView IsHitTestVisible="{ x:Bind Vm.ListIsLoaded, Mode=OneWay }" Visibility="{ Binding IsChecked, ElementName=ToggleList, Converter={ StaticResource IsCheckedVisibilityConverter } }" 
              Header="ListView"
              ItemsSource="{x:Bind Vm.List}" 
              Margin="10" 
              Width="210"
              Padding="10">
            <!-- Listview items -->
        </ListView>

        <ListView IsHitTestVisible="{ x:Bind Vm.ListIsLoaded, Mode=OneWay }" Visibility="{ Binding IsChecked, ElementName=ToggleList, Converter={ StaticResource IsCheckedVisibilityConverter } }" 
              Header="ListView"
              ItemsSource="{x:Bind Vm.List}" 
              Margin="10" 
              Width="210"
              Padding="10">
            <!-- Listview items -->
        </ListView>

        <ListView IsHitTestVisible="{ x:Bind Vm.ListIsLoaded, Mode=OneWay }" Visibility="{ Binding IsChecked, ElementName=ToggleList, Converter={ StaticResource IsCheckedVisibilityConverter } }" 
              Header="ListView"
              ItemsSource="{x:Bind Vm.List}" 
              Margin="10" 
              Width="210"
              Padding="10">
            <!-- Listview items -->
        </ListView>
    </StackPanel>
</ScrollViewer>

Answer 2

使用Hub control执行此操作。它具有许多功能，在您的情况下非常有用，如标题，平移/滚动等。

以下是Hub的语法：

<Hub>
    <HubSection>
        <ListView/>
    </HubSection>

    <HubSection>
        <ListView/>
    </HubSection>

    ....

</Hub>

了解详情：Hub control/pattern，Hub Class

水平ScrollViewer中的UWP Mutliple列表视图滚动页面溢出

2 个答案:

更新