带有大列表的 UWP 列表视图溢出

Question

我正在尝试在 UWP 应用中使用 ListView 来显示一些表格数据。我能够很好地生成表格，但是，当将 ListView 绑定到大于大约 50,000 个项目左右的集合时，ListView 项目会溢出 listview 本身的边界，这可以通过将边框应用于 listview 来看到如附图所示。

有没有办法防止这种行为？
Listview Items Overflowing Container

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="5*"/>
            <RowDefinition Height="50*"/>
            <RowDefinition Height="5*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2.5*"/>
            <ColumnDefinition Width="15.8*"/>
            <ColumnDefinition Width="15.8*"/>
            <ColumnDefinition Width="15.8*"/>
            <ColumnDefinition Width="15.8*"/>
            <ColumnDefinition Width="15.8*"/>
            <ColumnDefinition Width="15.8*"/>
            <ColumnDefinition Width="2.5*"/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="6">
            <ListView x:Name="CartGrid" SelectionMode="Extended" VerticalAlignment="Top" BorderBrush="DodgerBlue" BorderThickness="2">
                <ListView.HeaderTemplate>
                    <DataTemplate>
                        <Grid Padding="12" Background="{ThemeResource SystemControlBackgroundBaseLowBrush}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="408"/>
                                <ColumnDefinition Width="360"/>
                                <ColumnDefinition Width="360"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="First Name" Style="{ThemeResource CaptionTextBlockStyle}"/>
                            <TextBlock Grid.Column="1" Text="Surname" Style="{ThemeResource CaptionTextBlockStyle}"/>
                            <TextBlock Grid.Column="2" Text="Category" Style="{ThemeResource CaptionTextBlockStyle}"/>
                        </Grid>
                    </DataTemplate>
                </ListView.HeaderTemplate>
                <ListView.ItemTemplate>
                    <DataTemplate x:Name="TableDataTemplate" x:DataType="local:Person">
                        <Grid Height="48" AutomationProperties.Name="{x:Bind Firstname}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="48"/>
                                <ColumnDefinition Width="360"/>
                                <ColumnDefinition Width="360"/>
                                <ColumnDefinition Width="360"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="1" VerticalAlignment="Center" Style="{ThemeResource BaseTextBlockStyle}" Text="{x:Bind Firstname}" />
                            <TextBlock Grid.Column="2" VerticalAlignment="Center" Text="{x:Bind Lastname}"/>
                            <TextBlock Grid.Column="3" VerticalAlignment="Center" Text="{x:Bind Category}"/>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>
    </Grid>

Answer 1

这似乎是 UWP 中的一个错误，已报告但尚未修复（请参阅here）。

我认为有一个理论上可以解决这个问题的解决方案：使用Clip 剪辑ListView 的可见区域：

<ListView Width="300" Height="200">
   <ListView.Clip>
      <RectangleGeometry Width="300" Height="200" />
   </ListView.Clip>
</ListView>

但这会导致另一个问题 - 最后的项目永远无法显示，因为它们会溢出并被剪裁。您可以通过将“假”空项目添加到列表中来解决此问题，但这当然是非常不理想的解决方案。如果 API 自己修复会更好。