Xaml 水平滚动查看器中的UWP多列表视图可滚动页面溢出

我试图在一个页面上显示N个列表视图，但我很难滚动。我在一个页面上有3个列表视图溢出（预期行为）。我希望能够在Y轴上独立滚动每个ListView，但如果有意义的话，我希望能够在页面的X轴上滚动整个ListView组

下面是一张图片，试图展示我所追求的：

页面上有我的XAML：

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

水平滚动或每个ListView都不会滚动

我可以垂直滚动一个独立的ListView，但仍然不能水平滚动页面

编辑

---

我想TLDR是我想要与Windows应用商店类似的滚动行为，但是翻转90度，所以主轴是水平的。

您所需要的就是

滚动查看器上的这两个设置-

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


更新
另外，我注意到您在内部使用了一个
网格
，并且没有为父级
ScrollViewer
水平滚动提供足够的宽度。在您的情况下，
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>

您只需在
ScrollViewer
-

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


更新
另外，我注意到您在内部使用了一个
网格
，并且没有为父级
ScrollViewer
水平滚动提供足够的宽度。在您的情况下，
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>


使用它。它有许多在你的情况下有用的特性，比如标题、平移/滚动等

以下是Hub的语法：

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

    <HubSection>
        <ListView/>
    </HubSection>

    ....

</Hub>


....

有关更多信息：，
请使用。它有许多在你的情况下有用的特性，比如标题、平移/滚动等

以下是Hub的语法：

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

    <HubSection>
        <ListView/>
    </HubSection>

    ....

</Hub>


....

更多信息：，
我尝试了这些设置，但没有骰子。以下是实际应用程序的屏幕截图：。如你所见，滚动条在那里，但没有跟踪器。如果我使用touch，它只是反弹（因为没有地方滚动）从网格更改为StackPanel现在允许我水平滚动所有项目，但我现在失去了独立滚动每个ListView的能力，因为我没有在ListView控件上取消水平对齐。我现在可以像预期的那样滚动了！非常感谢。不用担心您只需要上面的两个滚动属性。注意
垂直滚动条可见性
的
隐藏
需要替换为
禁用
。我不会对任何事情使用
集线器
控件。我不喜欢它，因为它没有给我提供任何令人兴奋的东西（不像WP7中的
Panorama
控件）。您可以从ScrollViewer中获得相同的平移，它还有大量其他功能，如捕捉。我在此基础上构建了一个
选项卡
控件，您可以查看演示。但是说到这里，
Hub
做了你现在拥有的事情。也许试一试，看看效果如何。我试过那些设置，但没有掷骰子。以下是实际应用程序的屏幕截图：。如你所见，滚动条在那里，但没有跟踪器。如果我使用touch，它只是反弹（因为没有地方滚动）从网格更改为StackPanel现在允许我水平滚动所有项目，但我现在失去了独立滚动每个ListView的能力，因为我没有在ListView控件上取消水平对齐。我现在可以像预期的那样滚动了！非常感谢。不用担心您只需要上面的两个滚动属性。注意
垂直滚动条可见性
的
隐藏
需要替换为
禁用
。我不会对任何事情使用
集线器
控件。我不喜欢它，因为它没有给我提供任何令人兴奋的东西（不像WP7中的
Panorama
控件）。您可以从ScrollViewer中获得相同的平移，它还有大量其他功能，如捕捉。我在此基础上构建了一个
选项卡
控件，您可以查看演示。但是说到这里，
Hub
做了你现在拥有的事情。也许试一试，看看效果如何。你考虑过使用枢轴控制吗？这样，水平滚动行为（选项卡）和垂直滚动行为（列表视图）就有了明确的界限。此外，在指针设备上，您只需使用鼠标滚动滚动列表视图，然后单击选项卡进行切换，这将提供更好的体验。如果你想要，我可以写一个同样的答案如果你想要代码样本谢谢你的回答，我已经考虑了Pivot控件，但我觉得对于这个应用程序，用户需要能够自由查看并可能比较每个列表中的内容，而不必一次限制一个。那么hub控件呢？您可以简单地为引擎盖下的每个ListViews定义多个中心部分，中心也使用ScrollViewer。。。如果你需要中心提供的额外材料，那么就去使用它；否则，请使用最轻的控件执行作业。@AdityaSharma，不，这是错误的。轮毂控制将SV用于tw