We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: Xamarin.Forms |
Control: SfListView |
Published Date: April 14, 2020 |
Last Revised Date: April 14, 2020

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

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile