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

Question

我正在开发两个 Windows 10 个 UWP Store 应用程序，它们都包含一个 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 商店应用程序
如上所示更改 MainPage
运行程序
调整 window 高度使其低于 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:s做过类似的程序，觉得这应该很容易，但是看了几天MSDN文档，查了论坛都没有成功，我意识到一定有UWP 背后的一些新哲学超出了我的理解。这可能是我错过的容易的事情。有什么想法吗？

Answer 1

我能想到的唯一解决方案是将 ScrollViewer 包裹在 ListView 之外。或删除 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>

Answer 2

您为页面指定了高度和宽度，使页面大小保持不变。我已经删除了页面宽度和高度属性。现在可以了。对于 scroll-viewer、，您不需要 scroll-viewer 来滚动浏览 list-view 的项目。

<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>

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

How to resize a UWP ListView to fit Page after resizing Page?

listview

window-resize

uwp