question

AnasGuibene avatar image
0 Votes"
AnasGuibene asked ·

How to do animation to my xamarin listview before reordering items from asc to desc

Hello i have a listview and i want to do an animation after i click to the sort button
so i want the animation to appear before reordering the items from asc to desc or from desc to asc 75792-screenshot-1615280310.png


dotnet-xamarinformsdotnet-xamarinforms-xaml
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered ·

Hello,​

Welcome to our Microsoft Q&A platform!

You can add animation to the ViewCell's Appearing Event.

<ListView.ItemTemplate>
                <DataTemplate >

                    <ViewCell Appearing="ViewCell_Appearing" >


Here is animation in ViewCell_Appearing event in the background code.

private async void ViewCell_Appearing(object sender, EventArgs e)
        {
          //  int i = e.ItemIndex;
            int y;

            y = 2000;
            for (int d = 0; d < i; d++)
            {
                int z = d + 1;
                y = y + (400 / (z * z));
            }

            uint x = uint.Parse(y.ToString());
            var cell = sender as ViewCell;
            cell.View.TranslationY = Device_Height / Device_Scale;
            await cell.View.TranslateTo(0, 0, x, Easing.CubicOut);
        }


When I click the Button called Desc, I execute an Command in the ViewModel. When I make re-add data, I clear ObservableCollection, then re-add it. Appearing will execute, and animation will show it again.

public ObservableCollection<Person> persons { get; set; }
        public ICommand DescCommand { protected set; get; }
        public PersonsViewModel(INavigation navigation, IUserDialogs dialogs, ContentPage page):base(dialogs)
        {
            LableText = "&#xf2ed;";
            persons = new ObservableCollection<Person>();
            persons.Add(new Person() { Name = "Leon1", Image = "unfavourite.png", Count = 1, Isfavourite = false });
            persons.Add(new Person() { Name = "Leon2", Image = "unfavourite.png", Count = 2, Isfavourite = false });
            persons.Add(new Person() { Name = "Leon3", Image = "unfavourite.png", Count = 3, Isfavourite = false });
            persons.Add(new Person() { Name = "Leon4", Image = "unfavourite.png", Count = 4, Isfavourite = false });
            persons.Add(new Person() { Name = "Leon5", Image = "unfavourite.png", Count = 5, Isfavourite = false });


            DescCommand = new Command(() =>
            {
                persons.Clear();
                persons.Add(new Person() { Name = "Leon5", Image = "unfavourite.png", Count = 5, Isfavourite = false });
                persons.Add(new Person() { Name = "Leon4", Image = "unfavourite.png", Count = 4, Isfavourite = false });
                persons.Add(new Person() { Name = "Leon3", Image = "unfavourite.png", Count = 3, Isfavourite = false });
                persons.Add(new Person() { Name = "Leon2", Image = "unfavourite.png", Count = 2, Isfavourite = false });
                persons.Add(new Person() { Name = "Leon1", Image = "unfavourite.png", Count = 1, Isfavourite = false });            

            });


Here is running screenshot.

Best Regards,

Leon Lu



If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


· 3 ·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@AnasGuibene-6497 Did you try to above code? You can add your animation in the ViewCell_Appearing method.

0 Votes 0 ·

@LeonLu-MSFT Thanks for answering but I want another animation to appear !
I will send you a screenshot of the animation that I want to apply

0 Votes 0 ·

If you want to achieve this animation, all the item will move closer to the middle, you have to make a custom-renderer for listview

0 Votes 0 ·
AnasGuibene avatar image
0 Votes"
AnasGuibene answered ·

76323-ezgifcom-gif-maker.gif



·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.