Skip to content

This repository contains sample about how to improve performance when doing bulk changes in Xamarin.Forms ListView (SfListView)

Notifications You must be signed in to change notification settings

SyncfusionExamples/datasource-listview-refresh-xamarin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 

Repository files navigation

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

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.

You can also refer the following article.

https://www.syncfusion.com/kb/11395/how-to-improve-performance-when-doing-bulk-changes-in-xamarin-forms-listview-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();
        }
    }
}

About

This repository contains sample about how to improve performance when doing bulk changes in Xamarin.Forms ListView (SfListView)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages