Как повысить производительность в представлении списка в формах Xamarin

Question

Я пытаюсь реализовать представление списка, внутри которого есть горизонтальная прокрутка с возможностью прокрутки.

Мой код, как показано ниже.

Модель

public class Community
    {
        public string CommunityName { get; set; }
        public string Population { get; set; }
        public IEnumerable<Person> Persons { get; set; }
    }

    public class Person
    {
        public string Name { get; set; }
        public string City { get; set; }
    }

ViewModel

public class ListViewPageModel
    {
        #region Properties

        public List<Community> CommunitiesList { get; set; }

        #endregion

        #region Ctor

        public ListViewPageModel()
        {
            CommunitiesList = GetItems().ToList();
        }

        #endregion

        #region Methods

        private IEnumerable<Community> GetItems()
        {
            var list = new List<Community>()
            {
                new Community()
                {
                    CommunityName = "Community 1",Population = "1000",
                    Persons = new List<Person>()
                    {
                        new Person() { Name = "Person1" , City= "Hyderabad"},
                        new Person() { Name = "Person2" , City= "Banagalore"},
                        new Person() { Name = "Person3" , City= "Hyderabad"},
                        new Person() { Name = "Person4" , City= "Chennai"},
                        new Person() { Name = "Person5" , City= "Hyderabad"},
                        new Person() { Name = "Person6" , City= "Gangtok"},
                        new Person() { Name = "Person7" , City= "Hyderabad"}
                    }
                },
                new Community()
                {
                    CommunityName = "Community 2",Population = "1000",
                    Persons = new List<Person>()
                    {
                        new Person() { Name = "Person1" , City= "Hyderabad"},
                        new Person() { Name = "Person2" , City= "Banagalore"},
                        new Person() { Name = "Person3" , City= "Hyderabad"},
                        new Person() { Name = "Person4" , City= "Chennai"},
                        new Person() { Name = "Person5" , City= "Hyderabad"},
                    }
                },
                new Community()
                {
                    CommunityName = "Community 1",Population = "1000",
                    Persons = new List<Person>()
                    {
                        new Person() { Name = "Person1" , City= "Hyderabad"},
                        new Person() { Name = "Person2" , City= "Banagalore"},
                        new Person() { Name = "Person3" , City= "Hyderabad"},
                        new Person() { Name = "Person4" , City= "Chennai"},
                        new Person() { Name = "Person5" , City= "Hyderabad"},
                        new Person() { Name = "Person6" , City= "Gangtok"},
                        new Person() { Name = "Person7" , City= "Hyderabad"}
                    }
                },
                new Community()
                {
                    CommunityName = "Community 3",Population = "1000",
                    Persons = new List<Person>()
                    {
                        new Person() { Name = "Person1" , City= "Chennai"},
                        new Person() { Name = "Person2" , City= "Banagalore"},
                        new Person() { Name = "Person3" , City= "Hyderabad"},
                        new Person() { Name = "Person4" , City= "Chennai"},
                        new Person() { Name = "Person5" , City= "Hyderabad"},
                        new Person() { Name = "Person6" , City= "Gangtok"},
                        new Person() { Name = "Person7" , City= "Lucknow"},
                        new Person() { Name = "Person8" , City= "Gangtok"},
                        new Person() { Name = "Person9" , City= "Hyderabad"}
                    }
                },
                new Community()
                {
                    CommunityName = "Community 4",Population = "1000",
                    Persons = new List<Person>()
                    {
                        new Person() { Name = "Person1" , City= "Gangtok"},
                        new Person() { Name = "Person2" , City= "Banagalore"},
                        new Person() { Name = "Person3" , City= "Hyderabad"},
                        new Person() { Name = "Person4" , City= "Chennai"},
                        new Person() { Name = "Person5" , City= "Hyderabad"},
                        new Person() { Name = "Person6" , City= "Gangtok"},
                        new Person() { Name = "Person7" , City= "Lucknow"},
                        new Person() { Name = "Person8" , City= "Hyderabad"},
                    }
                },
                new Community()
                {
                    CommunityName = "Community 1",Population = "1000",
                    Persons = new List<Person>()
                    {
                        new Person() { Name = "Person1" , City= "Hyderabad"},
                        new Person() { Name = "Person2" , City= "Banagalore"},
                        new Person() { Name = "Person3" , City= "Hyderabad"},
                        new Person() { Name = "Person4" , City= "Chennai"},
                        new Person() { Name = "Person5" , City= "Hyderabad"},
                        new Person() { Name = "Person6" , City= "Gangtok"},
                        new Person() { Name = "Person7" , City= "Hyderabad"}
                    }
                },
                new Community()
                {
                    CommunityName = "Community 5",Population = "1000",
                    Persons = new List<Person>()
                    {
                        new Person() { Name = "Person1" , City= "Gangtok"},
                        new Person() { Name = "Person2" , City= "Banagalore"},
                        new Person() { Name = "Person3" , City= "Hyderabad"},
                        new Person() { Name = "Person4" , City= "Chennai"},
                    }
                },new Community()
                {
                    CommunityName = "Community 1",Population = "1000",
                    Persons = new List<Person>()
                    {
                        new Person() { Name = "Person1" , City= "Hyderabad"},
                        new Person() { Name = "Person2" , City= "Banagalore"},
                        new Person() { Name = "Person3" , City= "Hyderabad"},
                        new Person() { Name = "Person4" , City= "Chennai"},
                        new Person() { Name = "Person5" , City= "Hyderabad"},
                        new Person() { Name = "Person6" , City= "Gangtok"},
                        new Person() { Name = "Person7" , City= "Hyderabad"}
                    }
                },new Community()
                {
                    CommunityName = "Community 1",Population = "1000",
                    Persons = new List<Person>()
                    {
                        new Person() { Name = "Person1" , City= "Hyderabad"},
                        new Person() { Name = "Person2" , City= "Banagalore"},
                        new Person() { Name = "Person3" , City= "Hyderabad"},
                        new Person() { Name = "Person4" , City= "Chennai"},
                        new Person() { Name = "Person5" , City= "Hyderabad"},
                        new Person() { Name = "Person6" , City= "Gangtok"},
                        new Person() { Name = "Person7" , City= "Hyderabad"}
                    }
                },new Community()
                {
                    CommunityName = "Community 1",Population = "1000",
                    Persons = new List<Person>()
                    {
                        new Person() { Name = "Person1" , City= "Hyderabad"},
                        new Person() { Name = "Person2" , City= "Banagalore"},
                        new Person() { Name = "Person3" , City= "Hyderabad"},
                        new Person() { Name = "Person4" , City= "Chennai"},
                        new Person() { Name = "Person5" , City= "Hyderabad"},
                        new Person() { Name = "Person6" , City= "Gangtok"},
                        new Person() { Name = "Person7" , City= "Hyderabad"}
                    }
                },new Community()
                {
                    CommunityName = "Community 1",Population = "1000",
                    Persons = new List<Person>()
                    {
                        new Person() { Name = "Person1" , City= "Hyderabad"},
                        new Person() { Name = "Person2" , City= "Banagalore"},
                        new Person() { Name = "Person3" , City= "Hyderabad"},
                        new Person() { Name = "Person4" , City= "Chennai"},
                        new Person() { Name = "Person5" , City= "Hyderabad"},
                        new Person() { Name = "Person6" , City= "Gangtok"},
                        new Person() { Name = "Person7" , City= "Hyderabad"}
                    }
                },new Community()
                {
                    CommunityName = "Community 1",Population = "1000",
                    Persons = new List<Person>()
                    {
                        new Person() { Name = "Person1" , City= "Hyderabad"},
                        new Person() { Name = "Person2" , City= "Banagalore"},
                        new Person() { Name = "Person3" , City= "Hyderabad"},
                        new Person() { Name = "Person4" , City= "Chennai"},
                        new Person() { Name = "Person5" , City= "Hyderabad"},
                        new Person() { Name = "Person6" , City= "Gangtok"},
                        new Person() { Name = "Person7" , City= "Hyderabad"}
                    }
                }
            };
            return list;
        }

        #endregion
    }

