如何优化 .NET MAUI 中的列表视图数据绑定？

Question

I am working on a MAUI app, which has a page with two ListViews. Only one should be visible at a time, which i do by setting their IsVisible property to true or false. Upon switching from one to the other, the app freezes or becomes extremely slow. I suppose this is because the listview's itemssource is rather large. I bound both listviews to an observablecollection, which should be the fastest option. Both ObservableCollections have data that updates rather often, and both should get quite big (1000+ items). How can I optimize the listviews to load quickly?

I have tried to limit the itemssource to a certain amount of objects, but this only makes it slower. I guess this is because removing items from the itemssource in a first-in-first-out way basically updates every single object within the obervablecollection.

My current code: `

<Grid RowDefinitions="*,5,40" ColumnDefinitions="75,75,75,105,*">
                    <ScrollView x:Name="SerialLogScrollViewASCII"
                            Grid.ColumnSpan="6"
                            VerticalScrollBarVisibility="Always"
                            Grid.Row="0"
                            IsVisible="{Binding IsASCIILogVisible}"
                            BackgroundColor="Transparent">

                        <ListView x:Name="LogStackASCII"
                            ItemsSource="{Binding SerialLogASCII}"
                            BackgroundColor="Transparent"
                                  
                            ItemTapped="LogMessageTapped"
                            SelectionMode="Single">
                            <ListView.ItemTemplate>
                                <DataTemplate >
                                    <ViewCell>
                                        <Grid PropertyChanged="SerialLogChanged" ColumnDefinitions="160,*" ColumnSpacing="5" BackgroundColor="Transparent">
                                            <Label Text="{Binding Time}" Margin="0,0,10,0" Grid.Column="0" FontSize="12" BackgroundColor="Transparent"/>
                                            <Label Text="{Binding Message}" LineBreakMode="CharacterWrap" Grid.Column="1" FontSize="12" BackgroundColor="Transparent"/>
                                        </Grid>
                                    </ViewCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </ScrollView>
                   
                    <ScrollView x:Name="SerialLogScrollViewHEX"
                            Grid.ColumnSpan="6"
                            VerticalScrollBarVisibility="Always"
                            Grid.Row="0"
                            IsVisible="{Binding IsHEXLogVisible}"
                            BackgroundColor="Transparent">
                        <ListView x:Name="LogStackHEX"
                            ItemsSource="{Binding SerialLogHEX}"
                            BackgroundColor="Transparent"                                  
                            ItemTapped="LogMessageTapped"
                            SelectionMode="Single">
                            <ListView.ItemTemplate>
                                <DataTemplate >
                                    <ViewCell>
                                        <Grid PropertyChanged="SerialLogChanged" Padding="1" ColumnDefinitions="160,*" ColumnSpacing="5" BackgroundColor="Transparent">
                                            <Label Text="{Binding Time}" Margin="0,0,10,0" Grid.Column="0" FontSize="12" BackgroundColor="Transparent"/>
                                            <Label Text="{Binding Message}" LineBreakMode="CharacterWrap" Grid.Column="1" FontSize="12" BackgroundColor="Transparent"/>
                                        </Grid>
                                    </ViewCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </ScrollView>
                </Grid>

`

Answer 1

You could try Caching strategy in ListView. Try the following code

<ListView x:Name="LogStackASCII" CachingStrategy="RecycleElement"
...

RecycleElement should be used in the following circumstances:

1. Each cell has a small to moderate number of bindings.
2. Each cell's BindingContext defines all of the cell data.
3. Each cell is largely similar, with the cell template unchanging.

I found the Xamarin official docs ListView performance for you. It also works for Maui . Besides the Caching strategy, it also gives some other ListView performance suggestions to enhance performance of Listview.

By the way, the two ListView almost have the same template, so why not just use one ListView? And when switching, just change the itemsSource it binds to.

Hope it works for you.

Answer 2

1. When you put Vertical ListView, inside Vertical ScrollView, the performance is pretty much non-existent. The more and more items you add, the worse it will get.

You should not be doing this. ListView has its own scroll.

2. Consider CollectionView or DataGrid.

First remove the scolls. Then if you are not happy, try CollectionView or DataGrid. And then if you have questions, please ask.