如何在调整页面大小后调整UWP ListView以适应页面？

Question

我正在开发两个Windows 10 UWP商店应用程序，它们都包含一个ListView。我的问题是，当我调整页面大小并使其变小时，ListView不会改变大小。因此，ListView的一部分对用户来说变得无法访问。为了研究这个问题，我制作了一个非常简单的应用程序，并只更改了XAML代码。

以下是XAML代码的样子：

<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Height="600" Width="340"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="0,0,0,0">
    <ListView x:Name="listView" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch">
        <TextBlock Text="Line 1"></TextBlock>
        <TextBlock Text="Line 2"></TextBlock>
        <TextBlock Text="Line 3"></TextBlock>
        <TextBlock Text="Line 4"></TextBlock>
        <TextBlock Text="Line 5"></TextBlock>
        <TextBlock Text="Line 6"></TextBlock>
        <TextBlock Text="Line 7"></TextBlock>
        <TextBlock Text="Line 8"></TextBlock>
        <TextBlock Text="Line 9"></TextBlock>
        <TextBlock Text="Line 0"></TextBlock>
        <TextBlock Text="Line 11"></TextBlock>
        <TextBlock Text="Line 12"></TextBlock>
        <TextBlock Text="Line 13"></TextBlock>
        <TextBlock Text="Line 14"></TextBlock>
        <TextBlock Text="Line 15"></TextBlock>
        <TextBlock Text="Line 16"></TextBlock>
        <TextBlock Text="Line 17"></TextBlock>
        <TextBlock Text="Line 18"></TextBlock>
        <TextBlock Text="Line 19"></TextBlock>
        <TextBlock Text="Line 20"></TextBlock>
    </ListView>

</Grid>

如何复制：

• 创建一个 Windows 10 应用程序
• 按上述方式修改主页面
• 运行程序
• 调整窗口高度，使其低于 ListView
• 尝试向下滚动至第 20 行

预期行为：

The ListView should be resized

Line 20 should be accessible

实际行为：

The ListView is not resized

Line 20 cannot be accessed

在使用UWP之前，我曾经在Windows API中编写过类似的程序，认为这应该很容易，但是在阅读了数天的MSDN文档并且在论坛上查找无果后，我意识到UWP背后一定有一些新的哲学原理超出了我的理解范围。可能是我错过了一些简单的东西。

- Hobbe51

Answer 1

您已经为页面指定了高度和宽度，这使得页面大小保持不变。我已经删除了页面的宽度和高度属性。现在可以正常工作了。关于滚动查看器，您不需要滚动查看器来滚动浏览列表视图中的项目。

<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="0,0,0,0">
    <ListView x:Name="listView" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch">
        <TextBlock Text="Line 1"></TextBlock>
        <TextBlock Text="Line 2"></TextBlock>
        <TextBlock Text="Line 3"></TextBlock>
        <TextBlock Text="Line 4"></TextBlock>
        <TextBlock Text="Line 5"></TextBlock>
        <TextBlock Text="Line 6"></TextBlock>
        <TextBlock Text="Line 7"></TextBlock>
        <TextBlock Text="Line 8"></TextBlock>
        <TextBlock Text="Line 9"></TextBlock>
        <TextBlock Text="Line 0"></TextBlock>
        <TextBlock Text="Line 11"></TextBlock>
        <TextBlock Text="Line 12"></TextBlock>
        <TextBlock Text="Line 13"></TextBlock>
        <TextBlock Text="Line 14"></TextBlock>
        <TextBlock Text="Line 15"></TextBlock>
        <TextBlock Text="Line 16"></TextBlock>
        <TextBlock Text="Line 17"></TextBlock>
        <TextBlock Text="Line 18"></TextBlock>
        <TextBlock Text="Line 19"></TextBlock>
        <TextBlock Text="Line 20"></TextBlock>
    </ListView>

</Grid>

- Razor

---

啊，页面大小就是问题所在。谢谢！ - Hobbe51

我该如何将您的答案标记为正确答案并给予您帮助的信用（我是stackoverflow的新手）？ - Hobbe51

Answer 2

我能想到的唯一解决方案是在 ListView 外部包装 ScrollViewer。 或者移除 ListView 上的 Height="600" 属性。

<ScrollViewer VerticalScrollBarVisibility="Auto">
    <ListView x:Name="listView" Margin="0,0,0,0" HorizontalAlignment="Stretch" Height="600" VerticalAlignment="Stretch" Width="340" ScrollViewer.VerticalScrollBarVisibility="Auto">
        <TextBlock Text="Line 1"></TextBlock>
        <TextBlock Text="Line 2"></TextBlock>
        <TextBlock Text="Line 3"></TextBlock>
        <TextBlock Text="Line 4"></TextBlock>
        <TextBlock Text="Line 5"></TextBlock>
        <TextBlock Text="Line 6"></TextBlock>
        <TextBlock Text="Line 7"></TextBlock>
        <TextBlock Text="Line 8"></TextBlock>
        <TextBlock Text="Line 9"></TextBlock>
        <TextBlock Text="Line 0"></TextBlock>
        <TextBlock Text="Line 11"></TextBlock>
        <TextBlock Text="Line 12"></TextBlock>
        <TextBlock Text="Line 13"></TextBlock>
        <TextBlock Text="Line 14"></TextBlock>
        <TextBlock Text="Line 15"></TextBlock>
        <TextBlock Text="Line 16"></TextBlock>
        <TextBlock Text="Line 17"></TextBlock>
        <TextBlock Text="Line 18"></TextBlock>
        <TextBlock Text="Line 19"></TextBlock>
        <TextBlock Text="Line 20"></TextBlock>    
    </ListView>
</ScrollViewer>

- Ask Too Much

---

谢谢您的回答。我尝试了这两个建议，但它仍然存在同样的问题。 - Hobbe51

你遇到了什么问题？ - Ask Too Much

当我调整窗口大小时，页面中的ListView不会改变大小。如果窗口小于ListView，则无法看到ListView的部分内容。我需要ListView始终与页面大小相同。 - Hobbe51

尝试从我的答案中删除ScrollViewer控件，并删除listView中的Height和Width属性。 - Ask Too Much

然后如果我这样做，我又回到了原点。无论如何，我找到了一个叫做“VerticalContentAlignment”的东西，听起来很有趣，但是经过很多摆弄仍然没有成功。 - Hobbe51

你的初始代码中，ListView 的高度和宽度是固定的，也许我的回答现在已经不相关了。 - Ask Too Much