listview.xaml

<ListView ItemsSource="{Binding CommunitiesList}"
              HasUnevenRows="True"
              >
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid Padding="5">
                        <Grid BackgroundColor="White" Padding="5">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>

                            <Label  Text="{Binding CommunityName}"/>
                            <Label  Grid.Row="1"  Text="{Binding Population}" />

                            <ScrollView Grid.Row="2"
                                        Orientation="Horizontal">
                                <StackLayout Orientation="Horizontal"
                                             BindableLayout.ItemsSource="{Binding Persons}">
                                    <BindableLayout.ItemTemplate>
                                        <DataTemplate>
                                            <Frame BackgroundColor="Aqua"
                                        CornerRadius="10">

                                        <StackLayout  Spacing="0" >
                                            <Label Text="{Binding Name}" TextColor="#bc5c29"/>
                                            <Label Text="{Binding City}" TextColor="Gray" />
                                        </StackLayout>

                                    </Frame>
                                        </DataTemplate>
                                    </BindableLayout.ItemTemplate>
                                </StackLayout>
                            </ScrollView>


                        </Grid>
                    </Grid>

                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>

    </ListView>

это визуализировать то, что я хочу, но есть проблема, пока scrolling.

в первый раз, как правило, не хватает , но после этого все в порядке.

я попробовал все свойства в CachingStrategy в виде списка.

если я использую элемент recycle, то при прокрутке его, как правило, не хватает.

я пытался использовать Просмотр коллекции вместо scroll v ie ш.

как мне этого избежать?

Answer 1

public enum ListViewCachingStrategy
{
    RetainElement,   // the default value
    RecycleElement,
    RecycleElementAndDataTemplate
}

Стратегия кэширования RetainElement указывает, что ListView будет генерировать ячейку для каждого элемента в списке, и является поведением ListView по умолчанию. Его следует использовать в следующих случаях:

Каждая ячейка имеет большое количество привязок.

Шаблон ячейки часто меняется.

Тестирование показывает, что RecycleElement Стратегия кэширования приводит к снижению скорости выполнения.

Важно понимать последствия стратегии кэширования RetainElement при работе с пользовательскими ячейками. Любой код инициализации ячейки должен выполняться для каждого создания ячейки, что может быть несколько раз в секунду. В этом случае методы макета, которые были хороши на странице, например использование нескольких вложенных экземпляров StackLayout, становятся узкими местами производительности, когда они настраиваются и уничтожаются в режиме реального времени по мере прокрутки пользователем.

RecycleElement стратегия кэширования указывает, что ListView будет пытаться свести к минимуму объем памяти и скорость выполнения путем повторного использования ячеек списка. Этот режим не всегда предлагает улучшение производительности, и тестирование должно быть выполнено, чтобы определить любые улучшения. Однако это предпочтительный выбор, и его следует использовать в следующих случаях:

Каждая ячейка имеет небольшое или умеренное количество привязок.

BindingContext каждой ячейки определяет все данные ячейки.

Каждая ячейка в значительной степени похожа, с неизменным шаблоном ячейки.

Я протестировал код на своем новейшем устройстве android и, похоже, не имеет очевидных различий. И вот некоторые Предложения о производительности ListView.