WPF ListView animation by reorder of items?

Question

I want to do something I saw during a WPF demo some years ago. I don't know how it was done but I know it can be done so that is my problem.

In the demo there was an WPF application with a ListView or ListBox with a lot of items. Every the ListView was reordered the items changed places in the list. But the ListView was not just refreshed in fact there was an animation of the items moving to their new positions.

This application was very cool and right now this is exactly what I need. We plan to do a live-data-ranking-apps and this kind of animation would be perfect.

But no one in my team has an idea how this can be done. I am thinking of an ObservableCollection and Databinding but the rest is a total mystery to me.

Any hint or idea would be a great help. I am sure someone has done that already. I saw it with my own eyes when WPF was new but I have no idea where to start looking.

Answer 1

Another option is to use Microsoft's ReorderThemeTransition. From the example on the site:

<!--XAML-->
<StackPanel>
<Button x:Name="AddItemButton" Content="AddItem" Click="AddItemButton_Click"/>
<ItemsControl x:Name="ItemsList">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid>
                <WrapGrid.ChildrenTransitions>
<!-- Apply a ReorderThemeTransition that will run when child elements are reordered. -->
                    <TransitionCollection>
                        <ReorderThemeTransition/>
                    </TransitionCollection>
                </WrapGrid.ChildrenTransitions>
            </WrapGrid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <!-- Initial items. -->
    <Rectangle Width="100" Height="100" Fill="Red"/>
    <Rectangle Width="100" Height="100" Fill="Green"/>
    <Rectangle Width="100" Height="100" Fill="Blue"/>            
</ItemsControl>            
</StackPanel>

And then in the Code:

//    C#
private void AddItemButton_Click(object sender, RoutedEventArgs e)
{
    Rectangle newItem = new Rectangle();
    Random rand = new Random();

    newItem.Height = 100;
    newItem.Width = 100;
    newItem.Fill = new SolidColorBrush(Color.FromArgb(255,
            (byte)rand.Next(0, 255), (byte)rand.Next(0, 255), (byte)rand.Next(0, 255)));

    // Insert a new Rectangle of a random color into the ItemsControl at index 2.
    ItemsList.Items.Insert(2, newItem);
}

Answer 2

There is also the possibility of doing a custom Panel. Charlie is pretty much right about overriding layout. To create a custom Panel, you primarily have to override the MeasureOverride and ArrangeOverride methods inherited from System.Windows.Controls.Panel.

This project on CodeProject demonstrates a couple custom panels in which you could study how they animated. The FanPanel animates the repositioning of items when one moves from the end of one row to the beginning of another or vice-versa.

This tutorial also demonstrates beginning animations in ArrangeOverride.

I haven't tried it, but you may also be able to use the rank value along with a custom ValueConverter to convert the rank to a position in order to drive such an animation within a Canvas. A custom panel would be better self-contained, though, allowing you to change the DataTemplate used on your ranked data and let each of those tell the Panel how tall they want to be (assuming they're arranged vertically).

Answer 3

I have never attempted something like this, but my suspicion is that at the very least, you will need to write your own ViewBase for the ListView. There are excellent examples of that here and here. The real issue then becomes, what event do you use for your animation triggers? Try looking at ItemsControl.ItemsChanged.

Ultimately, you may have to inherit from ItemsControl and override several layout and arrange methods in order to get this functionality. Even with WPF's ultra-customizable controls, this is no easy task, and will require more code-behind than XAML.