UWP Listview became very slow while binding massive data

Question

I'm trying to bind data to listview using ObservableCollection.

My XAML is like this

<ScrollViewer x:Name="svListEarthquakes" Grid.Row="2" Grid.ColumnSpan="4" ViewChanged="svListEarthquakes_ViewChanged">
            <ListView x:Name="listEarthquakes" IsItemClickEnabled="True" SelectionMode="Single" ItemsSource="{x:Bind ObsList}" ItemClick="listEarthquakes_ItemClick">
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                        <Setter Property="BorderBrush" Value="LightGray"></Setter>
                        <Setter Property="BorderThickness" Value="0,0,0,1"></Setter>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="2*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="2*"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="0" TextWrapping="WrapWholeWords" Text="{Binding properties.mag}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            <TextBlock Grid.Column="1" TextWrapping="WrapWholeWords" Text="{Binding Path=properties.time,Converter={StaticResource cvtDate}}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            <TextBlock Grid.Column="2" TextWrapping="WrapWholeWords" Text="{Binding geometry.coordinates[0]}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            <TextBlock Grid.Column="3" TextWrapping="WrapWholeWords" Text="{Binding geometry.coordinates[1]}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            <TextBlock Grid.Column="4" TextWrapping="WrapWholeWords" Text="{Binding geometry.coordinates[2]}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            <TextBlock Grid.Column="5" TextWrapping="WrapWholeWords" Text="{Binding properties.place}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </ScrollViewer>

and C# code

private async Task DisplayDataAsync()
        {
            Debug.WriteLine("BeginRequest " + DateTime.Now);

            var repsonse = (Application.Current as App).gEarthquakesGeoJson = await HttpEarthquakes.GetdEarthquakesGeoJsonAsync<EarthquakesModel>(strRequestUrl);
            if (repsonse.metadata.status == 200)
            {
                Debug.WriteLine("EndRequest " + DateTime.Now);
                Debug.WriteLine("BeginxBind " + DateTime.Now);
                Debug.WriteLine("Count " + repsonse.metadata.count);
                ObsList.Clear();
                if (repsonse.metadata.count > 0)
                {
                    //List<FeaturesItem> fis = new List<FeaturesItem>();
                    foreach (FeaturesItem em in repsonse.features)
                    {
                        FeaturesItem fi = new FeaturesItem
                        {
                            type = em.type,
                            properties = em.properties,
                            geometry = em.geometry,
                            id = em.id
                        };
                        ObsList.Add(fi);
                    }

                    //listEarthquakes.ItemsSource = ObsList;
                    Debug.WriteLine("EndxBind " + DateTime.Now);
                }
                else
                {
                    //No Data

                }
            }
            else
            {
                //Net Error

            }
        }

Note: GetdEarthquakesGeoJsonAsync() returns all the data.

For example:

BeginRequest 8/17/2017 5:38:20 PM

EndRequest 8/17/2017 5:38:21 PM

BeginxBind 8/17/2017 5:38:21 PM

Count 1798

EndxBind 8/17/2017 5:38:21 PM

I use Debug.WriteLine to print the time, and found that the web request and response time is very short, and ObsList.Add(fi), also takes a few little time.

But my software is very very slow while scrolling down.

So how to improve it, thanks a lot.

Answer 1

1. Remove ScrollViewer over ListView. It disables ListView virtualization. ListView have it's own ScrollViewer.
2. Enable Virtualization to ListView

Read about virtualization here: https://learn.microsoft.com/en-us/windows/uwp/debug-test-perf/optimize-gridview-and-listview