Question

我正在开发两个包含ListView的Windows 10 UWP Store应用程序。我的问题是，当我调整页面大小并使其变小时，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
运行程序
调整窗口高度以使其低于ListView
尝试向下滚动到第20行

预期行为：

The ListView should be resized

Line 20 should be accessible

实际行为：

The ListView is not resized

Line 20 cannot be accessed

我已经在Windows API中完成了类似的程序：在UWP之前，并认为这应该很容易，但在阅读了MSDN文档数天并检查论坛没有成功之后我意识到必须有一些新的哲学背后的UWP逃脱我的理解。这可能是我错过的一件容易事。任何想法？

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>

Answer 2

我能想到的唯一解决方案是将ScrollViewer包裹在ListView之外。或删除Height="600"上的ListView属性。

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

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

2 个答案: