UWP列表视图溢出大列表

时间:2018-02-20 10:07:34

标签: uwp uwp-xaml

我正在尝试在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>

1 个答案:

答案 0 :(得分:0)

似乎这是UWP中的一个错误,已经报告但尚未修复(请参阅here)。

我认为有一个解决方案理论上可以解决这个问题:使用Clip剪切ListView的可见内容:

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

但是这会引起另一个问题 - 最后的项目永远不会显示,因为它们会溢出并被剪裁。你可以通过添加&#34; fake&#34;来解决这个问题。空的项目列表,但当然这是非常不理想的解决方案。如果API自行修复会更好。