Articles in this section
Category / Section

How to animate newly rendering ListView items in Xamarin.Forms (SfListView)

2 mins read

You can animate the ListViewItem only when loading for the first time, not on reusing by using the Model class property in Xamarin.Forms SfListView.

You can refer to the following documentation to animate the ListViewItems,

https://www.syncfusion.com/kb/9537/how-to-animate-xamarin-listview-items

XAML

Bind Button.Command to add items to the collection.

<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" Padding="0,20,0,0">
    <ContentPage.BindingContext>
        <local:ContactsViewModel/>
    </ContentPage.BindingContext>
    <ContentPage.Behaviors>
        <local:Behaviour/>
    </ContentPage.Behaviors>
    <ContentPage.Content>
        <StackLayout>
            <Button x:Name="addButton" Text="Add items" Command="{Binding AddItemsCommand}" HeightRequest="50"/>
            <syncfusion:SfListView x:Name="listView" 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>

C#

Add items in the command execution method.

namespace ListViewXamarin
{
    public class ContactsViewModel : INotifyPropertyChanged
    {
        public ObservableCollection<Contacts> ContactsInfo { get; set; }
        public Command AddItemsCommand { get; set; }
 
        public ContactsViewModel()
        {
            ContactsInfo = new ObservableCollection<Contacts>();
            AddItemsCommand = new Command(AddItems);
            GenerateInfo();
        }
 
        private void AddItems()
        {
            Random r = new Random();
            for (int i = 0; i < 5; i++)
            {
                var contact = new Contacts(CustomerNames[r.Next(0, 30)], 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);
            }
        }
    }
}

C#

Defined IsAnimated property in the Model class. Get the item data from the BindingContext of the ListViewItemExt. Based on the IsAnimated property, you can animate the ListViewItem only once.

public class ListViewItemExt : ListViewItem
{
    public ListViewItemExt()
    {
    }
 
    protected override void OnItemAppearing()
    {
        var item = this.BindingContext as Contacts;
        if (!item.IsAnimated)
        {
            this.Opacity = 0;
            this.FadeTo(1, 400, Easing.SinInOut);
            item.IsAnimated = true;
        }
        base.OnItemAppearing();
    }
}

Output

Demo image to animate the ListViewItem when added in the Xamarin.Forms SfListView.

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