CODEWITHSUNDEEP
c#listviewxamarin.forms
Chandu Ranwala
Chandu Ranwala

Reputation: 305

How To improve the performance in List View in Xamarin Forms

I am trying to implement list view, inside this it has horizontal scroll able scroll view.

My code like below.

Model

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>

this is visualize what i want but there is a problem while scrolling.

first time it is tend to lagging but after that it is ok.

i tried all properties in CachingStrategy in list view.

if i use recycle element it tend to lack every time while scrolling.

i tried using Collection View instead of scroll view.

how can i avoid this lacking?

Upvotes: 0

Views: 1651

Answers (1)

Lucas Zhang
Lucas Zhang

Reputation: 18861

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

The RetainElement caching strategy specifies that the ListView will generate a cell for each item in the list, and is the default ListView behavior. It should be used in the following circumstances:

Each cell has a large number of bindings .

The cell template changes frequently.

Testing reveals that the RecycleElement caching strategy results in a reduced execution speed.

It's important to recognize the consequences of the RetainElement caching strategy when working with custom cells. Any cell initialization code will need to run for each cell creation, which may be multiple times per second. In this circumstance, layout techniques that were fine on a page, like using multiple nested StackLayout instances, become performance bottlenecks when they're set up and destroyed in real time as the user scrolls.

The RecycleElement caching strategy specifies that the ListView will attempt to minimize its memory footprint and execution speed by recycling list cells. This mode doesn't always offer a performance improvement, and testing should be performed to determine any improvements. However, it's the preferred choice, and should be used in the following circumstances:

Each cell has a small to moderate number of bindings.

Each cell's BindingContext defines all of the cell data.

Each cell is largely similar, with the cell template unchanging.

I tested the code on my newest android device and seems has no obvious difference . And here is some Suggestions about ListView Performance .

Upvotes: 1

Related Questions