none
Sorting list with animation effect like airport flight information.

    Question

  • In my WPF app,there is a list that contains around 200 items. One background process uses an algorithm to sort the list every 10 seconds. When updating the sorted list, I hope it could have an animation effect like the airport flight information (fliping item from top to bottom one by one). How to achieve it in WPF?

    Thanks in advance.

    Elaine

    Friday, May 04, 2012 10:11 AM

All replies

  • Hello Elaine,

    Martin Kruger posted a Silverlight project in the galleries today that looks very much like a flight information board. 

    When I saw it, I remembered seeing your post and wondering how someone would go about designing that.  I thought you might like to take a look and possibly get some ideas for your project.

    http://gallery.expression.microsoft.com/SLDCUCSL4?SRC=Home

    ~Christine


    My Gallery

    Monday, May 07, 2012 5:55 PM
  • Hi Elaine Yu,

    You could animate the ListboxItem height property, when this item at top position, you could animate its height form original value to 0, in animation completed event handler, remove this item, and add this item to your collection, then it will appear at bottom, then in this Listboxitem loaded event trigger, you could animate the height property, from 0 to correct value, there is a sample you could refer to:

    http://social.msdn.microsoft.com/Forums/en/wpf/thread/7d7509be-6fb4-4069-892f-e3fab0aa6b0b

    Best regards,


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Tuesday, May 08, 2012 7:51 AM
  • Hi Sheldon,

    I tried the methods in your link, but could not get the animation effect. Here is the pesudo code:

     void btnSort_Click(object sender, RoutedEventArgs e)
            {
                Object current = _songlistBox.Items[0];
                if (current == null)
                    return;
    
                ListBoxItem item = _songlistBox.ItemContainerGenerator.ContainerFromItem(current) as ListBoxItem;
                if (item == null)
                    return;
    
                System.Windows.Media.Animation.DoubleAnimation dblAnimate = new System.Windows.Media.Animation.DoubleAnimation();
                dblAnimate.From = 10; dblAnimate.To = 0;
                dblAnimate.Duration = TimeSpan.FromSeconds(2);
    
    
    	    _songList = _songList.OrderBy(a => Guid.NewGuid()).ToList<Song>();
                try
                {
                    _songlistBox.ItemsSource = _songList;
                }
                catch (Exception ex)
                {
                    System.Diagnostics.Debug.Assert(false, ex.Message);
                }
    
    
                item.BeginAnimation(FrameworkElement.HeightProperty, dblAnimate);
                cnt++;
                System.Diagnostics.Debug.Write(string.Format("\nTotoal time called in Selection changed: {0}", cnt));
            }

    the line:  _songList = _songList.OrderBy(a => Guid.NewGuid()).ToList<Song>() is the pesudo code to the sorting.

    Can you advise?

    Thanks,

    Elaine

               


    • Edited by Elaine Yu Wednesday, May 16, 2012 5:52 AM
    Wednesday, May 16, 2012 5:52 AM
  • Hi Elaine Yu,

    I could not repro your issue with above code, could you share more information to repro it?

    Best regards,


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Thursday, May 17, 2012 5:18 AM
  • Hi Sheldon,

    Ok, I am not reporting a bug, forget it.

    Maybe I put my requirment in this way. I have a list (100 items). Every 10 seconds, the list gets sorted once. I want to animate the sorting process. The animation effect will look like the airport flight information. When the flight information gets updated, the new flight information is not updated for the whole list at the same time. It is updated one by one from top to bottom. When my list gets sorted, the sorted list should be updated one by one, from top to bottom. Can you advise?

    I searched the web, someone had asked similiar question, but no answer and no code found so far.

    Regards,

    Elaine

    Friday, May 18, 2012 5:42 AM