Articles in this section
Category / Section

How to improve performance when doing bulk changes in Xamarin.Forms ListView (SfListView)

2 mins read

You can improve the performance lag when you make bulk changes with bound collection by suspending and resuming the refresh to ListView with the help of DataSource BeginInit and EndInit method in Xamarin.Forms SfListView.

Step 1: Install Refractored.MVVMHelpers nuget package to use the ObservableRangeCollection in the shared code project.

Step 2: Create the ObservableRangeCollection in the ViewModel class.

namespace ListViewXamarin
{
    public class ContactsViewModel : BaseViewModel
    {
        public ObservableRangeCollection<Contacts> ContactsInfo { get; set; }
 
        public ContactsViewModel()
        {
            ContactsInfo = new ObservableRangeCollection<Contacts>();
        }
    }
}

Step 3: Bind the ObservableRangeCollection to the SfListView.ItemsSource property.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ListViewXamarin"
             xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             x:Class="ListViewXamarin.MainPage">
    
    <ContentPage.Behaviors>
        <local:Behavior/>
    </ContentPage.Behaviors>
    
  <ContentPage.Content>
        <StackLayout>
            <Button x:Name="addButton" Text="Populate ListView items"/>
            <syncfusion:SfListView x:Name="listView" ItemSpacing="1" ItemSize="60" ItemsSource="{Binding ContactsInfo}">
                <syncfusion:SfListView.ItemTemplate >
                    <DataTemplate>
                        <Grid x:Name="grid">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="70" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" WidthRequest="50"/>
                            <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center">
                                <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}"/>
                                <Label Grid.Row="1" Grid.Column="0" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}"/>
                            </Grid>
                        </Grid>
                    </DataTemplate>
                </syncfusion:SfListView.ItemTemplate>
            </syncfusion:SfListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Step 4: Added items to the ViewModel collection using the AddRange method. Use the DataSource BeginInit and EndInit method to refresh all the items at once in the UI.

namespace ListViewXamarin
{
    public class Behavior : Behavior<ContentPage>
    {
        SfListView ListView;
        Button AddButton;
        ContactsViewModel ViewModel;
 
        protected override void OnAttachedTo(ContentPage bindable)
        {
            ListView = bindable.FindByName<SfListView>("listView");
            AddButton = bindable.FindByName<Button>("addButton");
            AddButton.Clicked += AddButton_Clicked;
 
            base.OnAttachedTo(bindable);
        }
 
        private void AddButton_Clicked(object sender, EventArgs e)
        {
            this.GenerateInfo();
        }
 
        private void GenerateInfo()
        {
            Random r = new Random();
            var contactsInfo = new ObservableCollection<Contacts>();
            for (int i = 0; i < 15; i++)
            {
                var contact = new Contacts(ViewModel.CustomerNames[i], r.Next(720, 799).ToString() + " - " + r.Next(3010, 3999).ToString());
                contact.ContactImage = ImageSource.FromResource("ListViewXamarin.Images.Image" + r.Next(0, 28) + ".png");
                contactsInfo.Add(contact);
            }
 
            ListView.DataSource.BeginInit();
            ViewModel.ContactsInfo.AddRange(contactsInfo);
            ListView.DataSource.EndInit();
        }
    }
}

View sample in GitHub

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied