Question

假设我有一个简单的Windows 10 UWP应用程序

<Page
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    <!-- etc -->
    >

    <Grid>

        <ListView>
            <TextBlock Text="Sample text"/>
            <TextBlock Text="Sample text"/>
            <TextBlock Text="Sample text"/>
            <!-- & many more -->
        </ListView>

    </Grid>

</Page>

大量的ListView项导致它溢出并滚动，如预期的那样：

但是，如果我需要添加另一个控件作为ListView的兄弟，就像这样（为了简单起见，用StackPanel替换Grid）

<Page...>

    <StackPanel>

        <ListView>
            <TextBlock Text="Sample text"/>
            <TextBlock Text="Sample text"/>
            <TextBlock Text="Sample text"/>
            ...
        </ListView>

        <StackPanel>
            <TextBlock Text="StackPanel at the bottom"/>
            <Button Content="Click me"/>
        </StackPanel>

    </StackPanel>

</Page>

然后滚动条消失，ListView不再可滚动。内容只是在窗口底部被剪裁/剪掉。

这里发生了什么，如何让它再次滚动？

Answer 1

关键是ScrollViewer control。 ListViews和GridViews首先可以滚动的原因是因为它们内置了ScrollViewer。

将ListView放置在父布局面板（例如StackPanel或Grid行）中时，如果ListView高度大于视口，则父面板将成为ListView的完整高度。但是StackPanel并没有实现ScrollViewer，因此它无法滚动，最终会有一个从视口底边延伸出来的StackPanel。

修复很简单：将父布局面板置于ScrollViewer

中

<Page...>

    <ScrollViewer VerticalScrollBarVisibility="Auto"> <!--default is "Visible"-->
        <StackPanel>

            <ListView>
                <TextBlock Text="Sample text"/>
                <TextBlock Text="Sample text"/>
                <TextBlock Text="Sample text"/>
                ...
            </ListView>

            <StackPanel>
                <TextBlock Text="StackPanel at the bottom"/>
                <Button Content="Click me"/>
            </StackPanel>

        </StackPanel>
    </ScrollViewer>

</Page>

ScrollViewer API reference - MSDN

Answer 2

要为binaryfunt的答案添加更多上下文：这取决于您正在使用的面板的布局逻辑！

事先注意：默认情况下，ListView内部拥有ScrollViewer。

在布置它的孩子时，Grid通常会告诉孩子他们应该适应网格的范围。对于ListView，它很乐意这样做，并且它自己的内部ScrollViewer处理它的孩子滚动。

另一方面，

StackPanel告诉孩子他们在叠加方向上几乎有无限的空间布局 - 所以你的ListView不知道它必须将自己约束到高度您的StackPanel因为StackPanel没有告诉它这样做，所以ListView永远不需要使用它自己的ScrollViewer因为它认为它有无限空间。

现在，将StackPanel放在ScrollViewer中本身并不起作用 - 如果您将ScrollViewer放在StackPanel内，则会遇到同样的问题ListView确实 - 它认为它有无限的空间，所以永远不需要滚动它的内容。但是，将ScrollViewer放在Grid中，网格将为ScrollViewer提供一个已定义的布局大小，因此ScrollViewer内的任何内容现在都会滚动，如果它得到的话太大了。

将ListView放在此StackPanel内的ScrollViewer内？ ListView仍然认为它具有无限空间，因此永远不需要使用自己的卷轴，但它也会禁用ListView通常具有的虚拟化和性能增强功能，因为它们依赖于它＃39; s interal ScrollViewer实际上太过用了。

（binaryfunt＆＃39; XAML答案将起作用。）

布局面板内的内容不滚动

2 个答案: