New to Telerik UI for Xamarin? Download free 30-day trial

Remove TreeView Animation Transition effect

Environment

Product Version 2019.3 1023.1
Product TreeView for Xamarin

Description

This help article will show you how to remove the TreeView animation transition when expand/collapse items

Solution

This scenario could be achieved through a custom renderer or an effect for each platforms. Lets stop the animation creating an Effect.

Creating an Effect on Each Platform

The following sections describe the platform-specific implementation of the AnimationEffect class.

Android Project

The following code example shows the AnimationEffect implementation for the Android project:

using Android.Support.V7.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ResolutionGroupName("MyCompany")]
[assembly: ExportEffect(typeof(TestLV.Droid.AnimationEffect), nameof(TestLV.AnimationEffect))]

namespace TestLV.Droid
{
    public class AnimationEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            RecyclerView treeView = (RecyclerView)this.Control;
            treeView.SetItemAnimator(null);
        }

        protected override void OnDetached()
        {
        }
    }
}

iOS Project

The following code example shows the AnimationEffect implementation for the iOS project:

using TelerikUI;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ResolutionGroupName("MyCompany")]
[assembly: ExportEffect(typeof(TestLV.iOS.AnimationEffect), nameof(TestLV.AnimationEffect))]

namespace TestLV.iOS
{
    public class AnimationEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            TKListView treeview = this.Control as TKListView;
            TKListViewLinearLayout layout = ((TKListViewLinearLayout)treeview.Layout);
            layout.AnimationDuration = 0;
        }
        protected override void OnDetached()
        {

        }
    }
}

UWP Project

The following code example shows the AnimationEffect implementation for the UWP project:

using Xamarin.Forms;
using Xamarin.Forms.Platform.UWP;

[assembly: ResolutionGroupName("MyCompany")]
[assembly: ExportEffect(typeof(TestLV.UWP.AnimationEffect), nameof(TestLV.AnimationEffect))]
namespace TestLV.UWP
{
    public class AnimationEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            (Control as Windows.UI.Xaml.Controls.ItemsControl).ItemContainerTransitions = null;
        }
        protected override void OnDetached()
        {
        }
    }
}

Consuming the Effect

Lets consume the effect from a Xamarin.Forms .NET Standard library project as follows:

  1. Declare a control that will be customized by the effect and attach the effect to the control by adding it to the control's Effects collection.
<telerikDataControls:RadTreeView x:Name="treeView" ItemsSource="{Binding Source}">
    <telerikDataControls:TreeViewDescriptor DisplayMemberPath="Name"
                                    ItemsSourcePath="Children"
                                    TargetType="{x:Type local:Item}" />
    <telerikDataControls:RadTreeView.Effects>
        <local:AnimationEffect/>
    </telerikDataControls:RadTreeView.Effects>
</telerikDataControls:RadTreeView>

and here is a sample ViewModel and business model definition:

public class ViewModel
{
    public ViewModel()
    {
        Source = new ObservableCollection<Item>();
        Source.Add(new Item("My Documents")
        {
            Children = new List<Item>()
            {
                new Item("Xamarin Projects")
                {
                    Children = new ObservableCollection<Item>()
                    {
                        new Item("TreeView Examples"),
                        new Item("Calendar & Scheduling QSF")
                    }
                },
                new Item("Documentation Drafts")
            }
        });
        Source.Add(new Item("Shared Documents")
        {
            Children = new List<Item>()
            {
                new Item("Reports")
                {
                    Children = new List<Item>()
                    {
                        new Item("October"),
                        new Item("November"),
                        new Item("December")
                    }
                }
            }
        });
        Source.Add(new Item("Shared")
        {
            Children = new List<Item>()
            {
                new Item("Items")
                {
                    Children = new List<Item>()
                    {
                        new Item("October"),
                        new Item("November"),
                        new Item("December")
                    }
                }
            }
        });
    }
    public ObservableCollection<Item> Source { get; set; }
}

public class Item
{
    public Item(string name)
    {
        this.Name = name;
        this.Children = new ObservableCollection<Item>();
    }

    public string Name { get; set; }
    public IList<Item> Children { get; set; }
}

then create AnimationEffect class in the .NET Standard Library project and add the following code:

using Xamarin.Forms;

namespace TestLV
{
    public class AnimationEffect : RoutingEffect
    {
        public AnimationEffect() : base($"MyCompany.{nameof(AnimationEffect)}")
        {

        }
    }
}
In this article
Not finding the help you need? Improve this article