ListView: Animations

TKListView supports three predefined item animations:

Animation Type Figures
Fade-in
Scale-in
Slide-in

The animated images above are just for illustration purposes. They are missing some fps quality because of the image processing software used to create these images. In order to get a real understanding of how the animations look and feel, check the Demo application that ships with the UI for Xamarin suite.

These animations can be applied when items enter different states. The following list contains all states where animations can be applied:

  • when an item appears when scrolling
  • when adding/inserting an item
  • when removing an item

Accessing the animations API

The animations can be controlled from the animations-related properties of the Telerik ListView layouts. These properties are exposed at the TKListViewLinearLayout which is the base layout for the TKListViewGridLayout and TKListViewStaggeredLayout. So, in order to apply some animation settings to that layout, you can take it like this:

TKListViewLinearLayout layout = (TKListViewLinearLayout)listView.Layout;

Appear animations

Those animations are applied when scrolling the list view. You can add a scroll animation by setting the itemAppearAnimation property of TKListViewLinearLayout:

layout.ItemAppearAnimation = TKListViewItemAnimation.Scale;

Add/Remove animations

To animate an item on insert set the itemInsertAnimation property:

layout.ItemInsertAnimation = TKListViewItemAnimation.Scale;

Use the insertItemsAtIndexPaths: method to insert an item with animation:

this.listView.InsertItems (new NSIndexPath[] { NSIndexPath.FromItemSection ((nint)(this.items.Count - 1), 0) });

To animate an item on delete set the itemDeleteAnimation property:

layout.ItemDeleteAnimation = TKListViewItemAnimation.Slide;

Use the deleteItemsAtIndexPaths: method to delete an item with animation:

this.listView.DeleteItems(selectedItemsPaths);

Be sure to update your data source before triggering item insert/delete methods in TKListView.

Animations duration

Animations are controlled by setting properties of TKListViewLinearLayout class. The animation duration is controlled by setting the animationDuration property:

layout.AnimationDuration = 0.4f;